diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 5cee003198..1111254447 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -3,6 +3,7 @@ + - [Getting started](#getting-started) - [Useful Commands](#useful-commands) - [Workflow](#workflow) @@ -25,7 +26,7 @@ Make sure you have [Node.js][1] version v8 or later installed. -You can contribute to Stardust by being an official [contributor](setup-local-development.md#contributors) or without permissions, as a [collaborator](setup-local-development.md#collaborators) +You can contribute to Fluent UI by being an official [contributor](setup-local-development.md#contributors) or without permissions, as a [collaborator](setup-local-development.md#collaborators) ### Useful Commands @@ -64,7 +65,7 @@ These guides will walk your through various activities for contributing: ## Accessibility -Stardust implements accessibility using accessibility behaviors. The behaviors add attributes to the DOM elements (mainly role and aria-\* properties) as well as handle keyboard interaction and focus. Every accessible component has a default behavior, which can be overriden using the `accessibility` prop. You can choose a behavior from the ones provided by Stardust or you can implement a new behavior. +Fluent UI implements accessibility using accessibility behaviors. The behaviors add attributes to the DOM elements (mainly role and aria-\* properties) as well as handle keyboard interaction and focus. Every accessible component has a default behavior, which can be overridden using the `accessibility` prop. You can choose a behavior from the ones provided by Fluent UI or you can implement a new behavior. Behaviors apply properties, focus handling and keyboard handlers to the component slots. When developing a component, the properties and keyboard handlers need to be spread to the corresponding slots. @@ -94,9 +95,9 @@ An application should always have an element with [focus][7] when in use. The us - pressing arrow keys to navigate through children (for example menu items in menu) - using the screen reader with or without virtual cursor -Stardust uses Office UI Fabric [FocusZone][8] for basic TAB and arrow key focus handling. To use the focus zone, you can use the `focusZone` configuration in the behavior (for example see [MenuItemBehavior][9]). +Fluent UI uses Office UI Fabric [FocusZone][8] for basic TAB and arrow key focus handling. To use the focus zone, you can use the `focusZone` configuration in the behavior (for example see [MenuItemBehavior][9]). -Focused component needs to be clearly visible. This is handled in Stardust by focus indicator functionality. Focus indicator will be displayed only if the application is in keyboard mode. Application switches to keyboard mode when a key relevant to navigation is pressed. It disables keyboard mode on mouse click events. +Focused component needs to be clearly visible. This is handled in Fluent UI by focus indicator functionality. Focus indicator will be displayed only if the application is in keyboard mode. Application switches to keyboard mode when a key relevant to navigation is pressed. It disables keyboard mode on mouse click events. To style the focused component, you can use the `isFromKeyboard` utility and prop. See [Button component][10] and [Button style][11] for reference. @@ -118,7 +119,7 @@ You should to run `lerna create` command to create a new package - the directory name should not contain any namespace prefix and can be prefixed with the library name if the implementation is not framework agnostic - please provide a meaningful description to a package in the matched field -- use `https://github.com/stardust-ui/react/tree/master/packages/__DIRECTORY_NAME__` as `homepage` +- use `https://github.com/microsoft/fluent-ui-react/tree/master/packages/__DIRECTORY_NAME__` as `homepage` - our packages are currently published with MIT license, please follow it until you will have specific legal requirements ```sh @@ -133,10 +134,10 @@ package name: (@fluentui/react-proptypes) version: (0.21.1) description: Set of custom reusable PropTypes for React components. keywords: -homepage: https://github.com/stardust-ui/react/tree/master/packages/react-proptypes +homepage: https://github.com/microsoft/fluent-ui-react/tree/master/packages/react-proptypes license: (ISC) MIT entry point: (lib/react-proptypes.js) -git repository: (https://github.com/stardust-ui/react.git) +git repository: (https://github.com/microsoft/fluent-ui-react.git) ``` #### Update `package.json` @@ -223,11 +224,11 @@ lerna add @fluentui/react-proptypes packages/react [6]: https://www.w3.org/TR/wai-aria-1.1/#namecalculation [7]: https://www.w3.org/TR/wai-aria-1.1/#managingfocus [8]: https://developer.microsoft.com/en-us/fabric#/components/focuszone -[9]: https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/accessibility/Behaviors/Menu/MenuBehavior.ts -[10]: https://github.com/stardust-ui/react/blob/master/src/components/Button/Button.tsx -[11]: https://github.com/stardust-ui/react/blob/master/src/themes/teams/components/Button/buttonStyles.ts -[12]: https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/accessibility/Behaviors/Menu/MenuItemBehavior.ts -[13]: https://github.com/stardust-ui/react/blob/master/src/components/Menu/MenuItem.tsx +[9]: https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/accessibility/Behaviors/Menu/MenuBehavior.ts +[10]: https://github.com/microsoft/fluent-ui-react/blob/master/src/components/Button/Button.tsx +[11]: https://github.com/microsoft/fluent-ui-react/blob/master/src/themes/teams/components/Button/buttonStyles.ts +[12]: https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/accessibility/Behaviors/Menu/MenuItemBehavior.ts +[13]: https://github.com/microsoft/fluent-ui-react/blob/master/src/components/Menu/MenuItem.tsx [14]: https://lernajs.io/ [15]: https://yarnpkg.com/en/docs/workspaces [16]: https://github.com/lerna/lerna/tree/master/commands/add diff --git a/.github/ISSUE_TEMPLATE/Support_question.md b/.github/ISSUE_TEMPLATE/Support_question.md index 4e6edb0e57..0945107ff3 100644 --- a/.github/ISSUE_TEMPLATE/Support_question.md +++ b/.github/ISSUE_TEMPLATE/Support_question.md @@ -9,5 +9,5 @@ We primarily use GitHub as an issue tracker; for usage and support questions, pl --- -* Gitter Community Chat: https://gitter.im/stardust-ui/react -* Also have a look at our docs: https://stardust-ui.github.io/react +* Gitter Community Chat: https://gitter.im/microsoft/fluent-ui-react +* Also have a look at our docs: https://microsoft.github.io/fluent-ui-react diff --git a/.github/add-a-feature.md b/.github/add-a-feature.md index cfd6434fc5..c360d09a3d 100644 --- a/.github/add-a-feature.md +++ b/.github/add-a-feature.md @@ -3,6 +3,7 @@ + - [Propose feature](#propose-feature) - [Prototype](#prototype) - [Spec out the API](#spec-out-the-api) @@ -31,7 +32,7 @@ Build a minimal prototype showcasing the proposed feature. Do not worry about te ## Spec out the API -Review the documentation for the component. Spec out the component's proposed API. The spec should demonstrate how component's API you are proposing will be used by Stardust consumer. You can reference this [API proposal][2] for the Menu Icons. +Review the documentation for the component. Spec out the component's proposed API. The spec should demonstrate how component's API you are proposing will be used by Fluent UI consumer. You can reference this [API proposal][2] for the Menu Icons. Once the component spec is solidified, it's time to write some code. The following sections cover everything you'll need to spec and build your awesome component. @@ -190,11 +191,11 @@ After iterating on the feature with the maintainers, you will add full test cove - [Test a component](test-a-feature.md) - [Writing documentation](document-a-feature.md) -[1]: https://github.com/stardust-ui/react/issues -[2]: https://github.com/stardust-ui/react/pull/73 -[3]: https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/AutoControlledComponent.tsx +[1]: https://github.com/microsoft/fluent-ui-react/issues +[2]: https://github.com/microsoft/fluent-ui-react/pull/73 +[3]: https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/AutoControlledComponent.tsx [4]: https://facebook.github.io/react/docs/forms.html#controlled-components [5]: https://facebook.github.io/react/docs/forms.html#uncontrolled-components [6]: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit -[7]: https://stardust-ui.github.io/react/glossary +[7]: https://microsoft.github.io/fluent-ui-react/glossary [8]: https://github.com/Semantic-Org/Semantic-UI-React/issues/607 diff --git a/.github/document-a-feature.md b/.github/document-a-feature.md index b968d63b6c..b4c9df6e4a 100644 --- a/.github/document-a-feature.md +++ b/.github/document-a-feature.md @@ -82,4 +82,4 @@ Usage examples for a component live in `docs/src/examples`. The examples follow Adding documentation for new components is a bit tedious. The best way to do this (for now) is to copy an existing component's and update it. -[1]: https://stardust-ui.github.io/react/components/button +[1]: https://microsoft.github.io/fluent-ui-react/components/button diff --git a/.github/release-a-package.md b/.github/release-a-package.md index 83cd510897..ed91a7ddac 100644 --- a/.github/release-a-package.md +++ b/.github/release-a-package.md @@ -1,11 +1,11 @@ # How to release a new library version -This documentation is intended for core Stardust contributors and describes `@fluentui/react` NPM package release process. +This documentation is intended for core Fluent UI contributors and describes `@fluentui/react` NPM package release process. -## Prerequisities +## Prerequisites 1. You need NPM account and npm configured with your token. -2. You must be a member of stardust-ui organization on [npmjs.com](https://www.npmjs.com). +2. You must be a member of `@fluentui` organization on [npmjs.com](https://www.npmjs.com). 3. You must have access rights to commit changes directly to `master` (be an admin). ## Define new version number @@ -31,4 +31,4 @@ The release command in step 4 will handle tagging and releasing flow entirely. J ## Verification after release 1. Verify NPM package has been released: https://www.npmjs.com/package/@fluentui/react -2. Verify new docsite version has been published: https://stardust-ui.github.io/react/ +2. Verify new docsite version has been published: https://microsoft.github.io/fluent-ui-react/ diff --git a/.github/setup-local-development.md b/.github/setup-local-development.md index bc62284a44..fe9ef0d996 100644 --- a/.github/setup-local-development.md +++ b/.github/setup-local-development.md @@ -24,7 +24,7 @@ node -v v8.11.3 ``` -`yarn` is used for Stardust because of its [benefits][2]. +`yarn` is used for Fluent UI because of its [benefits][2]. ```sh yarn -v @@ -38,40 +38,40 @@ If you do not yet have access to the repo as a contributor, ask one of the maint ### Clone -Start by cloning Stardust UI React and installing dependencies: +Start by cloning Fluent UI React and installing dependencies: SSH ([learn more][3]) ```sh -git clone git@github.com:stardust-ui/react.git stardust-ui-react +git clone git@github.com:microsoft/fluent-ui-react.git ``` HTTPS ```sh -git clone https://github.com/stardust-ui/react.git +git clone https://github.com/microsoft/fluent-ui-react.git ``` Continue to [Start](#start). ## Collaborators -If you are not part of the Stardust UI team, use these instructions. If you are, or should be, use the [Contributor](#contributors) instructions. +If you are not part of the Fluent UI team, use these instructions. If you are, or should be, use the [Contributor](#contributors) instructions. ### Fork -Start by `forking Stardust UI React` to your GitHub account. Then clone your fork and install dependencies: +Start by forking Fluent UI React to your GitHub account. Then clone your fork and install dependencies: ```sh -git clone git@github.com:/react.git stardust-ui-react -cd stardust-ui-react +git clone git@github.com:/fluent-ui-react.git +cd fluent-ui-react yarn ``` Add our repo as a git remote so you can pull/rebase your fork with our latest updates: ``` -git remote add upstream git@github.com:stardust-ui/react.git +git remote add upstream git@github.com:microsoft/fluent-ui-react.git ``` Continue to [Start](#start). @@ -81,7 +81,7 @@ Continue to [Start](#start). Now, enter the directory and install dependencies: ``` -cd stardust-ui-react +cd fluent-ui-react yarn ``` diff --git a/.github/test-a-feature.md b/.github/test-a-feature.md index f2c8aa4eb4..76d7371b8d 100644 --- a/.github/test-a-feature.md +++ b/.github/test-a-feature.md @@ -120,7 +120,7 @@ yarn test yarn test:watch ``` -[1]: https://github.com/stardust-ui/react/tree/master/test/specs/commonTests +[1]: https://github.com/microsoft/fluent-ui-react/tree/master/test/specs/commonTests ## Screener Tests diff --git a/CHANGELOG.md b/CHANGELOG.md index b24db879f7..7202c58d25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ## [Unreleased] +### BREAKING CHANGES +- Rename all "Stardust UI" references to "Fluent UI" @levithomason ([#2165](https://github.com/microsoft/fluent-ui-react/pull/2165)) + ### Fixes - Fix colors expand for `border-color` shorthand @layershifter ([#2160](https://github.com/microsoft/fluent-ui-react/pull/2160)) diff --git a/README.md b/README.md index b59b3aa4c0..9365b9c7b1 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@

- +

@@ -12,17 +12,17 @@

- + Gitter - - Circle + + Circle - - Codecov + + Codecov - - David + + David npm @@ -72,11 +72,11 @@ A shared library means more great ideas and more engineering support for feature ## Scope -You can think of Stardust as the internals of a good component library. This encompasses everything that one UI library may need, starting from the common UI component available on the web, custom theming, accessibility and rtl. Currently there is an React implementation of it, available here: [stardust-ui/react](https://github.com/stardust-ui/react). +You can think of Fluent UI as the internals of a good component library. This encompasses everything that one UI library may need, starting from the common UI component available on the web, custom theming, accessibility and rtl. Currently there is an React implementation of it, available here: [microsoft/fluent-ui-react](https://github.com/microsoft/fluent-ui-react). ## Contributing Organizations -Currently, these teams are actively participating in Stardust's specifications and development: +Currently, these teams are actively participating in Fluent UI's specifications and development: - [Semantic UI React][200] - [Office UI Fabric][300] @@ -84,15 +84,11 @@ Currently, these teams are actively participating in Stardust's specifications a If you own or are building a UI component library, we'd love to have your input. [Post an issue][2] introducing yourself and your team and join us today. -You can actively contribute to Stardust by referring to the [Contributing][3] documentation. +You can actively contribute to Fluent UI by referring to the [Contributing][3] documentation. ## Usage examples -You can find Stardust usage examples by accessing the [doc site][5] - -## Semantic UI React v2 - -See the [MANIFESTO.md][1] for details. SUIR v2 will be built on the specifications and tools from Stardust. +You can find Fluent UI usage examples by accessing the [doc site][5] diff --git a/build/dangerjs/detectNonApprovedDependencies/utils/getRuntimeDependencies.ts b/build/dangerjs/detectNonApprovedDependencies/utils/getRuntimeDependencies.ts index d0333eadb5..f23bf0e959 100644 --- a/build/dangerjs/detectNonApprovedDependencies/utils/getRuntimeDependencies.ts +++ b/build/dangerjs/detectNonApprovedDependencies/utils/getRuntimeDependencies.ts @@ -9,10 +9,10 @@ const { paths } = config * This task relies on Webpack to crawl the imported modules, but when this is run from DangerJS process, there is no crawling happening. * This is because of the way DangerJS handles imports: https://spectrum.chat/danger/javascript/danger-js-actually-runs-your-imports-as-globals~0a005b56-31ec-4919-9a28-ced623949d4d */ -const getRuntimeDependencies = (stardustPackageName: string) => { +const getRuntimeDependencies = (packageName: string) => { const dependencyRegex = /^dependency:\s+(.*)$/ const result = spawnSync( - `yarn gulp test:dependencies:list --prefix="dependency: " --package=${stardustPackageName}`, + `yarn gulp test:dependencies:list --prefix="dependency: " --package=${packageName}`, { shell: true, cwd: paths.base(), diff --git a/build/gulp/tasks/test-dependencies/index.ts b/build/gulp/tasks/test-dependencies/index.ts index 74a53c1f5e..0eb5d85c79 100644 --- a/build/gulp/tasks/test-dependencies/index.ts +++ b/build/gulp/tasks/test-dependencies/index.ts @@ -12,7 +12,7 @@ const prefix = (argv.prefix as string) || '' const packageName = (argv.package as string) || 'react' /** - * Lists runtime dependencies (by crawling the actual code) of the requested Stardust package. + * Lists runtime dependencies (by crawling the actual code) of the requested Fluent UI package. */ task('test:dependencies:list', cb => { const tempOutputFilePath = paths.base('test.js') diff --git a/build/gulp/tasks/test-projects.ts b/build/gulp/tasks/test-projects.ts index 5370cb297c..816ea0ea2c 100644 --- a/build/gulp/tasks/test-projects.ts +++ b/build/gulp/tasks/test-projects.ts @@ -26,7 +26,7 @@ const log = (context: string) => (message: string) => { export const runIn = targetPath => cmd => sh(`cd ${targetPath} && ${cmd}`) -const addResolutionPathsForStardustPackages = async ( +const addResolutionPathsForProjectPackages = async ( testProjectDir: string, packedPackages: PackedPackages, ) => { @@ -41,31 +41,31 @@ const addResolutionPathsForStardustPackages = async ( fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2)) } -const packStardustPackages = async (logger: Function): Promise => { +const packProjectPackages = async (logger: Function): Promise => { // packages/react/src -> packages/react, // as lernaAliases append 'src' by default - const stardustPackages = lernaAliases({ sourceDirectory: false }) + const projectPackages = lernaAliases({ sourceDirectory: false }) // We don't want to pack a package with our dev tools - delete stardustPackages['@fluentui/eslint-plugin'] - delete stardustPackages['@fluentui/internal-tooling'] - delete stardustPackages['@fluentui/scripts'] - delete stardustPackages['@fluentui/digest'] - delete stardustPackages['@fluentui/perf-test'] + delete projectPackages['@fluentui/eslint-plugin'] + delete projectPackages['@fluentui/internal-tooling'] + delete projectPackages['@fluentui/scripts'] + delete projectPackages['@fluentui/digest'] + delete projectPackages['@fluentui/perf-test'] await Promise.all( - Object.keys(stardustPackages).map(async (packageName: string) => { - const filename = tmp.tmpNameSync({ prefix: `stardust-`, postfix: '.tgz' }) - const directory = stardustPackages[packageName] + Object.keys(projectPackages).map(async (packageName: string) => { + const filename = tmp.tmpNameSync({ prefix: `project-`, postfix: '.tgz' }) + const directory = projectPackages[packageName] await runIn(directory)(`yarn pack --filename ${filename}`) logger(`✔️Package "${packageName}" was packed to ${filename}`) - stardustPackages[packageName] = filename + projectPackages[packageName] = filename }), ) - return stardustPackages + return projectPackages } const createReactApp = async (atTempDirectory: string, appName: string): Promise => { @@ -132,8 +132,8 @@ const performBrowserTest = async (publicDirectory: string, listenPort: number) = // Tests the following scenario // - Create a new react test app -// - Add Stardust as a app's dependency -// - Update the App.tsx to include some stardust imports +// - Add Fluent UI as a app's dependency +// - Update the App.tsx to include some project imports // - Try and run a build task('test:projects:cra-ts', async () => { const logger = log('test:projects:cra-ts') @@ -142,20 +142,20 @@ task('test:projects:cra-ts', async () => { logger('STEP 1. Create test React project with TSX scripts..') const testAppPath = paths.withRootAt( - await createReactApp(tmp.dirSync({ prefix: 'stardust-' }).name, 'test-app'), + await createReactApp(tmp.dirSync({ prefix: 'project-' }).name, 'test-app'), ) const runInTestApp = runIn(testAppPath()) logger(`Test React project is successfully created: ${testAppPath()}`) - logger('STEP 2. Add Stardust dependency to test project..') + logger('STEP 2. Add Fluent UI dependency to test project..') - const packedPackages = await packStardustPackages(logger) - await addResolutionPathsForStardustPackages(testAppPath(), packedPackages) + const packedPackages = await packProjectPackages(logger) + await addResolutionPathsForProjectPackages(testAppPath(), packedPackages) await runInTestApp(`yarn add ${packedPackages['@fluentui/react']}`) - logger(`✔️Stardust UI packages were added to dependencies`) + logger(`✔️Fluent UI packages were added to dependencies`) - logger("STEP 3. Reference Stardust components in test project's App.tsx") + logger("STEP 3. Reference Fluent UI components in test project's App.tsx") fs.copyFileSync(scaffoldPath('App.tsx'), testAppPath('src', 'App.tsx')) logger('STEP 4. Build test project..') @@ -169,7 +169,7 @@ task('test:projects:rollup', async () => { const logger = log('test:projects:rollup') const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/rollup') - const tmpDirectory = tmp.dirSync({ prefix: 'stardust-' }).name + const tmpDirectory = tmp.dirSync({ prefix: 'project-' }).name logger(`✔️Temporary directory was created: ${tmpDirectory}`) @@ -185,10 +185,10 @@ task('test:projects:rollup', async () => { await runIn(tmpDirectory)(`yarn add ${dependencies}`) logger(`✔️Dependencies were installed`) - const packedPackages = await packStardustPackages(logger) - await addResolutionPathsForStardustPackages(tmpDirectory, packedPackages) + const packedPackages = await packProjectPackages(logger) + await addResolutionPathsForProjectPackages(tmpDirectory, packedPackages) await runIn(tmpDirectory)(`yarn add ${packedPackages['@fluentui/react']}`) - logger(`✔️Stardust UI packages were added to dependencies`) + logger(`✔️Fluent UI packages were added to dependencies`) fs.copyFileSync(scaffoldPath('app.js'), path.resolve(tmpDirectory, 'app.js')) fs.copyFileSync(scaffoldPath('rollup.config.js'), path.resolve(tmpDirectory, 'rollup.config.js')) @@ -206,7 +206,7 @@ task('test:projects:typings', async () => { const logger = log('test:projects:typings') const scaffoldPath = paths.base.bind(null, 'build/gulp/tasks/test-projects/typings') - const tmpDirectory = tmp.dirSync({ prefix: 'stardust-' }).name + const tmpDirectory = tmp.dirSync({ prefix: 'project-' }).name logger(`✔️Temporary directory was created: ${tmpDirectory}`) @@ -220,10 +220,10 @@ task('test:projects:typings', async () => { await runIn(tmpDirectory)(`yarn add ${dependencies}`) logger(`✔️Dependencies were installed`) - const packedPackages = await packStardustPackages(logger) - await addResolutionPathsForStardustPackages(tmpDirectory, packedPackages) + const packedPackages = await packProjectPackages(logger) + await addResolutionPathsForProjectPackages(tmpDirectory, packedPackages) await runIn(tmpDirectory)(`yarn add ${packedPackages['@fluentui/react']}`) - logger(`✔️Stardust UI packages were added to dependencies`) + logger(`✔️Fluent UI packages were added to dependencies`) fs.mkdirSync(path.resolve(tmpDirectory, 'src')) fs.copyFileSync(scaffoldPath('index.tsx'), path.resolve(tmpDirectory, 'src/index.tsx')) diff --git a/build/gulp/tasks/test-projects/typings/index.tsx b/build/gulp/tasks/test-projects/typings/index.tsx index 9dae717bf5..bcdcf43f28 100644 --- a/build/gulp/tasks/test-projects/typings/index.tsx +++ b/build/gulp/tasks/test-projects/typings/index.tsx @@ -1,10 +1,10 @@ -import * as Stardust from '@fluentui/react' +import * as FluentUI from '@fluentui/react' import * as React from 'react' const App = () => ( - - - + + + ) export default App diff --git a/build/webpack.config.stats.ts b/build/webpack.config.stats.ts index ee8ca8ebe1..44f2ab94d6 100644 --- a/build/webpack.config.stats.ts +++ b/build/webpack.config.stats.ts @@ -73,10 +73,10 @@ const makeConfig = (srcPath, name) => ({ export default [ // entire package - makeConfig('index', 'bundle-stardust-ui-react'), + makeConfig('index', 'bundle-react'), // utils (core) - makeConfig('utils/index', 'bundle-stardust-ui-core'), + makeConfig('utils/index', 'bundle-utils'), // individual components ...fs diff --git a/build/webpack.config.ts b/build/webpack.config.ts index d9dbe03aa8..770190ef37 100644 --- a/build/webpack.config.ts +++ b/build/webpack.config.ts @@ -98,7 +98,7 @@ const webpackConfig: any = { propTypes: require('prop-types/package.json').version, react: require('react/package.json').version, reactDOM: require('react-dom/package.json').version, - stardust: require('../package.json').version, + fluentUI: require('../package.json').version, reactVis: require('react-vis/package.json').version, }, }), diff --git a/build/webpack.config.umd.ts b/build/webpack.config.umd.ts index 83780eaebd..999167ba6e 100644 --- a/build/webpack.config.umd.ts +++ b/build/webpack.config.umd.ts @@ -18,9 +18,9 @@ const webpackUMDConfig = (packageName: string) => { 'react-dom': 'ReactDOM', }, output: { - filename: `stardust-ui-${packageName}.min.js`, + filename: `fluent-ui-${packageName}.min.js`, libraryTarget: 'umd', - library: 'Stardust', + library: 'FluentUI', path: paths.packageDist(packageName, 'umd'), publicPath: '/', pathinfo: true, diff --git a/docs/src/bundleStats.json b/docs/src/bundleStats.json index 21eded6bf4..6ececd8845 100644 --- a/docs/src/bundleStats.json +++ b/docs/src/bundleStats.json @@ -2,11 +2,11 @@ "0.22.0": { "bundles": [ { - "name": "bundle-stardust-ui-core.js", + "name": "bundle-utils.js", "size": 188354 }, { - "name": "bundle-stardust-ui-react.js", + "name": "bundle-react.js", "size": 603218 }, { @@ -166,11 +166,11 @@ "0.21.1": { "bundles": [ { - "name": "bundle-stardust-ui-core.js", + "name": "bundle-utils.js", "size": 188099 }, { - "name": "bundle-stardust-ui-react.js", + "name": "bundle-react.js", "size": 583414 }, { @@ -330,11 +330,11 @@ "0.21.0": { "bundles": [ { - "name": "bundle-stardust-ui-core.js", + "name": "bundle-utils.js", "size": 187303 }, { - "name": "bundle-stardust-ui-react.js", + "name": "bundle-react.js", "size": 580010 }, { @@ -494,11 +494,11 @@ "0.20.0": { "bundles": [ { - "name": "bundle-stardust-ui-core.js", + "name": "bundle-utils.js", "size": 186102 }, { - "name": "bundle-stardust-ui-react.js", + "name": "bundle-react.js", "size": 570181 }, { @@ -654,11 +654,11 @@ "0.19.2": { "bundles": [ { - "name": "bundle-stardust-ui-core.js", + "name": "bundle-utils.js", "size": 186033 }, { - "name": "bundle-stardust-ui-react.js", + "name": "bundle-react.js", "size": 563143 }, { @@ -814,11 +814,11 @@ "0.19.1": { "bundles": [ { - "name": "bundle-stardust-ui-core.js", + "name": "bundle-utils.js", "size": 186053 }, { - "name": "bundle-stardust-ui-react.js", + "name": "bundle-react.js", "size": 556391 }, { @@ -970,11 +970,11 @@ "0.19.0": { "bundles": [ { - "name": "bundle-stardust-ui-core.js", + "name": "bundle-utils.js", "size": 185981 }, { - "name": "bundle-stardust-ui-react.js", + "name": "bundle-react.js", "size": 556067 }, { @@ -1126,11 +1126,11 @@ "0.18.0": { "bundles": [ { - "name": "bundle-stardust-ui-core.js", + "name": "bundle-utils.js", "size": 197089 }, { - "name": "bundle-stardust-ui-react.js", + "name": "bundle-react.js", "size": 564172 }, { @@ -1282,11 +1282,11 @@ "0.17.0": { "bundles": [ { - "name": "bundle-stardust-ui-core.js", + "name": "bundle-utils.js", "size": 280734 }, { - "name": "bundle-stardust-ui-react.js", + "name": "bundle-react.js", "size": 640103 }, { @@ -1434,11 +1434,11 @@ "0.16.2": { "bundles": [ { - "name": "bundle-stardust-ui-core.js", + "name": "bundle-utils.js", "size": 280822 }, { - "name": "bundle-stardust-ui-react.js", + "name": "bundle-react.js", "size": 634976 }, { @@ -1586,11 +1586,11 @@ "0.16.1": { "bundles": [ { - "name": "bundle-stardust-ui-core.js", + "name": "bundle-utils.js", "size": 279745 }, { - "name": "bundle-stardust-ui-react.js", + "name": "bundle-react.js", "size": 629861 }, { @@ -1734,11 +1734,11 @@ "0.16.0": { "bundles": [ { - "name": "bundle-stardust-ui-core.js", + "name": "bundle-utils.js", "size": 278770 }, { - "name": "bundle-stardust-ui-react.js", + "name": "bundle-react.js", "size": 668947 }, { diff --git a/docs/src/components/CategoryColorSchemes.tsx b/docs/src/components/CategoryColorSchemes.tsx index 8dc709ed7e..ea46146957 100644 --- a/docs/src/components/CategoryColorSchemes.tsx +++ b/docs/src/components/CategoryColorSchemes.tsx @@ -28,7 +28,7 @@ export const colorVariantsStyles: ComponentSlotStylesInput = const CategoryColorSchemes = createComponent({ displayName: 'ColorVariants', - render: ({ name, themes, headers, stardust: { classes } }) => { + render: ({ name, themes, headers, config: { classes } }) => { if (themes.length === 0) return <> const colorSchemes = _.map(themes, theme => theme.siteVariables.categoryColorScheme[name]) diff --git a/docs/src/components/ColorBox.tsx b/docs/src/components/ColorBox.tsx index c0ad086e54..9e88218a9c 100644 --- a/docs/src/components/ColorBox.tsx +++ b/docs/src/components/ColorBox.tsx @@ -89,14 +89,7 @@ export const colorBoxStyles: ComponentSlotStylesInput({ displayName: 'ColorBox', - render: ({ - children, - name, - value, - showColorValue, - copyToClipboardIcon, - stardust: { classes }, - }) => ( + render: ({ children, name, value, showColorValue, copyToClipboardIcon, config: { classes } }) => (

{children || _.startCase(name)}
diff --git a/docs/src/components/ColorSchemes.tsx b/docs/src/components/ColorSchemes.tsx index 3ad2de9994..254c697b7a 100644 --- a/docs/src/components/ColorSchemes.tsx +++ b/docs/src/components/ColorSchemes.tsx @@ -28,7 +28,7 @@ export const colorVariantsStyles: ComponentSlotStylesInput = const ColorSchemes = createComponent({ displayName: 'ColorVariants', - render: ({ name, themes, headers, stardust: { classes } }) => { + render: ({ name, themes, headers, config: { classes } }) => { if (themes.length === 0) return <> const colorSchemes = _.map(themes, theme => theme.siteVariables.colorScheme[name]) diff --git a/docs/src/components/ColorVariants.tsx b/docs/src/components/ColorVariants.tsx index 06f10ec372..ec88e3f14d 100644 --- a/docs/src/components/ColorVariants.tsx +++ b/docs/src/components/ColorVariants.tsx @@ -20,7 +20,7 @@ export const colorVariantsStyles: ComponentSlotStylesInput = const ColorVariants = createComponent({ displayName: 'ColorVariants', - render: ({ name, headerOnly, size, stardust: { classes } }) => ( + render: ({ name, headerOnly, size, config: { classes } }) => ( (
diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts index 0293b6de37..f13b636283 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts @@ -3,13 +3,13 @@ import * as _ from 'lodash' import { imports } from 'docs/src/components/Playground/renderConfig' import { ComponentSourceManagerLanguage } from 'docs/src/components/ComponentDoc/ComponentSourceManager' -const name = 'stardust-ui-example' +const name = 'fluent-ui-example' const description = - 'An exported example from Stardust UI React, https://stardust-ui.github.io/react/' + 'An exported example from Fluent UI React, https://microsoft.github.io/fluent-ui-react/' const dependencies = { ..._.mapValues(imports, pkg => pkg.version), // required to enable all features due old templates in https://github.com/codesandbox/codesandbox-importers - // https://github.com/stardust-ui/react/issues/1519 + // https://github.com/microsoft/fluent-ui-react/issues/1519 'react-scripts': 'latest', } diff --git a/docs/src/components/ComponentDoc/useAccessibilityKnob.ts b/docs/src/components/ComponentDoc/useAccessibilityKnob.ts index 94fbd522f1..60ff5522db 100644 --- a/docs/src/components/ComponentDoc/useAccessibilityKnob.ts +++ b/docs/src/components/ComponentDoc/useAccessibilityKnob.ts @@ -1,10 +1,10 @@ import { useSelectKnob } from '@fluentui/docs-components' -import * as StardustUI from '@fluentui/react' +import * as FluentUI from '@fluentui/react' import componentInfoContext from 'docs/src/utils/componentInfoContext' import useComponentProps from './useComponentProps' -const useAccessibilityKnob = (componentName: string): StardustUI.Accessibility => { +const useAccessibilityKnob = (componentName: string): FluentUI.Accessibility => { const componentProps = useComponentProps(componentName) const accessibilityProp = componentProps.find(propDef => propDef.name === 'accessibility') @@ -22,7 +22,7 @@ const useAccessibilityKnob = (componentName: string): StardustUI.Accessibility = values: behaviorNames, }) - return StardustUI[behaviorName] + return FluentUI[behaviorName] } export default useAccessibilityKnob diff --git a/docs/src/components/ComponentPlayground/createHookGenerator.ts b/docs/src/components/ComponentPlayground/createHookGenerator.ts index ffff07ec5f..4d848559c3 100644 --- a/docs/src/components/ComponentPlayground/createHookGenerator.ts +++ b/docs/src/components/ComponentPlayground/createHookGenerator.ts @@ -1,4 +1,4 @@ -import * as Stardust from '@fluentui/react' +import * as FluentUI from '@fluentui/react' import { KnobDefinition, KnobGeneratorOptions, KnobGenerator } from 'docs/src/types' import * as componentGenerators from './componentGenerators' @@ -36,7 +36,7 @@ const createHookGenerator = (options: KnobGeneratorOptions): null | KnobDefiniti const { componentInfo, propDef } = options // TODO: add support for AutoControlled props - const Component = Stardust[componentInfo.displayName] + const Component = FluentUI[componentInfo.displayName] if (process.env.NODE_ENV !== 'production') { if (!Component) { diff --git a/docs/src/components/ComponentPlayground/usePlaygroundComponent.tsx b/docs/src/components/ComponentPlayground/usePlaygroundComponent.tsx index 9549016052..8dd2497d40 100644 --- a/docs/src/components/ComponentPlayground/usePlaygroundComponent.tsx +++ b/docs/src/components/ComponentPlayground/usePlaygroundComponent.tsx @@ -1,4 +1,4 @@ -import * as Stardust from '@fluentui/react' +import * as FluentUI from '@fluentui/react' import * as _ from 'lodash' import * as React from 'react' // @ts-ignore @@ -10,7 +10,7 @@ import componentInfoContext from 'docs/src/utils/componentInfoContext' import createHookGenerator from './createHookGenerator' const usePlaygroundComponent = (componentName: string): [React.ReactElement, string[]] => { - const context: Stardust.ProviderContextPrepared = React.useContext(ThemeContext) + const context: FluentUI.ProviderContextPrepared = React.useContext(ThemeContext) const componentInfo: ComponentInfo = componentInfoContext.byDisplayName[componentName] if (process.env.NODE_ENV !== 'production') { @@ -20,7 +20,7 @@ const usePlaygroundComponent = (componentName: string): [React.ReactElement, str ) } - if (!Stardust[componentName]) { + if (!FluentUI[componentName]) { throw new Error( `Cannot find an export for "${componentName}", please check that it is exported from "@fluentui/react"`, ) @@ -54,7 +54,7 @@ const usePlaygroundComponent = (componentName: string): [React.ReactElement, str unsupportedProps.push(propDef.name) }) - const element = React.createElement(Stardust[componentName], propValues) + const element = React.createElement(FluentUI[componentName], propValues) return [element, unsupportedProps] } diff --git a/docs/src/components/DocPage/DocPage.tsx b/docs/src/components/DocPage/DocPage.tsx index c4db5a3886..d61ea6db58 100644 --- a/docs/src/components/DocPage/DocPage.tsx +++ b/docs/src/components/DocPage/DocPage.tsx @@ -9,7 +9,7 @@ interface DocPageProps { } const DocPage = ({ title, description, children }: DocPageProps) => ( - +
{children} diff --git a/docs/src/components/ExampleSnippet/renderElementToJSX.ts b/docs/src/components/ExampleSnippet/renderElementToJSX.ts index d2b7aa57dd..e7c2b1dc33 100644 --- a/docs/src/components/ExampleSnippet/renderElementToJSX.ts +++ b/docs/src/components/ExampleSnippet/renderElementToJSX.ts @@ -26,7 +26,7 @@ const renderElementToJSX = (element: React.ReactNode, triggerErrorOnRenderFn: bo // MDX props 'mdxType', 'originalType', - // Stardust props + // Fluent UI props 'accessibility', 'onClick', 'onChange', diff --git a/docs/src/components/Fader.tsx b/docs/src/components/Fader.tsx index d884ddf2bb..78f18bd76e 100644 --- a/docs/src/components/Fader.tsx +++ b/docs/src/components/Fader.tsx @@ -28,7 +28,7 @@ export const faderStyles: ComponentSlotStylesInput = { const Fader = createComponent({ displayName: 'Fader', - render: ({ children, url, stardust: { classes } }) => { + render: ({ children, url, config: { classes } }) => { return (
{children}
diff --git a/docs/src/components/Logo/Logo.tsx b/docs/src/components/Logo/Logo.tsx index 6656aed228..0c0b026497 100644 --- a/docs/src/components/Logo/Logo.tsx +++ b/docs/src/components/Logo/Logo.tsx @@ -1,6 +1,12 @@ import * as React from 'react' -import { Image } from '@fluentui/react' +import { Image, ImageProps } from '@fluentui/react' -const Logo: any = props => +export type LogoProps = ImageProps & { + flavor?: 'black' | 'white' | 'inverted' +} + +const Logo: React.SFC = ({ flavor, ...props }) => ( + +) export default Logo diff --git a/docs/src/components/Playground/renderConfig.ts b/docs/src/components/Playground/renderConfig.ts index 3a3728a0bf..34ba8d3029 100644 --- a/docs/src/components/Playground/renderConfig.ts +++ b/docs/src/components/Playground/renderConfig.ts @@ -1,7 +1,7 @@ import * as Accessibility from '@fluentui/accessibility' import * as CodeSandbox from '@fluentui/code-sandbox' import * as DocsComponent from '@fluentui/docs-components' -import * as Stardust from '@fluentui/react' +import * as FluentUI from '@fluentui/react' import * as ReactFela from 'react-fela' import * as _ from 'lodash' import * as React from 'react' @@ -9,7 +9,7 @@ import * as ReactDOM from 'react-dom' import * as Classnames from 'classnames' const docsComponentsPackageJson = require('@fluentui/docs-components/package.json') -const stardustReactPackageJson = require('@fluentui/react/package.json') +const projectPackageJson = require('@fluentui/react/package.json') export const babelConfig = { plugins: [ @@ -23,7 +23,7 @@ export const babelConfig = { export const imports: Record = { '@fluentui/accessibility': { - version: stardustReactPackageJson.version, + version: projectPackageJson.version, module: Accessibility, }, @@ -36,27 +36,27 @@ export const imports: Record = { module: DocsComponent, }, '@fluentui/react': { - version: stardustReactPackageJson.version, - module: Stardust, + version: projectPackageJson.version, + module: FluentUI, }, classnames: { - version: stardustReactPackageJson.dependencies['classnames'], + version: projectPackageJson.dependencies['classnames'], module: Classnames, }, lodash: { - version: stardustReactPackageJson.dependencies['lodash'], + version: projectPackageJson.dependencies['lodash'], module: _, }, react: { - version: stardustReactPackageJson.peerDependencies['react'], + version: projectPackageJson.peerDependencies['react'], module: React, }, 'react-dom': { - version: stardustReactPackageJson.peerDependencies['react-dom'], + version: projectPackageJson.peerDependencies['react-dom'], module: ReactDOM, }, 'react-fela': { - version: stardustReactPackageJson.dependencies['react-fela'], + version: projectPackageJson.dependencies['react-fela'], module: ReactFela, }, prettier: { diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx index 590c0cfcb1..583941f2c1 100644 --- a/docs/src/components/Sidebar/Sidebar.tsx +++ b/docs/src/components/Sidebar/Sidebar.tsx @@ -1,16 +1,17 @@ import { - Icon, + Box, + Flex, HierarchicalTree, - Segment, - Text, - ICSSInJSStyle, HierarchicalTreeItemProps, HierarchicalTreeProps, - Input, - Flex, - Box, HierarchicalTreeTitleProps, + Icon, + ICSSInJSStyle, + Input, + Segment, + Text, } from '@fluentui/react' +import { CopyToClipboard } from '@fluentui/docs-components' import { ShorthandValue } from '../../../../packages/react/src/types' import Logo from 'docs/src/components/Logo/Logo' import { getComponentPathname } from 'docs/src/utils' @@ -410,9 +411,8 @@ class Sidebar extends React.Component { } const logoStyles: ICSSInJSStyle = { - paddingRight: '5px', - color: 'white', - fontWeight: 700, + marginRight: '0.5rem', + width: '36px', } const changeLogUrl: string = `${constants.repoURL}/blob/master/CHANGELOG.md` @@ -445,7 +445,7 @@ class Sidebar extends React.Component { } // TODO: remove after the issue with TreeItem will be fixed - // https://github.com/stardust-ui/react/issues/1613 + // https://github.com/microsoft/fluent-ui-react/issues/1613 this.addItemKeyCallbacks(allSections) this.addItemOnClickCallbacks(allSections) @@ -454,7 +454,7 @@ class Sidebar extends React.Component { {content} {hasSubtree && this.state.query === '' && ( - + )} ) @@ -466,20 +466,57 @@ class Sidebar extends React.Component { width: `${0.9 * this.props.width}px`, } + const gradientTextStyles: React.CSSProperties = { + background: 'linear-gradient(45deg, rgb(138, 255, 124), rgb(123, 226, 251))', + color: 'transparent', + + WebkitBackgroundClip: 'text', + WebkitTextFillColor: 'transparent', + fontWeight: 100, + } + // TODO: bring back the active elements indicators return ( - - + + - - + styles={{ + fontSize: '1.25rem', + color: 'white', + fontWeight: 600, + textAlign: 'center', + }} + > + Fluent UI + + + {(active, onClick) => ( + + {active ? 'Copied! Happy coding :)' : `yarn add ${pkg.name}@${pkg.version}`} + + )} + + ( name="جون دو" status={{ color: 'green', - icon: 'stardust-checkmark', + icon: 'icon-checkmark', }} /> ) diff --git a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx index fc134fe415..49b7e5af0c 100644 --- a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Avatar } from '@fluentui/react' -const status = { color: 'green', icon: 'stardust-checkmark', title: 'Available' } +const status = { color: 'green', icon: 'icon-checkmark', title: 'Available' } const AvatarUsageExampleShorthand = () => (
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx index 8d7b0eabaf..2708e8263b 100644 --- a/docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Avatar } from '@fluentui/react' -const status = { color: 'green', icon: 'stardust-checkmark', title: 'Available' } +const status = { color: 'green', icon: 'icon-checkmark', title: 'Available' } const AvatarExampleExcludedInitialsShorthand = () => (
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx index a08ef47ffe..650e11a3e8 100644 --- a/docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx @@ -7,7 +7,7 @@ const AvatarExampleGetInitialsShorthand = () => ( ) diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx index 566c56fa1a..863f00cbbd 100644 --- a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx @@ -5,12 +5,12 @@ const AvatarExampleImageCustomizationShorthand = () => ( <>     ( /> ), }} - status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }} + status={{ color: 'green', icon: 'icon-checkmark', title: 'Available' }} /> ) diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx index 19eaa3cb2c..688b764159 100644 --- a/docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx @@ -6,7 +6,7 @@ const AvatarExampleNameShorthand = () => ( name="John Doe" status={{ color: 'green', - icon: 'stardust-checkmark', + icon: 'icon-checkmark', title: 'Available', }} /> diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx index d73be950c8..5055dfd3c6 100644 --- a/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { Avatar, Grid, SizeValue } from '@fluentui/react' const statusProps = { - icon: 'stardust-checkmark', + icon: 'icon-checkmark', color: 'green', title: 'Available', } diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx index 2bc5f81d28..97c83caf9f 100644 --- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx @@ -5,7 +5,7 @@ const AvatarExampleStatusShorthand = () => (
  diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx index 0aef75878b..c40a2c72d9 100644 --- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx +++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx @@ -6,7 +6,7 @@ const defaultAvatar = ( image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }} status={{ color: 'green', - icon: 'stardust-checkmark', + icon: 'icon-checkmark', title: 'Available', }} /> @@ -23,7 +23,7 @@ const AvatarExampleStatusCustomizationShorthand = () => ( image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }} status={{ color: 'green', - icon: 'stardust-checkmark', + icon: 'icon-checkmark', title: 'Available', }} variables={{ statusBorderColor: 'orange' }} @@ -35,7 +35,7 @@ const AvatarExampleStatusCustomizationShorthand = () => ( size="larger" status={{ color: 'green', - icon: 'stardust-checkmark', + icon: 'icon-checkmark', title: 'Available', }} /> @@ -45,7 +45,7 @@ const AvatarExampleStatusCustomizationShorthand = () => ( image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }} status={{ color: 'green', - icon: 'stardust-checkmark', + icon: 'icon-checkmark', title: 'Available', size: 'larger', }} @@ -57,7 +57,7 @@ const AvatarExampleStatusCustomizationShorthand = () => ( size="larger" status={{ color: 'green', - icon: 'stardust-checkmark', + icon: 'icon-checkmark', title: 'Available', size: 'medium', }} diff --git a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx index b8e30f35b7..25a4dc0245 100644 --- a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx +++ b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.shorthand.tsx @@ -4,11 +4,11 @@ import { Button, Flex, Text } from '@fluentui/react' const ButtonExampleIconOnly = () => (
-
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx index fd2a4c18fb..e55b9d238e 100644 --- a/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx +++ b/docs/src/examples/components/Button/Types/ButtonExampleIconOnly.tsx @@ -5,13 +5,13 @@ const ButtonExampleIconOnly = () => (
diff --git a/docs/src/examples/components/Chat/Performance/ChatDuplicateMessages.perf.tsx b/docs/src/examples/components/Chat/Performance/ChatDuplicateMessages.perf.tsx index 552328c20f..5e16992120 100644 --- a/docs/src/examples/components/Chat/Performance/ChatDuplicateMessages.perf.tsx +++ b/docs/src/examples/components/Chat/Performance/ChatDuplicateMessages.perf.tsx @@ -9,7 +9,7 @@ const avatars = { const janeAvatar = { image: `data:image/jpeg;base64,${avatars.ade}`, - status: { color: 'green', icon: 'stardust-checkmark' }, + status: { color: 'green', icon: 'icon-checkmark' }, } const ChatDuplicateMessagesPerf = () => { diff --git a/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx b/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx index cb7027a4e9..892cab9dec 100644 --- a/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx +++ b/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx @@ -10,7 +10,7 @@ const avatars = { const janeAvatar = { image: `data:image/jpeg;base64,${avatars.ade}`, - status: { color: 'green', icon: 'stardust-checkmark' }, + status: { color: 'green', icon: 'icon-checkmark' }, } export interface PopoverProps { diff --git a/docs/src/examples/components/Chat/Rtl/ChatExample.rtl.tsx b/docs/src/examples/components/Chat/Rtl/ChatExample.rtl.tsx index 0a7b9dd070..6194240ae9 100644 --- a/docs/src/examples/components/Chat/Rtl/ChatExample.rtl.tsx +++ b/docs/src/examples/components/Chat/Rtl/ChatExample.rtl.tsx @@ -18,7 +18,7 @@ const items: ShorthandCollection = [ gutter: ( ), message: ( diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx index b1da151010..9d57124fb4 100644 --- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx @@ -3,7 +3,7 @@ import { Avatar, Chat, ChatItemProps, Divider, ShorthandCollection } from '@flue const janeAvatar = { image: 'public/images/avatar/small/ade.jpg', - status: { color: 'green', icon: 'stardust-checkmark' }, + status: { color: 'green', icon: 'icon-checkmark' }, } const items: ShorthandCollection = [ diff --git a/docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx index 34b24befde..1ebd94a6ad 100644 --- a/docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx @@ -6,7 +6,7 @@ const [janeAvatar, johnAvatar] = [ 'public/images/avatar/small/joe.jpg', ].map(src => ({ image: src, - status: { color: 'green', icon: 'stardust-checkmark' }, + status: { color: 'green', icon: 'icon-checkmark' }, })) const items: ShorthandCollection = [ diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx index 2c38e7e620..547bbb2951 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx @@ -3,7 +3,7 @@ import { Avatar, Chat, ChatItemProps, ShorthandCollection } from '@fluentui/reac const janeAvatar = { image: 'public/images/avatar/small/ade.jpg', - status: { color: 'green', icon: 'stardust-checkmark' }, + status: { color: 'green', icon: 'icon-checkmark' }, } const items: ShorthandCollection = [ diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx index a0123a1e7b..4d7a5170e9 100644 --- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx +++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx @@ -15,7 +15,7 @@ const reactions: ShorthandCollection = [ const janeAvatar: AvatarProps = { image: 'public/images/avatar/small/ade.jpg', - status: { color: 'green', icon: 'stardust-checkmark' }, + status: { color: 'green', icon: 'icon-checkmark' }, } const content = ( diff --git a/docs/src/examples/components/Flex/Rtl/FlexExample.rtl.tsx b/docs/src/examples/components/Flex/Rtl/FlexExample.rtl.tsx index 73f8b6afab..4f195acbd1 100644 --- a/docs/src/examples/components/Flex/Rtl/FlexExample.rtl.tsx +++ b/docs/src/examples/components/Flex/Rtl/FlexExample.rtl.tsx @@ -19,7 +19,7 @@ const FlexExampleMediaCard = () => ( - + diff --git a/docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx index fc753d7458..663b08c793 100644 --- a/docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx +++ b/docs/src/examples/components/Flex/Types/FlexExampleMediaCard.shorthand.tsx @@ -19,7 +19,7 @@ const FlexExampleMediaCard = () => ( - + diff --git a/docs/src/examples/components/Grid/index.tsx b/docs/src/examples/components/Grid/index.tsx index 360354122e..c04d855673 100644 --- a/docs/src/examples/components/Grid/index.tsx +++ b/docs/src/examples/components/Grid/index.tsx @@ -10,7 +10,7 @@ const GridExamples = () => ( <>

- Get more information on Stardust's approach to layout from{' '} + Get more information on Fluent UI's approach to layout from{' '} Layout guide.

diff --git a/docs/src/examples/components/Icon/Rtl/IconExample.rtl.tsx b/docs/src/examples/components/Icon/Rtl/IconExample.rtl.tsx index bdd7803ca2..14b43ad702 100644 --- a/docs/src/examples/components/Icon/Rtl/IconExample.rtl.tsx +++ b/docs/src/examples/components/Icon/Rtl/IconExample.rtl.tsx @@ -4,7 +4,7 @@ import { Flex, Icon } from '@fluentui/react' const IconExampleRtl = () => ( - + diff --git a/docs/src/examples/components/List/Variations/ListExampleHorizontal.shorthand.tsx b/docs/src/examples/components/List/Variations/ListExampleHorizontal.shorthand.tsx index b21170e248..504a0ac840 100644 --- a/docs/src/examples/components/List/Variations/ListExampleHorizontal.shorthand.tsx +++ b/docs/src/examples/components/List/Variations/ListExampleHorizontal.shorthand.tsx @@ -9,7 +9,7 @@ const items = [ }, { key: 'skyler', - media: , + media: , header: 'Skyler Parks', }, { diff --git a/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx b/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx index 77cad162bb..560db7b65f 100644 --- a/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx +++ b/docs/src/examples/components/List/Variations/ListExampleTruncate.shorthand.tsx @@ -6,13 +6,13 @@ const actions = ( (
- +  
diff --git a/docs/src/index.ejs b/docs/src/index.ejs index 82782fc00b..4ffa47e085 100644 --- a/docs/src/index.ejs +++ b/docs/src/index.ejs @@ -6,8 +6,8 @@ - '/> - Stardust + '/> + Fluent UI