forked from microsoft/fluentui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into marcosmoura/feat/drawer-component
* master: (141 commits) chore: prerequisite changes before migrating v9 packages to SWC based transpilation (microsoft#26965) feat: Add InfoLabel component (microsoft#27118) fix(tools): update migrate-converged generator to add node field to package.json exports map (microsoft#27152) applying package updates fix: Embed play/pause indicator should render correctly in high contrast mode (microsoft#27213) feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens (microsoft#27034) chore: Prepare release 0.66.4 (microsoft#27163) fix(react-datepicker-compat): Fix text entry issues with input (microsoft#27204) fix: Smooth out animation of indeterminate progress bar (microsoft#27201) Add cxe-red as a codeowner of react-file-type-icons (microsoft#27147) Added documentation about custom style hooks (microsoft#27087) Custom style react-text (microsoft#27078) Custom style react-image (microsoft#27066) Add JSDoc for tabster focus indicator selector (microsoft#27041) Theme designer: Move colors to local files (microsoft#27191) docs(react-card): move card out of preview (microsoft#27185) Include values in typography table (microsoft#27189) feat: accept a className in `mountNode` in `Portal` (microsoft#27008) RFC: Extend `mountNode` prop in `Portal` (microsoft#27009) applying package updates ...
- Loading branch information
Showing
1,651 changed files
with
35,084 additions
and
10,927 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
98 changes: 98 additions & 0 deletions
98
apps/public-docsite-v9/src/Concepts/Migration/FromV0/Components/Box.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import { Meta } from '@storybook/addon-docs'; | ||
|
|
||
| <Meta title="Concepts/Migration/from v0/Components/Box Migration" /> | ||
|
|
||
| # Box component Migration guide | ||
|
|
||
| ## Overview: | ||
|
|
||
| `Box` component is replaced by `Primitive`. | ||
|
|
||
| Before: | ||
|
|
||
| ```tsx | ||
| import { Box } from '@fluentui/react-northstar'; | ||
| const Component = () => <Box />; | ||
| ``` | ||
|
|
||
| After: | ||
|
|
||
| ```tsx | ||
| import { Primitive } from '@fluentui/react-migration-v0-v9'; | ||
| const Component = () => <Primitive />; | ||
| ``` | ||
|
|
||
| ## How to migrate props: | ||
|
|
||
| | Box props | migrate guide | | ||
| | ------------------------- | -------------------------------------------------------------------------------------------------------- | | ||
| | as, className | keep it as is | | ||
| | content | see [Migrate content prop](#./Migrate-`content`-prop) in this document | | ||
| | variables, design, styles | see [Migrate style overrides](#./Migrate-style-overrides) in this document | | ||
| | accessibility | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page) | | ||
|
|
||
| --- | ||
|
|
||
| ## Migrate `content` prop | ||
|
|
||
| Move `content` to JSX children. | ||
|
|
||
| Before: | ||
|
|
||
| ```tsx | ||
| import { Box } from '@fluentui/react-northstar'; | ||
| const Component = () => <Box content="hi" />; | ||
| ``` | ||
|
|
||
| After: | ||
|
|
||
| ```tsx | ||
| import { Primitive } from '@fluentui/react-migration-v0-v9'; | ||
| const Component = () => <Primitive>hi</Primitive>; | ||
| ``` | ||
|
|
||
| ## Migrate style overrides | ||
|
|
||
| ⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page). | ||
|
|
||
| ### Example for migrate boolean `variables`: | ||
|
|
||
| Before: | ||
|
|
||
| ```tsx | ||
| // in COMPONENT_NAME.tsx | ||
| import { Box } from '@fluentui/react-northstar'; | ||
|
|
||
| export const Component = () => <Box variables={{ isWideBox: true }} />; | ||
|
|
||
| // in box-styles.ts | ||
| export const boxStyles1 = { | ||
| root: ({ variables: { isWideBox } }) => ({ | ||
| ...(isWideBox && { | ||
| width: '100%', | ||
| }), | ||
| }), | ||
| }; | ||
| ``` | ||
|
|
||
| After: | ||
|
|
||
| ```tsx | ||
| // in COMPONENT_NAME.tsx | ||
| import { Primitive } from '@fluentui/react-migration-v0-v9'; | ||
| import { useStyles } from './COMPONENT_NAME.styles.ts'; | ||
|
|
||
| export const Component = () => { | ||
| const classes = useStyles(); | ||
| return <Primitive className={classes.wideBox} />; | ||
| }; | ||
|
|
||
| // in COMPONENT_NAME.styles.ts | ||
| import { makeStyles } from '@fluentui/react-components'; | ||
|
|
||
| export const useStyles = makeStyles({ | ||
| wideBox: { | ||
| width: '100%', | ||
| }, | ||
| }); | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.