Skip to content

Commit 665fedc

Browse files
sopranopillowsopranopillow
committed
2 parents 588240e + 5420a75 commit 665fedc

275 files changed

Lines changed: 5080 additions & 558 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.github/CODEOWNERS‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,8 @@ apps/public-docsite-v9 @microsoft/cxe-red @microsoft/cxe-coastal @microsoft/flue
116116
apps/theming-designer @microsoft/fluentui-react
117117
apps/ssr-tests-v9 @microsoft/fluentui-react-build
118118
apps/stress-test @microsoft/cxe-red @spmonahan @micahgodbolt
119+
apps/react-18-tests-v8 @microsoft/cxe-red @microsoft/cxe-coastal @micahgodbolt
120+
apps/react-18-tests-v9 @microsoft/cxe-red @microsoft/cxe-coastal @micahgodbolt
119121
apps/recipes-react-components @microsoft/cxe-red @microsoft/cxe-coastal @microsoft/fluentui-react @sopranopillow
120122

121123
#### Packages
@@ -138,7 +140,7 @@ packages/react-components/react-conformance-griffel @microsoft/teams-prg
138140
packages/react-components/react-context-selector @microsoft/teams-prg
139141
packages/react-date-time @microsoft/cxe-red
140142
packages/react-docsite-components @microsoft/fluentui-v8-website
141-
packages/react-file-type-icons @jahnp @bigbadcapers
143+
packages/react-file-type-icons @microsoft/cxe-red @jahnp @bigbadcapers
142144
packages/react-hooks @microsoft/cxe-red
143145
packages/react-icons-mdl2 @microsoft/cxe-red @microsoft/cxe-coastal
144146
packages/react-monaco-editor @microsoft/fluentui-v8-website

‎apps/perf-test-react-components/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@
1818
},
1919
"dependencies": {
2020
"@griffel/core": "^1.9.0",
21-
"@fluentui/react-avatar": "^9.4.1",
22-
"@fluentui/react-button": "^9.3.1",
23-
"@fluentui/react-field": "9.0.0-alpha.23",
24-
"@fluentui/react-infobutton": "9.0.0-beta.19",
25-
"@fluentui/react-persona": "^9.2.1",
26-
"@fluentui/react-provider": "^9.4.1",
27-
"@fluentui/react-spinbutton": "^9.2.1",
21+
"@fluentui/react-avatar": "^9.4.2",
22+
"@fluentui/react-button": "^9.3.2",
23+
"@fluentui/react-field": "9.0.0-alpha.24",
24+
"@fluentui/react-infobutton": "9.0.0-beta.20",
25+
"@fluentui/react-persona": "^9.2.2",
26+
"@fluentui/react-provider": "^9.4.2",
27+
"@fluentui/react-spinbutton": "^9.2.2",
2828
"@fluentui/react-theme": "^9.1.5",
2929
"@microsoft/load-themed-styles": "^1.10.26",
3030
"flamegrill": "0.2.0",

‎apps/perf-test/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
},
1919
"dependencies": {
2020
"@fluentui/example-data": "^8.4.6",
21-
"@fluentui/react": "^8.106.5",
21+
"@fluentui/react": "^8.106.6",
2222
"@microsoft/load-themed-styles": "^1.10.26",
2323
"flamegrill": "0.2.0",
2424
"lodash": "^4.17.15",

‎apps/public-docsite-resources/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@
3434
"@fluentui/scripts-webpack": "*"
3535
},
3636
"dependencies": {
37-
"@fluentui/react": "^8.106.5",
37+
"@fluentui/react": "^8.106.6",
3838
"@fluentui/react-examples": "^8.34.4",
3939
"@microsoft/load-themed-styles": "^1.10.26",
40-
"@fluentui/azure-themes": "^8.5.68",
41-
"@fluentui/react-docsite-components": "^8.11.29",
40+
"@fluentui/azure-themes": "^8.5.69",
41+
"@fluentui/react-docsite-components": "^8.11.30",
4242
"@fluentui/font-icons-mdl2": "^8.5.12",
4343
"@fluentui/set-version": "^8.2.5",
44-
"@fluentui/theme-samples": "^8.7.64",
45-
"@fluentui/react-monaco-editor": "^1.7.64",
44+
"@fluentui/theme-samples": "^8.7.65",
45+
"@fluentui/react-monaco-editor": "^1.7.65",
4646
"office-ui-fabric-core": "^11.0.0",
4747
"react": "17.0.2",
4848
"react-dom": "17.0.2",

‎apps/public-docsite-v9/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@
2222
"@fluentui/scripts-tasks": "*"
2323
},
2424
"dependencies": {
25-
"@fluentui/react-migration-v8-v9": "^9.1.12",
25+
"@fluentui/react-migration-v8-v9": "^9.1.13",
2626
"@fluentui/react-migration-v0-v9": "9.0.0-alpha.0",
27-
"@fluentui/react": "^8.106.5",
27+
"@fluentui/react": "^8.106.6",
2828
"@fluentui/react-northstar": "^0.66.3",
2929
"@fluentui/react-icons-northstar": "^0.66.3",
30-
"@fluentui/react-components": "^9.17.1",
30+
"@fluentui/react-components": "^9.18.0",
3131
"@fluentui/react-storybook-addon": "9.0.0-rc.1",
3232
"@fluentui/react-storybook-addon-codesandbox": "9.0.0-alpha.0",
3333
"@griffel/react": "^1.5.2",

‎apps/public-docsite-v9/src/Concepts/Migration/KeepingDesignConsistent.stories.mdx‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ As detailed in the _/Concepts/Developer/Styling Components_ topic, you can creat
102102
If you do create custom styles, we strongly recommend using design tokens.
103103
This ensures styles update with theme changes.
104104

105-
## You can recompose components with custom styles
105+
## You can recompose components with different styles
106106

107107
Fluent v9 has a powerful composition model using React hooks.
108108
Each component is separated into a hook that maps props to state, a hook that uses state to set className styles on each slot, and a render function that outputs each slot with applied props.
@@ -145,3 +145,43 @@ export const MyButton: ForwardRefComponent<ButtonProps> = React.forwardRef((prop
145145
```
146146

147147
This is the most advanced form of customization in Fluent UI React v9, but provides you complete control over components.
148+
149+
## You can set custom style hooks per component type
150+
151+
**⚠ Avoid custom style hooks**
152+
153+
Prefer creating custom themes, setting className, replacing slots, extending theme tokens, and component recomposition.
154+
This approach is meant as an escape-hatch when all other customizations are not enough for your use case.
155+
156+
**⚠ Be careful **
157+
158+
- Never change any state properties other than `className`.
159+
- Never dynamically change hooks at runtime. This will lead to unstable hook calls.
160+
- Custom style hooks are called from within the component and receive the component state.
161+
- Be judicious with creating styles and making `mergeClasses` call as you may affect the performance.
162+
163+
You can pass `FluentProvider.customStyleHooks_unstable` a set of custom style hooks. The custom style hooks are considered unstable and the API may change at any time.
164+
Each custom style hook can update root or slot class names.
165+
166+
```tsx
167+
const myButtonStyles = makeStyles({
168+
root: {
169+
//...
170+
},
171+
});
172+
173+
const myCustomStyles: FluentProviderCustomStyleHooks = {
174+
useButtonStyles_unstable: state => {
175+
const myButtonStyles = useMyButtonStyles();
176+
const buttonState = state as ButtonState;
177+
buttonState.root.className = mergeClasses(buttonState.root.className, myButtonStyles.root);
178+
},
179+
};
180+
181+
<FluentProvider customStyleHooks_unstable={myCustomStyles}></FluentProvider>;
182+
```
183+
184+
To override existing styles, use `makeStyles` to create your custom styles and then call `mergeClasses` with state `className` and the your new styles.
185+
To completely replace existing styles, overwrite the state `className`.
186+
187+
When `FluentProvider` are nested, custom style hooks will be shallow merged.

‎apps/public-docsite/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"devDependencies": {
2626
"@fluentui/common-styles": "^1.2.21",
2727
"@fluentui/eslint-plugin": "*",
28-
"@fluentui/react-monaco-editor": "^1.7.64",
28+
"@fluentui/react-monaco-editor": "^1.7.65",
2929
"write-file-webpack-plugin": "^4.1.0",
3030
"@fluentui/scripts-tasks": "*",
3131
"@fluentui/scripts-webpack": "*"
@@ -34,17 +34,17 @@
3434
"@fluentui/font-icons-mdl2": "^8.5.12",
3535
"@fluentui/public-docsite-resources": "^8.1.41",
3636
"@fluentui/public-docsite-setup": "^0.3.17",
37-
"@fluentui/react": "^8.106.5",
38-
"@fluentui/react-docsite-components": "^8.11.29",
37+
"@fluentui/react": "^8.106.6",
38+
"@fluentui/react-docsite-components": "^8.11.30",
3939
"@fluentui/react-examples": "^8.34.4",
40-
"@fluentui/react-experiments": "^8.14.59",
41-
"@fluentui/fluent2-theme": "^8.106.0",
40+
"@fluentui/react-experiments": "^8.14.60",
41+
"@fluentui/fluent2-theme": "^8.106.1",
4242
"@fluentui/react-file-type-icons": "^8.8.12",
4343
"@fluentui/react-icons-mdl2": "^1.3.36",
4444
"@fluentui/react-icons-mdl2-branded": "^1.2.37",
4545
"@fluentui/set-version": "^8.2.5",
4646
"@fluentui/theme": "^2.6.24",
47-
"@fluentui/theme-samples": "^8.7.64",
47+
"@fluentui/theme-samples": "^8.7.65",
4848
"@fluentui/utilities": "^8.13.8",
4949
"@microsoft/load-themed-styles": "^1.10.26",
5050
"office-ui-fabric-core": "^11.0.0",

‎apps/react-18-tests-v8/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
"@fluentui/scripts-webpack": "*"
2222
},
2323
"dependencies": {
24-
"@fluentui/react": "^8.106.5",
24+
"@fluentui/react": "^8.106.6",
2525
"@fluentui/react-hooks": "^8.6.19",
2626
"@types/react": "18.0.14",
2727
"@types/react-dom": "18.0.6",

‎apps/react-18-tests-v8/src/components/Panel.Basic.Example.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import * as React from 'react';
2+
import { Panel } from '@fluentui/react/lib/Panel';
3+
import { useBoolean } from '@fluentui/react-hooks';
4+
5+
const handleOpen = () => console.log('onOpen');
6+
const handleOpened = () => console.log('onOpened');
7+
8+
export const PanelBasicExample: React.FunctionComponent = () => {
9+
const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
10+
11+
return (
12+
<div>
13+
<button onClick={openPanel}> Open panel </button>
14+
<Panel
15+
onOpen={handleOpen}
16+
onOpened={handleOpened}
17+
headerText="Sample panel"
18+
isOpen={isOpen}
19+
onDismiss={dismissPanel}
20+
// You MUST provide this prop! Otherwise screen readers will just say "button" with no label.
21+
closeButtonAriaLabel="Close"
22+
>
23+
<p>Content goes here.</p>
24+
</Panel>
25+
</div>
26+
);
27+
};

‎apps/react-18-tests-v9/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"@fluentui/scripts-tasks": "*"
2020
},
2121
"dependencies": {
22-
"@fluentui/react-components": "^9.17.1",
22+
"@fluentui/react-components": "^9.18.0",
2323
"@types/react": "18.0.14",
2424
"@types/react-dom": "18.0.6",
2525
"react": "18.2.0",

0 commit comments

Comments
 (0)