Questions tagged [fluentui-react]

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.

Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

311 questions
0
votes
2 answers

Can I render a React component after it returns?

I have a React component like this export const NewComponent: React.FC = ({prop1, prop2, prop3 }) => { const getAbsPositionDialog = () => { const element = document.getElementById('modalDialogId'); if…
user3587624
  • 1,427
  • 5
  • 29
  • 60
0
votes
0 answers

add custom attribute to primary button of fluent ui

I need a unique custom attribute on the clickable part of fluent ui primary button. when I put on it custom attribute that starts with data- for example
miri l.
  • 141
  • 6
0
votes
0 answers

Why isn't flexGrow prop working from FluentUI?

Im creating a tiny replica of a table/detailsList with the intention to make the columns responsive and share the space available equally. Im trying to use the flexGrow prop from fluentUI. Problem is that whatever i'm trying to do doesn't make the…
Emil
  • 1
0
votes
0 answers

Fluent UI - Detail List Context Menu Props update based on the local state

I have fluent UI detail list context menu. when I right click it visible and context menu inside have list of checkbox update the check box based on the local state not working. Here is the codepen example which i tried :…
Mohamed
  • 13
  • 3
0
votes
2 answers

React and Fluent UI style - type 'string' is not assignable to type 'undefined'

I have a Card component from FluentUI library. I want to hover over the card and change the color of the border. This is my attempt to do it but for some reason I am having below error: type 'string' is not assignable to type 'undefined' const…
user3587624
  • 1,427
  • 5
  • 29
  • 60
0
votes
0 answers

FluentUI react control for displaying bookmarks

Is there any FluentUI react control to display bookmarks as shown in the attached image. I didn't find it in react controls list.
user17274
  • 11
  • 2
  • 6
0
votes
0 answers

How can I get a light font weight in Fluent UI v9?

It seems that Fluent UI v9 has bold font weights, but no light font weights. (See Fonts.) Does anyone know why this is and if there's a workaround to get the effect of a light font weight?
Rick Kirkham
  • 9,038
  • 1
  • 14
  • 32
0
votes
0 answers

Prop id do not match server, is this serious ? when i publish my website, will it affect that?

I am using fluent ui in my next-js project, I keep encountering an error Whenever I would refresh the page, the styles would break, and the warning shows up. I managed to resolve it partially, my components styles don't break anymore refreshing the…
lams
  • 352
  • 1
  • 10
0
votes
1 answer

How to register an icon in FluentUI from an external SVG?

I'm trying to register an SVG as an icon, in Fluent UI. If the SVG exists in the local, referencing it directly like so: registerIcons({ icons: { 'icon-name': } }); I've tried rendering the SVGs using the tag and…
Mavi Domates
  • 4,262
  • 2
  • 26
  • 45
0
votes
0 answers

How add Breadcrumb to list from react-teams

Is there anyway to add Breadcrumb to List behind emptySelectionActionGroups need to show name and label for my list? Can i add a button in right side behind filter text? Is there any example with react code because Microsoft share figma without code
Mokh Akh
  • 421
  • 3
  • 14
0
votes
2 answers

How do I add an opacity to the background color css attribute using a fluent ui color?

So I am trying to add an opacity to a background color but the specific background color I am using is coming from the fluent UI library, thus using Design Tokens. I know normally, I can add opacity to a background color like this background-color:…
0
votes
0 answers

Can we use Fluent UI react with C++ application?

We are building a cpp application for Windows desktop with modern look and feel. I read about how Office apps are built using and got to know that it is built using Fluent UI react V8. And I also went through Excel.exe.mannifest file in my system…
0
votes
1 answer

Fluent UI Details List start from the left

I have a UI as follows: implemented using Fluent UI DetailsList. I see a lot of space on the left before displaying the list. How do I update this to:
user989988
  • 3,006
  • 7
  • 44
  • 91
0
votes
1 answer

how can I select multiple dropdown items with the same header value?

I am using the Fluent UI React Northstar Dropdown component in my React application. I have enabled multiple item selection, but I noticed that if there are multiple items with the same header value, only one item can be selected. Is there any…
DevÁsith
  • 1,072
  • 12
  • 38
0
votes
2 answers

How to conditionally render stroke color in React with Fluent UI and react-hooks?

Here props.data!.lineChartData![0].color! can be optional, so what to modify in code such that if it is defined then it should render stroke color from props.data!.lineChartData![0].color! else from sam.line stroke where sam=useSample(), Please…
Egeon
  • 11
  • 2