Skip to content

Commit f901685

Browse files
marcosmouramarcosmoura
committed
Merge branch 'master' into marcosmoura/feat/expose-tokens-as-text-wrappers
* master: feat: provide `launch` and `startServer` functions as single source of truth for creating new browser/server instance within monorepo (microsoft#26375) New min/max example (microsoft#26418) docs: add migration guide for cards from v8 to v9 (microsoft#26347) fix(vr-tests v8): fix flaky VR tests (microsoft#26348) chore: update browser list db (microsoft#26407) fix(scripts-tasks): unify api-extractor runs on any CI (microsoft#26411) chore: fix Panel Confirm Dismiss example to properly restore focus after panel closes (microsoft#26301) update codeowners (microsoft#26307) fix: react components version (microsoft#26406) chore: Simplify layout for Field (microsoft#26352) Update hex color codes for MS Excel product (microsoft#26339) feat: create migration shim packages for V0 (microsoft#26142) Generic Virtualizer (microsoft#25451)
2 parents 35fd28f + c12b5f9 commit f901685

File tree

111 files changed

+3157
-344
lines changed

Some content is hidden

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

111 files changed

+3157
-344
lines changed

‎.github/CODEOWNERS

+8-6
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ apps/stress-test @microsoft/cxe-red @spmonahan @micahgodbolt
113113
#### Packages
114114
packages/azure-themes @robtaft-ms @Jacqueline-ms
115115
packages/bundle-size @microsoft/teams-prg
116-
packages/date-time-utilities @microsoft/fluent-date-time
116+
packages/date-time-utilities @microsoft/cxe-red
117117
packages/eslint-plugin @microsoft/fluentui-react-build
118118
packages/foundation-legacy @microsoft/cxe-red @khmakoto
119119
# packages/font-icons-mdl2
@@ -128,7 +128,7 @@ packages/react-cards @microsoft/cxe-red @khmakoto
128128
packages/react-charting @microsoft/charting-team
129129
packages/react-components/react-conformance-griffel @microsoft/teams-prg
130130
packages/react-components/react-context-selector @microsoft/teams-prg
131-
packages/react-date-time @microsoft/fluent-date-time
131+
packages/react-date-time @microsoft/cxe-red
132132
packages/react-docsite-components @microsoft/fluentui-v8-website
133133
packages/react-file-type-icons @jahnp @bigbadcapers
134134
packages/react-hooks @microsoft/cxe-red
@@ -201,10 +201,12 @@ packages/react-components/react-avatar-context @microsoft/teams-prg
201201
packages/react-components/react-infobutton @microsoft/cxe-red @sopranopillow
202202
packages/react-migration-v8-v9 @microsoft/cxe-coastal @geoffcoxmsft
203203
packages/react-components/react-tree @microsoft/teams-prg
204+
packages/react-components/react-virtualizer @microsoft/xc-uxe @Mitch-At-Work
204205
packages/react-components/react-skeleton @microsoft/cxe-red
205206
packages/tokens @microsoft/teams-prg
206207
packages/react-components/react-tags @microsoft/cxe-coastal @TristanWatanabe
207208
packages/react-components/react-data-grid-react-window @microsoft/teams-prg
209+
packages/react-components/react-migration-v0-v9 @microsoft/teams-prg
208210
packages/react-components/react-datepicker @microsoft/cxe-red @sopranopillow @khmakoto
209211
# <%= NX-CODEOWNER-PLACEHOLDER %>
210212

@@ -214,14 +216,14 @@ packages/react/src/components/ActivityItem @microsoft/cxe-red @microsoft/cxe-coa
214216
packages/react/src/components/Announced @microsoft/cxe-red @microsoft/cxe-coastal @khmakoto
215217
packages/react/src/components/Breadcrumb @microsoft/cxe-red @microsoft/cxe-coastal @khmakoto
216218
packages/react/src/components/Button @microsoft/cxe-red @microsoft/cxe-coastal @khmakoto
217-
packages/react/src/components/Calendar @microsoft/fluent-date-time
218-
packages/react/src/components/CalendarDayGrid @microsoft/fluent-date-time
219+
packages/react/src/components/Calendar @microsoft/cxe-red
220+
packages/react/src/components/CalendarDayGrid @microsoft/cxe-red
219221
packages/react/src/components/Check @microsoft/cxe-red @microsoft/cxe-coastal @ThomasMichon @khmakoto
220222
packages/react/src/components/Checkbox @microsoft/cxe-red @microsoft/cxe-coastal @khmakoto
221223
packages/react/src/components/ChoiceGroup @microsoft/cxe-red @microsoft/cxe-coastal
222224
packages/react/src/components/Coachmark @microsoft/cxe-red @microsoft/cxe-coastal @leddie24
223225
packages/react/src/components/ColorPicker @microsoft/cxe-red @microsoft/cxe-coastal
224-
packages/react/src/components/DatePicker @microsoft/fluent-date-time
226+
packages/react/src/components/DatePicker @microsoft/cxe-red
225227
packages/react/src/components/DetailsList @microsoft/cxe-red @microsoft/cxe-coastal @ThomasMichon
226228
packages/react/src/components/DocumentCard @microsoft/cxe-red @microsoft/cxe-coastal @yiminwu
227229
packages/react/src/components/Fabric @microsoft/cxe-red @microsoft/cxe-coastal @dzearing
@@ -253,7 +255,7 @@ packages/react/src/components/Text @microsoft/cxe-red @microsoft/cxe-coastal @kh
253255
packages/react/src/components/TextField @microsoft/cxe-red @microsoft/cxe-coastal
254256
packages/react/src/components/Toggle @microsoft/cxe-red @microsoft/cxe-coastal @khmakoto
255257
packages/react/src/components/Tooltip @microsoft/cxe-red @microsoft/cxe-coastal @behowell
256-
packages/react/src/components/WeeklyDayPicker @microsoft/fluent-date-time
258+
packages/react/src/components/WeeklyDayPicker @microsoft/cxe-red
257259

258260
## Theming and styling
259261
packages/react/src/utilities/ThemeProvider @microsoft/cxe-red @microsoft/cxe-coastal @dzearing

‎apps/public-docsite-v9/.storybook/main.js

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript
99
'../src/**/*.stories.@(ts|tsx)',
1010
...getPackageStoriesGlob({ packageName: '@fluentui/react-components', callerPath: __dirname }),
1111
'../../../packages/react-migration-v8-v9/src/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
12+
'../../../packages/react-components/react-migration-v0-v9/src/**/@(index.stories.@(ts|tsx)|*.stories.mdx)',
1213
],
1314
staticDirs: ['../public'],
1415
addons: [...rootMain.addons],

‎apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.Card.stories.mdx ‎apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/Card.stories.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,14 @@ const Component = () => <Card>Lorem ipsum, dolor sit amet consectetur adipisicin
2525
| Card props | migration guide |
2626
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
2727
| as, className | keep it as is |
28-
| variables, styles | see Migrate style overrides in this document |
28+
| variables, styles | see Migrate `style` overrides in this document |
2929
| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page). Also check the focusMode new prop |
30-
| centered | REMOVED: see Migrate centered prop in this document |
30+
| centered | REMOVED: see Migrate `centered` prop in this document |
3131
| compact | use `size="small"` |
3232
| disabled | REMOVED: No equivalent functionality. Can be created by overriding the styles. |
3333
| elevated | REMOVED: All cards are now elevated by default. To change that, use the `appearance` property. |
3434
| expandable | REMOVED: No equivalent functionality. |
35-
| fluid | REMOVED: see Migrate fluid prop in this document |
35+
| fluid | REMOVED: see Migrate `fluid` prop in this document |
3636
| ghost | use `appearance="subtle"` |
3737
| inverted | use `appearance="filled-alternative"` |
3838
| size | keep it as is. Values: `small`, `medium`(default) and `large` |

‎apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardBody.stories.mdx ‎apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardBody.stories.mdx

File renamed without changes.

‎apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardFooter.stories.mdx ‎apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardFooter.stories.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Component = () => <CardFooter Footer="Lorem ipsum" />;
2727
| CardFooter props | migration guide |
2828
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
2929
| as, className | keep it as is |
30-
| variables, styles | see Migrate style overrides in this document |
30+
| variables, styles | see Migrate `style` overrides in this document |
3131
| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page). Also check the focusMode new prop |
3232
| fitted | REMOVED: By default, all Footers are fitted |
3333

‎apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardHeader.stories.mdx ‎apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardHeader.stories.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Component = () => <CardHeader header="Lorem ipsum" />;
2727
| CardHeader props | migration guide |
2828
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
2929
| as, className | keep it as is |
30-
| variables, styles | see Migrate style overrides in this document |
30+
| variables, styles | see Migrate `style` overrides in this document |
3131
| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page). Also check the focusMode new prop |
3232
| fitted | REMOVED: by default, all headers are fitted |
3333

‎apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card.CardPreview.stories.mdx ‎apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Card/CardPreview.stories.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const Component = () => (
3535
| CardPreview props | migration guide |
3636
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
3737
| as, className | keep it as is |
38-
| variables, styles | see Migrate style overrides in this document |
38+
| variables, styles | see Migrate `style` overrides in this document |
3939
| accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migrating-from-v0-custom-accessibility--page). Also check the focusMode new prop |
4040
| fitted | REMOVED: by default, all Previews are fitted |
4141
| horizontal | REMOVED: no longer supported |

‎apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/Card.stories.mdx

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import { Meta } from '@storybook/addon-docs';
2+
3+
<Meta title="Concepts/Migration/from v8/Components/Card Migration/Card" />
4+
5+
# Card Migration
6+
7+
Fluent UI v8 provides the `DocumentCard` component and it's variants. Fluent UI v9 provides a `Card` control, but has a different API. `Card` is more generic is less opinionated about its content.
8+
9+
This table maps `DocumentCard` v8 props to the `Card` v9 equivalent.
10+
11+
| v8 | v9 | Notes |
12+
| ------------- | --------- | ---------------------------------------- |
13+
| className | className | |
14+
| componentRef | ref | |
15+
| onClick | onClick | |
16+
| onClickHref | n/a | Can be implemented using `onClick` |
17+
| onClickTarget | n/a | Can be implemented using `onClick` |
18+
| role | role | |
19+
| styles | className | |
20+
| theme | n/a | Use `FluentProvider` to customize themes |
21+
| type | n/a | see Migrate `type` prop in this document |
22+
23+
## Migrate `type` prop
24+
25+
The `type` prop is no longer supported. To migrate, the property `orientation="horizontal"` can be used to achieve the same effect.
26+
27+
Before:
28+
29+
```tsx
30+
import {
31+
DocumentCard,
32+
DocumentCardActivity,
33+
DocumentCardDetails,
34+
DocumentCardPreview,
35+
DocumentCardTitle,
36+
DocumentCardType,
37+
} from '@fluentui/react/lib/DocumentCard';
38+
import { TestImages } from '@fluentui/example-data';
39+
40+
const previewImage = {
41+
name: 'Revenue stream proposal fiscal year 2016 version02.pptx',
42+
linkProps: {
43+
href: 'http://bing.com',
44+
target: '_blank',
45+
},
46+
previewImageSrc: TestImages.documentPreview,
47+
iconSrc: TestImages.iconPpt,
48+
width: 144,
49+
};
50+
51+
const Component = () => (
52+
<DocumentCard type={DocumentCardType.compact}>
53+
<DocumentCardPreview previewImages={[previewImage]} />
54+
<DocumentCardDetails>
55+
<DocumentCardTitle title="Revenue stream proposal fiscal year 2016 version02.pptx" />
56+
<DocumentCardActivity activity="Created a few minutes ago" />
57+
</DocumentCardDetails>
58+
</DocumentCard>
59+
);
60+
```
61+
62+
After:
63+
64+
```tsx
65+
import * as React from 'react';
66+
import { Text, Avatar, Caption1 } from '@fluentui/react-components';
67+
import { Card, CardHeader, CardPreview } from '@fluentui/react-card/unstable';
68+
69+
export const SizedCard = () => {
70+
const styles = useStyles();
71+
72+
return (
73+
<Card size="small" orientation="horizontal">
74+
<CardPreview>
75+
<img src="logo.svg" alt="Company Logo" />
76+
</CardPreview>
77+
78+
<CardHeader
79+
image={<Avatar badge={{ status: 'available' }} image={{ src: 'avatar.svg' }} />}
80+
header={<Text weight="semibold">Strategy 2021</Text>}
81+
description={<Caption1>https://aka.ms/fluentui</Caption1>}
82+
/>
83+
</Card>
84+
);
85+
};
86+
```

‎apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardFooter.stories.mdx

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { Meta } from '@storybook/addon-docs';
2+
3+
<Meta title="Concepts/Migration/from v8/Components/Card Migration/CardFooter" />
4+
5+
# CardFooter Migration
6+
7+
Fluent UI v8 provides the `DocumentCardActions` component. Fluent UI v9 provides a more consistent and opinionated `CardFooter` instead.
8+
9+
This table maps `DocumentCard` v8 props to the `Card` v9 equivalent.
10+
11+
| v8 | v9 | Notes |
12+
| ------------ | --------- | ----------------------------------------- |
13+
| className | className | |
14+
| componentRef | ref | |
15+
| views | n/a | see Migrate `views` prop in this document |
16+
| role | role | |
17+
| styles | className | |
18+
| theme | n/a | Use `FluentProvider` to customize themes |
19+
20+
## Migrate `views` prop
21+
22+
The `views` prop is no longer supported. To migrate, create an element that displays the number of views and pass it to the `CardFooter` `action` prop.
23+
24+
Before:
25+
26+
```tsx
27+
import { DocumentCard, DocumentCardActions } from '@fluentui/react/lib/DocumentCard';
28+
29+
const documentCardActions = [
30+
{
31+
iconProps: { iconName: 'Share' },
32+
ariaLabel: 'share action',
33+
},
34+
{
35+
iconProps: { iconName: 'Pin' },
36+
ariaLabel: 'pin action',
37+
},
38+
{
39+
iconProps: { iconName: 'Ringer' },
40+
ariaLabel: 'notifications action',
41+
},
42+
];
43+
44+
export const DocumentCardCompleteExample: React.FunctionComponent = () => (
45+
<DocumentCard>
46+
<DocumentCardActions actions={documentCardActions} views={432} />
47+
</DocumentCard>
48+
);
49+
```
50+
51+
After:
52+
53+
```jsx
54+
import * as React from 'react';
55+
import { Button, shorthands, makeStyles } from '@fluentui/react-components';
56+
import { Pin20Regular, Share20Regular, ServiceBell20Regular, Eye20Regular } from '@fluentui/react-icons';
57+
import { Card, CardFooter } from '@fluentui/react-card/unstable';
58+
59+
const useStyles = makeStyles({
60+
card: {
61+
width: '300px',
62+
},
63+
64+
actions: {
65+
...shorthands.gap('4px'),
66+
...shorthands.padding('4px'),
67+
display: 'flex',
68+
alignItems: 'center',
69+
},
70+
});
71+
72+
export const Default = () => {
73+
const styles = useStyles();
74+
75+
return (
76+
<Card size="small" className={styles.card}>
77+
<CardFooter
78+
action={
79+
<div className={styles.actions}>
80+
<Eye20Regular /> 432
81+
</div>
82+
}
83+
>
84+
<Button appearance="transparent" icon={<Share20Regular />} aria-label="Share" />
85+
<Button appearance="transparent" icon={<Pin20Regular />} aria-label="Pin" />
86+
<Button appearance="transparent" icon={<ServiceBell20Regular />} aria-label="Notifications" />
87+
</CardFooter>
88+
</Card>
89+
);
90+
};
91+
```

‎apps/public-docsite-v9/src/Concepts/Migration/FromV8/Components/Card/CardHeader.stories.mdx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Meta } from '@storybook/addon-docs';
2+
3+
<Meta title="Concepts/Migration/from v8/Components/Card Migration/CardHeader" />
4+
5+
# CardHeader Migration
6+
7+
Fluent UI v8 provides the `DocumentCardDetails`, `DocumentCardTitle`, and `DocumentCardActivity` components that can be used anywhere inside the `DocumentCard`. Fluent UI v9 provides a more consistent and opinionated `CardHeader` component that can be used to group information.
8+
9+
## How to migrate
10+
11+
`DocumentCardDetails` => `CardHeader` <br />
12+
`DocumentCardTitle` => No equivalent, but can be achieved with a `Text` component <br />
13+
`DocumentCardActivity` with `activity` prop => `CardHeader` with `description` prop <br />
14+
`DocumentCardActivity` with `people` prop => `CardHeader` with `image` and `header` props <br />
15+
16+
Before:
17+
18+
```tsx
19+
import {
20+
DocumentCard,
21+
DocumentCardDetails,
22+
DocumentCardTitle,
23+
DocumentCardActivity,
24+
} from '@fluentui/react/lib/DocumentCard';
25+
import { TestImages } from '@fluentui/example-data';
26+
27+
const Component = () => (
28+
<DocumentCard>
29+
<DocumentCardDetails>
30+
<DocumentCardTitle title="Revenue stream proposal fiscal year 2016 version02.pptx" shouldTruncate />
31+
<DocumentCardActivity
32+
activity="Created a few minutes ago"
33+
people={{ name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale }}
34+
/>
35+
</DocumentCardDetails>
36+
</DocumentCard>
37+
);
38+
```
39+
40+
After:
41+
42+
```jsx
43+
import * as React from 'react';
44+
import { Text, Caption1 } from '@fluentui/react-components';
45+
import { Card, CardHeader } from '@fluentui/react-card/unstable';
46+
47+
export const Component = () => {
48+
return (
49+
<Card>
50+
<Text size={400}>Revenue stream proposal fiscal year 2016 version02.pptx</Text>
51+
<CardHeader
52+
image={<img src="powerpoint_logo.svg" />}
53+
header={<Text weight="bold">Annie Lindqvist</Text>}
54+
description={<Caption1>Created a few minutes ago</Caption1>}
55+
/>
56+
</Card>
57+
);
58+
};
59+
```

0 commit comments

Comments
 (0)