Stack Overflow
Stack Overflow

Questions tagged [fluent-ui]

Fluent UI is set of cross platform UI libraries from Microsoft. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. Build for one platform or for all. Everything you need is here. Components for React, Web Components (Typescript and Blazor), Windows, iOS, Android, macOS and Cross-platform

Fluent UI is a collection of UX frameworks for creating, cross-platform apps that share code, design, and interaction behavior.

Build for one platform or for all. Everything you need is here.

Components for React, Web Components (Typescript and Blazor), Windows, iOS, Android, macOS and Cross-platform

386 questions
29
votes
7 answers

Microsoft Fluent Design for Web (CSS framework)

As Microsoft recently released a design system called "Fluent Design", is it appropriate to apply it on web design? Most of my searching has been for all Microsoft platforms, C# app, F# etc.. I have never seen anything regarding in web design.
StanLe3
  • 360
  • 1
  • 3
  • 11
13
votes
2 answers

@fluent-ui/react vs @fluent-ui/react-northstar

I'm looking for some guideline what's the difference between @fluent-ui/react and @fluent-ui/react-northstar. This documentation (READMEs) are super imprecise. I'm don't understand which one to use for what. I'm writing that react-component to be…
speedingdeer
  • 1,236
  • 2
  • 16
  • 26
9
votes
1 answer

How to add Pagination in Fluent UI Detaillist using react

I have created the sample by using this link https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist Now I want to add Pagination in the grid. Please let me know the steps.
Pushparaj saimon
  • 93
  • 2
  • 9
8
votes
3 answers

FluentUI DetailsList onColumnClick with React Hooks gives empty Items

I am trying to create a DetailsList with sortable columns (similar as the example in the documentation here: https://uifabric.azurewebsites.net/#/controls/web/detailslist), but instead of a Class component I want to use a functional components and…
Joosttk
  • 91
  • 1
  • 3
7
votes
3 answers

How to get SSR to work with fluentui /Remix run?

How to install fluent UI react with remix run? I believe this is important enough to be addressed here, as it is a stumbling block in the adoption of office-UI-fabric-react in the community.
surendar
  • 87
  • 1
  • 8
6
votes
1 answer

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes' React -typescript Context

I'm currently coding a React -typescript App for practising FluentUI (a.k.a Fabric). Issue appears with my App.tsx component. import React, { useContext, useState } from 'react'; import logo from './logo.svg'; import './App.css'; import Search from…
Agustin Moragues
  • 87
  • 1
  • 1
  • 8
6
votes
0 answers

Using a Toast like UI widget in Fluent UI

I have been using Fluent UI to implement the UI for an Excel add-in that I'm working on. I need a way to display a series of pop up notifications that do not require user input, but just serve to notify the user that something happened. What I want…
koushtavc
  • 71
  • 1
  • 3
6
votes
2 answers

office-ui-fabric / fluent-ui Grouped DetailsList

Today I tried to use the Grouped DetailsList of the fluent-ui. What I expected: I need to declare some groups, let's say red, blue, green and then just add to each item, I want to add to the List, a specific property, that maps the Item to the…
dE_
  • 63
  • 1
  • 4
6
votes
4 answers

Getting selected items in Fluent UI DetailsList

I am using Fluent UI DetailsList. In the example the component is implemented as a class component but I am using a functional component. I am having difficulties in getting the selected items, I assume and think my implementation is incorrect. The…
Gericke
  • 2,109
  • 9
  • 42
  • 71
5
votes
1 answer

How to format "::before" psuedo-class in Microsoft's mergeStyles() utility?

I'm trying to move my SCSS code into React components using microsoft's mergeStyles utility, which is a part of its FluentUI framework. I'm stuck figuring out how to specify "::before" as a selectors property. For some reason, mergeStyles()…
mrjbj
  • 329
  • 1
  • 10
5
votes
3 answers

How to test fluent ui dropdown with react testing library?

I'm new to react testing library so this may be easy, but I currently have a dropdown that I'm importing from fluent UI, and currently getting a "The element does not have a value setter" error when I try to test it using React Testing…
avenmia
  • 2,015
  • 4
  • 25
  • 49
5
votes
1 answer

How can i change the hover style of a PrimaryButton in Fluent UI?

I am currently trying to re-style a Fabric UI Button in React by changing its shape, background color and hovering color. I managed to change the first two, but i'm still having troubles in accessing the hover color, since the selectors property…
Maffe
  • 430
  • 6
  • 14
5
votes
1 answer

How to use react-testing-library to test combobox component?

I'm trying to write more unit tests for my combobox component, but more specifically, I want to simulate keyboard input into the combobox. I've tried using React's testing library's keyboard events (ex: fireEvent.keyDown) but when I debug after…
sarahkang58
  • 51
  • 1
  • 1
  • 3
5
votes
3 answers

How can I use grid layout with Fluent UI React

After I install @fluentui/react, I try to use grid like this doc https://developer.microsoft.com/en-us/fluentui#/styles/web/layout ReactDOM.render(
Persk
  • 639
  • 2
  • 6
  • 15
4
votes
1 answer

Why are Fluent UI react and Fluent UI web components libraries different?

Not sure it's the right question for this forum, but I couldn't find another place for it. Our design team built their design system based on fluent ui libraries as described here. They downloaded the design from here. Unfortunately, our engineering…
Shachar Har-Shuv
  • 666
  • 6
  • 24
1
2 3
…
25 26