Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ The following table will help you navigate the 3 projects and understand their d

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png 413 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 404 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 619 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 757 Changed
vr-tests-react-components/ProgressBar converged 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 25 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 81 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 33 Changed
vr-tests-react-components/TagPicker 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png 658 Changed
vr-tests-react-components/TagPicker.disabled - High Contrast.chromium.png 1319 Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png 677 Changed
vr-tests-web-components/Accordion 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Accordion. - Dark Mode.normal.chromium_1.png 3398 Changed
vr-tests-web-components/Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Avatar. - Dark Mode.normal.chromium_1.png 298 Changed
vr-tests-web-components/Badge 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Badge. - Dark Mode.normal.chromium.png 443 Changed
vr-tests-web-components/MenuList 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - Dark Mode.normal.chromium.png 498 Changed
vr-tests/Callout 9 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Callout.Beak 25.default.chromium.png 2198 Changed
vr-tests/Callout.Bottom center.default.chromium.png 2128 Changed
vr-tests/Callout.Bottom right edge - RTL.default.chromium.png 1124 Changed
vr-tests/Callout.Bottom auto edge.default.chromium.png 2195 Changed
vr-tests/Callout.Right bottom edge.default.chromium.png 3095 Changed
vr-tests/Callout.Left center.default.chromium.png 2584 Changed
vr-tests/Callout.Bottom right edge.default.chromium.png 1130 Changed
vr-tests/Callout.Top right edge.default.chromium.png 1146 Changed
vr-tests/Callout.Right top edge.default.chromium.png 1126 Changed
vr-tests/Keytip 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/Keytip.Offset.default.chromium.png 86 Changed
vr-tests/react-charting-AreaChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-AreaChart.Custom Accessibility.default.chromium.png 11 Changed
vr-tests/react-charting-LineChart 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests/react-charting-LineChart.Events.default.chromium.png 17 Changed
vr-tests/react-charting-LineChart.Events - Dark Mode.default.chromium.png 16 Changed
vr-tests/react-charting-LineChart.Events - RTL.default.chromium.png 15 Changed

There were 4 duplicate changes discarded. Check the build logs for more information.

> Why are there two React versions? Fluent UI v8 is still widely used. We encourage you to migrate to Fluent UI v9. See the [Migration overview](https://react.fluentui.dev/?path=/docs/concepts-migration-from-v8-component-mapping--docs).

## Multi-framework design system

Fluent UI keeps shared tokens, guidance, and framework integrations in one
repository. React components live under `packages/react-components/`; the
Flask/Jinja integration scaffold lives under `packages/flask-ui/`. See the
[design system repository structure](docs/design-system-repository.md) for
branching and ownership guidance.

## FluentUI Insights

[Fluent UI Insights](https://docs.microsoft.com/en-us/shows/fluent-ui-insights?utm_source=github) is a series that describes the design and decisions behind the Fluent UI design system.
Expand Down
29 changes: 29 additions & 0 deletions docs/design-system-repository.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# Design system repository structure

Fluent UI supports multiple delivery models in one repository. The repository
is the source of truth for shared design tokens, accessibility requirements,
component behavior, and documentation. Each framework integration owns its
runtime and packaging details.

## Integration boundaries

| Integration | Location | Consumer |
| --- | --- | --- |
| Shared tokens | `packages/tokens/` | All integrations |
| React components | `packages/react-components/` | React applications |
| Flask/Jinja integration | `packages/flask-ui/` | Flask applications |

The existing React packages remain unchanged. The Flask package is currently a
private scaffold so its API can be designed without prematurely publishing an
incomplete package.

## Branch and repository policy

Use one repository and short-lived feature branches. Do not maintain permanent
framework branches: they drift, make shared token changes harder to review, and
prevent one pull request from showing the complete cross-framework impact.

Use a separate repository only if an integration requires different access
controls, release ownership, or a substantially different contribution
workflow. A separate repository should still consume the shared token contract
and publish compatibility documentation.
27 changes: 27 additions & 0 deletions packages/flask-ui/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Fluent UI Flask integration

This package is the Flask/Jinja integration surface for the Fluent UI design
system. It is intentionally private while the integration contract is being
defined.

## Scope

- Jinja macros and templates for server-rendered applications
- CSS custom properties generated from the shared Fluent token source
- Accessibility and interaction guidance shared with the React implementation

The package must not duplicate design tokens. Token names and values are owned
by `@fluentui/tokens`; Flask assets should consume the generated token output.

## Planned layout

```text
packages/flask-ui/
├── templates/ # Jinja macros and base templates
├── static/ # Generated CSS and other browser assets
└── README.md
```

React consumers continue to use the existing `@fluentui/react-components`
package. Both integrations share the token source and design documentation,
but they can evolve and release independently.
11 changes: 11 additions & 0 deletions packages/flask-ui/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"name": "@fluentui/flask-ui",
"version": "0.0.0",
"description": "Fluent UI integration points for Flask and Jinja applications",
"private": true,
"license": "MIT",
"files": [
"templates",
"README.md"
]
}
5 changes: 5 additions & 0 deletions packages/flask-ui/templates/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Flask templates

Jinja templates and macros will be added here once the server-rendered
component contract is approved. Keep templates framework-specific and consume
generated Fluent design tokens rather than defining a second token system.
6 changes: 6 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2767,6 +2767,12 @@ __metadata:
languageName: unknown
linkType: soft

"@fluentui/flask-ui@workspace:packages/flask-ui":
version: 0.0.0-use.local
resolution: "@fluentui/flask-ui@workspace:packages/flask-ui"
languageName: unknown
linkType: soft

"@fluentui/fluent2-theme@npm:*, @fluentui/fluent2-theme@npm:^8.107.154, @fluentui/fluent2-theme@workspace:packages/fluent2-theme":
version: 0.0.0-use.local
resolution: "@fluentui/fluent2-theme@workspace:packages/fluent2-theme"
Expand Down
Loading