Fluent Design - Web

Implementation of Microsoft's Fluent2 Design System with React + NextJS com TailWind CSS, Radix primitives, Tailwind Variants, and some other components inspired from ShadCN.

🚀 Roadmap

Accordion

An accordion allows users to toggle the display of content by expanding or collapsing sections.

Sample code:

import * as React from "react";
import {
  Accordion,
  AccordionHeader,
  AccordionItem,
  AccordionPanel,
} from "@fluentui/react-components";

export const Default = () => (
  <Accordion>
    <AccordionItem value="1">
      <AccordionHeader>Accordion Header 1</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 1</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="2">
      <AccordionHeader>Accordion Header 2</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 2</div>
      </AccordionPanel>
    </AccordionItem>
    <AccordionItem value="3">
      <AccordionHeader>Accordion Header 3</AccordionHeader>
      <AccordionPanel>
        <div>Accordion Panel 3</div>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>
);

Tasks:

• [ ] AccordionItem
  • [ ] disabled: disables opening/closing of panel. Concluído em dd/mm/aaaa por @brunnogrb.
• [ ] AccordionHeader
  • [ ] button: the component to be used as button in heading.
  • [ ] expandIcon: expand icon slot rendered before (or after) children content in heading.
  • [ ] icon: expand icon slot rendered before (or after) children content in heading.
  • [ ] as: "div" "h1" "h2" "h3" "h4" "h5" "h6".
  • [ ] expandIconPosition: the position of the expand icon slot in heading.
  • [ ] inline: indicates if the AccordionHeader should be rendered inline.
  • [ ] size: size of spacing in the heading. "small" "medium" "large" "extra-large".
• [ ] AccordionPanel
  • [ ] as: "div"

Avatar

An Avatar is a graphical representation of a user, team, or entity.

Avatar can display an image, icon, or initials, and supports various sizes and shapes.

export const Default = (props: Partial<AvatarProps>) => (
  <Avatar aria-label="Guest" {...props} />
);

const argTypes: ArgTypes = {
  initials: {
    control: "text",
    type: "string",
  },
  badge: {
    control: {
      type: "inline-radio",
      options: [{ status: "away" }, { status: "busy" }],
    },
  },
  size: {
    control: {
      type: "select",
      options: [16, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96, 120, 128],
    },
  },
  name: {
    control: {
      control: "text",
      type: "string",
    },
  },
};

AvatarGroup

An AvatarGroup is a graphical representation of multiple people associated with a given entity. AvatarGroup leverages the Avatar component, with each Avatar representing a person and containing their image, initials, or an icon. An AvatarGroup can be represented in a spread, stack, or pie layout.

Badge

A badge is a visual decoration for UI elements. Different badges can display different content.

Badge displays text and/or an icon

CounterBadge displays numerical values

PresenceBadge displays status

Referências:
FluentUI React - Github
implementação oficial para react. renderização lenta, e com grande número de issues abertas.

FluentUI React - Demos
Demo da implementação oficial no storybook. Ajuda a entender alguns comportamentos dos componentes inspirados no design system.

FluentUI Web - Figma
Design no figma.