From ca00b06e2f687e3f757c3d43fff4bcaa650a5048 Mon Sep 17 00:00:00 2001 From: Levi Thomason Date: Wed, 11 Dec 2019 16:50:43 -0800 Subject: [PATCH 01/13] ...more renames --- .github/CONTRIBUTING.md | 24 +++++----- .github/ISSUE_TEMPLATE/Support_question.md | 4 +- .github/add-a-feature.md | 10 ++-- .github/document-a-feature.md | 2 +- .github/release-a-package.md | 8 ++-- .github/setup-local-development.md | 20 ++++---- .github/test-a-feature.md | 2 +- README.md | 26 +++++----- build/gulp/tasks/test-dependencies/index.ts | 2 +- build/gulp/tasks/test-projects.ts | 10 ++-- .../tasks/test-projects/typings/index.tsx | 8 ++-- build/screener/screener.config.js | 2 +- build/webpack.config.stats.ts | 4 +- build/webpack.config.umd.ts | 4 +- docs/src/bundleStats.json | 48 +++++++++---------- .../createPackageJson.ts | 4 +- .../createHookGenerator.ts | 4 +- .../usePlaygroundComponent.tsx | 4 +- .../ExampleSnippet/renderElementToJSX.ts | 2 +- .../src/components/Playground/renderConfig.ts | 18 +++---- docs/src/components/Sidebar/Sidebar.tsx | 6 +-- .../Avatar/Rtl/AvatarExample.rtl.tsx | 2 +- .../Usage/AvatarUsageExample.shorthand.tsx | 2 +- ...vatarExampleExcludedInitials.shorthand.tsx | 2 +- .../AvatarExampleGetInitials.shorthand.tsx | 2 +- ...tarExampleImageCustomization.shorthand.tsx | 6 +-- .../AvatarExampleName.shorthand.tsx | 2 +- .../AvatarExampleSize.shorthand.tsx | 2 +- .../AvatarExampleStatus.shorthand.tsx | 2 +- ...arExampleStatusCustomization.shorthand.tsx | 10 ++-- .../Types/ButtonExampleIconOnly.shorthand.tsx | 4 +- .../Button/Types/ButtonExampleIconOnly.tsx | 4 +- .../ChatDuplicateMessages.perf.tsx | 2 +- .../Chat/Performance/ChatWithPopover.perf.tsx | 2 +- .../components/Chat/Rtl/ChatExample.rtl.tsx | 2 +- .../Chat/Types/ChatExample.shorthand.tsx | 2 +- .../ChatExampleContentPosition.shorthand.tsx | 2 +- .../ChatMessageExampleBadge.shorthand.tsx | 2 +- .../ChatMessageExampleStyled.shorthand.tsx | 2 +- .../components/Icon/Rtl/IconExample.rtl.tsx | 2 +- .../ListExampleHorizontal.shorthand.tsx | 2 +- .../ListExampleTruncate.shorthand.tsx | 4 +- .../MenuExampleWithSubmenu.shorthand.tsx | 8 ++-- ...RadioGroupColorPickerExample.shorthand.tsx | 2 +- .../StatusIconExample.shorthand.tsx | 2 +- .../ControlMessages/GroupControlMessages.tsx | 2 +- .../ThreadedMessages/threadChatBehavior.ts | 2 +- docs/src/prototypes/hexagonalAvatar/index.tsx | 2 +- docs/src/views/AccessibilityBehaviors.tsx | 2 +- docs/src/views/AutoFocusZoneDoc.tsx | 4 +- docs/src/views/FAQ.tsx | 2 +- docs/src/views/FocusTrapZoneDoc.tsx | 4 +- docs/src/views/FocusZoneDoc.tsx | 4 +- docs/src/views/Introduction.tsx | 2 +- e2e/README.md | 4 +- e2e/tests/dialogInDialog-test.ts | 2 +- e2e/tests/dialogInPopup-test.ts | 2 +- e2e/tests/popupClickHandling-test.ts | 2 +- e2e/tests/popupEscHandling-test.ts | 2 +- e2e/tests/popupInMenu-test.ts | 2 +- now.json | 2 +- packages/ability-attributes/package.json | 6 +-- packages/accessibility/package.json | 6 +-- packages/code-sandbox/package.json | 6 +-- packages/code-sandbox/src/SandboxApp.tsx | 4 +- packages/docs-components/package.json | 6 +-- .../rules/no-visibility-modifiers/index.js | 2 +- packages/internal-tooling/babel/index.js | 2 +- packages/internal-tooling/eslint/index.js | 2 +- .../src/components/Checkbox/README.md | 14 +++--- .../playground/src/components/Icon/README.md | 22 ++++----- .../playground/src/components/Link/README.md | 10 ++-- .../src/components/Slider/README.md | 10 ++-- packages/react-bindings/package.json | 6 +-- .../src/FocusZone/FocusTrapZone.tsx | 2 +- .../package.json | 6 +-- .../package.json | 6 +-- packages/react-component-ref/package.json | 6 +-- packages/react-proptypes/package.json | 6 +-- packages/react/package.json | 6 +-- .../components/Accordion/AccordionTitle.tsx | 2 +- packages/react/src/components/Box/Box.tsx | 2 +- .../Carousel/CarouselNavigationItem.tsx | 2 +- .../src/components/Checkbox/Checkbox.tsx | 2 +- .../src/components/Dropdown/Dropdown.tsx | 4 +- packages/react/src/components/Embed/Embed.tsx | 2 +- .../react/src/components/Flex/FlexItem.tsx | 2 +- packages/react/src/components/Input/Input.tsx | 2 +- .../react/src/components/Menu/MenuItem.tsx | 4 +- .../src/components/Provider/Provider.tsx | 2 +- .../src/components/Provider/ProviderBox.tsx | 2 +- .../components/Provider/ProviderConsumer.tsx | 2 +- .../components/RadioGroup/RadioGroupItem.tsx | 2 +- .../components/SplitButton/SplitButton.tsx | 2 +- .../components/Toolbar/ToolbarMenuItem.tsx | 6 +-- .../teams/components/Icon/svg/icons/index.ts | 2 +- .../themes/teams/components/Icon/svg/types.ts | 2 +- packages/react/src/themes/teams/index.tsx | 20 ++++---- .../src/themes/teams/withProcessedIcons.ts | 8 ++-- packages/react/src/themes/types.ts | 16 +++---- packages/react/src/utils/factories.ts | 4 +- .../components/Carousel/Carousel-test.tsx | 2 +- .../specs/components/Input/Input-test.tsx | 4 +- .../specs/components/Popup/Popup-test.tsx | 4 +- .../specs/components/Tooltip/Tooltip-test.tsx | 2 +- packages/state/README.md | 2 +- packages/state/package.json | 6 +-- perf/doc/perf.md | 12 ++--- 108 files changed, 285 insertions(+), 289 deletions(-) diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 5cee003198..4578f54ceb 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -25,7 +25,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 +64,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 +94,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 +118,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 +133,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 +223,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..fc2a869804 100644 --- a/.github/add-a-feature.md +++ b/.github/add-a-feature.md @@ -31,7 +31,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 +190,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 8c9e9b5b20..d53c23dc15 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/README.md b/README.md index b59b3aa4c0..1a0a8b40f1 100644 --- a/README.md +++ b/README.md @@ -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/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..b7f0d3d6a2 100644 --- a/build/gulp/tasks/test-projects.ts +++ b/build/gulp/tasks/test-projects.ts @@ -55,7 +55,7 @@ const packStardustPackages = async (logger: Function): Promise = await Promise.all( Object.keys(stardustPackages).map(async (packageName: string) => { - const filename = tmp.tmpNameSync({ prefix: `stardust-`, postfix: '.tgz' }) + const filename = tmp.tmpNameSync({ prefix: `project-`, postfix: '.tgz' }) const directory = stardustPackages[packageName] await runIn(directory)(`yarn pack --filename ${filename}`) @@ -132,7 +132,7 @@ const performBrowserTest = async (publicDirectory: string, listenPort: number) = // Tests the following scenario // - Create a new react test app -// - Add Stardust as a app's dependency +// - Add Fluent UI as a app's dependency // - Update the App.tsx to include some stardust imports // - Try and run a build task('test:projects:cra-ts', async () => { @@ -142,7 +142,7 @@ 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()) @@ -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}`) @@ -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}`) 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/screener/screener.config.js b/build/screener/screener.config.js index 432963e18b..5f604501f2 100644 --- a/build/screener/screener.config.js +++ b/build/screener/screener.config.js @@ -10,7 +10,7 @@ require('tsconfig-paths').register({ // https://github.com/screener-io/screener-runner module.exports = { - projectRepo: 'stardust-ui/react', + projectRepo: 'microsoft/fluent-ui-react', apiKey: process.env.SCREENER_API_KEY, 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.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/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts index 0293b6de37..32382ef413 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts @@ -5,11 +5,11 @@ import { ComponentSourceManagerLanguage } from 'docs/src/components/ComponentDoc const name = 'stardust-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/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..df2360da17 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') { 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/Playground/renderConfig.ts b/docs/src/components/Playground/renderConfig.ts index c37f1db1fa..e820d85012 100644 --- a/docs/src/components/Playground/renderConfig.ts +++ b/docs/src/components/Playground/renderConfig.ts @@ -1,6 +1,6 @@ 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' @@ -8,7 +8,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: [ @@ -30,27 +30,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..3a2b524d8b 100644 --- a/docs/src/components/Sidebar/Sidebar.tsx +++ b/docs/src/components/Sidebar/Sidebar.tsx @@ -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 === '' && ( - + )} ) @@ -475,7 +475,7 @@ class Sidebar extends React.Component { role="heading" aria-level={1} color="white" - content="Stardust UI React  " + content="Fluent UI React  " styles={logoStyles} /> diff --git a/docs/src/examples/components/Avatar/Rtl/AvatarExample.rtl.tsx b/docs/src/examples/components/Avatar/Rtl/AvatarExample.rtl.tsx index 4cca1f9fed..0a5355d04b 100644 --- a/docs/src/examples/components/Avatar/Rtl/AvatarExample.rtl.tsx +++ b/docs/src/examples/components/Avatar/Rtl/AvatarExample.rtl.tsx @@ -6,7 +6,7 @@ const AvatarExampleRtl = () => ( 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/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/prototypes/chatMessages/ControlMessages/GroupControlMessages.tsx b/docs/src/prototypes/chatMessages/ControlMessages/GroupControlMessages.tsx index 1693735b58..75e83056ce 100644 --- a/docs/src/prototypes/chatMessages/ControlMessages/GroupControlMessages.tsx +++ b/docs/src/prototypes/chatMessages/ControlMessages/GroupControlMessages.tsx @@ -39,7 +39,7 @@ const GroupControlMessages = (props: GroupControlMessagesProps) => { }} > setExpanded(!expanded)} /> diff --git a/docs/src/prototypes/chatMessages/ThreadedMessages/threadChatBehavior.ts b/docs/src/prototypes/chatMessages/ThreadedMessages/threadChatBehavior.ts index bbdc120b70..b9d4e1cdaf 100644 --- a/docs/src/prototypes/chatMessages/ThreadedMessages/threadChatBehavior.ts +++ b/docs/src/prototypes/chatMessages/ThreadedMessages/threadChatBehavior.ts @@ -15,7 +15,7 @@ export default threadChatBehavior const getLastTabbableElement = (root: HTMLElement): HTMLElement => { // In real chat, it should focus the message with data-last-visible="true" - // Since we don't have this logic in Stardust, overriding a selector to focus the last thread message + // Since we don't have this logic in Fluent UI, overriding a selector to focus the last thread message const chatItemsElements = root.querySelectorAll( `[chat-focuszone] .${classNames.threadedMessage.thread}[data-is-focusable="true"]`, ) diff --git a/docs/src/prototypes/hexagonalAvatar/index.tsx b/docs/src/prototypes/hexagonalAvatar/index.tsx index 9128f5d341..bae134e3b1 100644 --- a/docs/src/prototypes/hexagonalAvatar/index.tsx +++ b/docs/src/prototypes/hexagonalAvatar/index.tsx @@ -4,7 +4,7 @@ import { Flex, StatusProps, WithAsProp, Extendable, Text } from '@fluentui/react import Avatar from './CustomAvatar' const statusProps: Extendable> = { - icon: 'stardust-checkmark', + icon: 'icon-checkmark', state: 'success', title: 'Available', } diff --git a/docs/src/views/AccessibilityBehaviors.tsx b/docs/src/views/AccessibilityBehaviors.tsx index a48697a8c0..37e8a38b92 100644 --- a/docs/src/views/AccessibilityBehaviors.tsx +++ b/docs/src/views/AccessibilityBehaviors.tsx @@ -232,7 +232,7 @@ export default () => ( All Stardust behaviors implementations can be found on the{' '} {link( 'GitHub', - 'https://github.com/stardust-ui/react/tree/master/packages/react/src/utils/accessibility/Behaviors', + 'https://github.com/microsoft/fluent-ui-react/tree/master/packages/react/src/utils/accessibility/Behaviors', )} .

diff --git a/docs/src/views/AutoFocusZoneDoc.tsx b/docs/src/views/AutoFocusZoneDoc.tsx index 5dae4e7b4f..8720cb5a18 100644 --- a/docs/src/views/AutoFocusZoneDoc.tsx +++ b/docs/src/views/AutoFocusZoneDoc.tsx @@ -36,7 +36,7 @@ export default () => ( {code('AutoFocusZone')}'s props which can be applied to {code('autoFocus')} prop ( {link( 'lookup for API on GitHub', - 'https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/accessibility/AutoFocusZone/AutoFocusZone.types.tsx', + 'https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/accessibility/AutoFocusZone/AutoFocusZone.types.tsx', )} ):

@@ -70,7 +70,7 @@ export default () => ( {code('AutoFocusZone')} code on{' '} {link( 'GitHub.', - 'https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/accessibility/FocusZone/AutoFocusZone.tsx', + 'https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/accessibility/FocusZone/AutoFocusZone.tsx', )}

diff --git a/docs/src/views/FAQ.tsx b/docs/src/views/FAQ.tsx index 41c21a52a4..4915799b12 100644 --- a/docs/src/views/FAQ.tsx +++ b/docs/src/views/FAQ.tsx @@ -164,7 +164,7 @@ export default () => (

Generally Teams should be using SVG icons only. If you need FontAwesome or other icons, process for adding them is described in{' '} - {link('Issue 585', 'https://github.com/stardust-ui/react/pull/585')} + {link('Issue 585', 'https://github.com/microsoft/fluent-ui-react/pull/585')}

} /> diff --git a/docs/src/views/FocusTrapZoneDoc.tsx b/docs/src/views/FocusTrapZoneDoc.tsx index 833b3a5da7..52fd034efd 100644 --- a/docs/src/views/FocusTrapZoneDoc.tsx +++ b/docs/src/views/FocusTrapZoneDoc.tsx @@ -47,7 +47,7 @@ export default () => ( {code('FocusTrapZone')}'s props which can be applied to {code('trapFocus')} prop ( {link( 'lookup for API on GitHub', - 'https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/accessibility/FocusTrapZone/FocusTrapZone.types.tsx', + 'https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/accessibility/FocusTrapZone/FocusTrapZone.types.tsx', )} ):

@@ -88,7 +88,7 @@ export default () => ( {code('FocusTrapZone')} code on{' '} {link( 'GitHub.', - 'https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/accessibility/FocusZone/FocusTrapZone.tsx', + 'https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/accessibility/FocusZone/FocusTrapZone.tsx', )}

diff --git a/docs/src/views/FocusZoneDoc.tsx b/docs/src/views/FocusZoneDoc.tsx index 13eca3ea89..21c28249d6 100644 --- a/docs/src/views/FocusZoneDoc.tsx +++ b/docs/src/views/FocusZoneDoc.tsx @@ -124,7 +124,7 @@ export default () => ( The following props can be applied ( {link( 'lookup for API on GitHub', - 'https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/accessibility/FocusZone/FocusZone.types.ts', + 'https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/accessibility/FocusZone/FocusZone.types.ts', )} ):

@@ -175,7 +175,7 @@ export default () => ( {code('FocusZone')} code on{' '} {link( 'GitHub.', - 'https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/accessibility/FocusZone/FocusZone.tsx', + 'https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/accessibility/FocusZone/FocusZone.tsx', )}

diff --git a/docs/src/views/Introduction.tsx b/docs/src/views/Introduction.tsx index 4fa30609cf..bb4f96ec5e 100644 --- a/docs/src/views/Introduction.tsx +++ b/docs/src/views/Introduction.tsx @@ -35,7 +35,7 @@ const Introduction = () => ( language.

- Stardust UI React is being built as an exemplar of the Stardust UI design language, component + Fluent UI React is being built as an exemplar of the Stardust UI design language, component specifications, and utilities.

diff --git a/e2e/README.md b/e2e/README.md index 1de05393b3..b1d2cc87a1 100644 --- a/e2e/README.md +++ b/e2e/README.md @@ -1,5 +1,5 @@ -# Stardust E2E tests -This directory provides end-to-end (in-browser) tests for critical scenarios for Stardust. +# Fluent UI E2E tests +This directory provides end-to-end (in-browser) tests for critical scenarios for Fluent UI. All test scripts, as well as examples this scripts are running against, are contained in `./tests` directory. ## Run browser tests diff --git a/e2e/tests/dialogInDialog-test.ts b/e2e/tests/dialogInDialog-test.ts index a47a55bd43..255b8d9483 100644 --- a/e2e/tests/dialogInDialog-test.ts +++ b/e2e/tests/dialogInDialog-test.ts @@ -9,7 +9,7 @@ const innerHeader = `#${selectors.innerHeader}` const innerTrigger = `#${selectors.innerTrigger}` const innerOverlay = `#${selectors.innerOverlay}` -// https://github.com/stardust-ui/react/issues/1674 +// https://github.com/microsoft/fluent-ui-react/issues/1674 describe('Dialog in Dialog', () => { beforeEach(async () => { await e2e.gotoTestCase(__filename, outerTrigger) diff --git a/e2e/tests/dialogInPopup-test.ts b/e2e/tests/dialogInPopup-test.ts index 4d91f8f4a3..8a73842f17 100644 --- a/e2e/tests/dialogInPopup-test.ts +++ b/e2e/tests/dialogInPopup-test.ts @@ -7,7 +7,7 @@ const dialogTrigger = `#${selectors.dialogTrigger}` const popupContent = `#${selectors.popupContent}` const popupTrigger = `#${selectors.popupTrigger}` -// https://github.com/stardust-ui/react/issues/1674 +// https://github.com/microsoft/fluent-ui-react/issues/1674 describe('Dialog in Popup', () => { beforeEach(async () => { await e2e.gotoTestCase(__filename, popupTrigger) diff --git a/e2e/tests/popupClickHandling-test.ts b/e2e/tests/popupClickHandling-test.ts index 6273441834..65f61bf8f0 100644 --- a/e2e/tests/popupClickHandling-test.ts +++ b/e2e/tests/popupClickHandling-test.ts @@ -4,7 +4,7 @@ const popupTrigger = `#${selectors.triggerButtonId}` const popupContent = `.${selectors.popupContentClass}` const popupContentButton = `#${selectors.popupContentButtonId}` -// https://github.com/stardust-ui/react/issues/1324 +// https://github.com/microsoft/fluent-ui-react/issues/1324 describe('Popup - on content click', () => { beforeEach(async () => { await e2e.gotoTestCase(__filename, popupTrigger) diff --git a/e2e/tests/popupEscHandling-test.ts b/e2e/tests/popupEscHandling-test.ts index e51fe8032c..71712e33e9 100644 --- a/e2e/tests/popupEscHandling-test.ts +++ b/e2e/tests/popupEscHandling-test.ts @@ -4,7 +4,7 @@ const popupTrigger = `#${selectors.popupTriggerId}` const popupContent = `.${selectors.popupContentClass}` const dropdownTriggerButton = `.${selectors.dropdownTriggerClass}` -// https://github.com/stardust-ui/react/issues/1079 +// https://github.com/microsoft/fluent-ui-react/issues/1079 describe('Popup - on ESC key press', () => { beforeEach(async () => { await e2e.gotoTestCase(__filename, popupTrigger) diff --git a/e2e/tests/popupInMenu-test.ts b/e2e/tests/popupInMenu-test.ts index cccf8bc07e..ee8500eaa4 100644 --- a/e2e/tests/popupInMenu-test.ts +++ b/e2e/tests/popupInMenu-test.ts @@ -6,7 +6,7 @@ const menuItem = (index: number) => `#${selectors.menuItemId(index)}` const itemPopup = (index: number) => `#${selectors.popupContentId(index)}` const popupContent = `.${selectors.popupContentClass}` -// https://github.com/stardust-ui/react/issues/557 +// https://github.com/microsoft/fluent-ui-react/issues/557 describe('Popup of menu item', () => { beforeEach(async () => { await e2e.gotoTestCase(__filename, menu) diff --git a/now.json b/now.json index 4dcab446df..35bee0747e 100644 --- a/now.json +++ b/now.json @@ -1,6 +1,6 @@ { "version": 2, - "name": "stardust-react", + "name": "fluent-ui-react", "builds": [ { "src": "package.json", diff --git a/packages/ability-attributes/package.json b/packages/ability-attributes/package.json index 3d2db5f3db..38ea90952f 100644 --- a/packages/ability-attributes/package.json +++ b/packages/ability-attributes/package.json @@ -3,7 +3,7 @@ "description": "Accessibility attributes schema for Stardust UI", "version": "0.41.1", "author": "Marat Abdullin ", - "bugs": "https://github.com/stardust-ui/react/issues", + "bugs": "https://github.com/microsoft/fluent-ui-react/issues", "dependencies": { "ability-attributes": "^0.0.8" }, @@ -13,7 +13,7 @@ "files": [ "dist" ], - "homepage": "https://github.com/stardust-ui/react/tree/master/packages/ability-attributes", + "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/ability-attributes", "jsnext:main": "dist/es/index.js", "license": "MIT", "main": "dist/commonjs/index.js", @@ -21,7 +21,7 @@ "publishConfig": { "access": "public" }, - "repository": "stardust-ui/react.git", + "repository": "microsoft/fluent-ui-react.git", "scripts": { "build": "npm run schema && gulp bundle:package:no-umd --package ability-attributes", "schema": "allyschema -c \"process.env.NODE_ENV !== 'production'\" schema.json > ./src/schema.ts" diff --git a/packages/accessibility/package.json b/packages/accessibility/package.json index 112d4a02d5..30a89cfde0 100644 --- a/packages/accessibility/package.json +++ b/packages/accessibility/package.json @@ -3,7 +3,7 @@ "description": "A set of reusable framework accessibility behaviours.", "version": "0.41.1", "author": "Oleksandr Fediashov ", - "bugs": "https://github.com/stardust-ui/react/issues", + "bugs": "https://github.com/microsoft/fluent-ui-react/issues", "dependencies": { "@babel/runtime": "^7.1.2", "keyboard-key": "^1.0.1", @@ -16,7 +16,7 @@ "files": [ "dist" ], - "homepage": "https://github.com/stardust-ui/react/tree/master/packages/accessibility", + "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/accessibility", "jsnext:main": "dist/es/index.js", "license": "MIT", "main": "dist/commonjs/index.js", @@ -24,7 +24,7 @@ "publishConfig": { "access": "public" }, - "repository": "stardust-ui/react.git", + "repository": "microsoft/fluent-ui-react.git", "scripts": { "build": "gulp bundle:package:no-umd --package accessibility" }, diff --git a/packages/code-sandbox/package.json b/packages/code-sandbox/package.json index fce5664505..7fb774f6d8 100644 --- a/packages/code-sandbox/package.json +++ b/packages/code-sandbox/package.json @@ -3,14 +3,14 @@ "description": "Stardust UI tools for CodeSandbox.", "version": "0.41.1", "author": "Oleksandr Fediashov ", - "bugs": "https://github.com/stardust-ui/react/issues", + "bugs": "https://github.com/microsoft/fluent-ui-react/issues", "dependencies": { "@fluentui/react": "^0.41.1" }, "files": [ "dist" ], - "homepage": "https://github.com/stardust-ui/react/tree/master/packages/code-sandbox", + "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/code-sandbox", "jsnext:main": "dist/es/index.js", "license": "MIT", "main": "dist/commonjs/index.js", @@ -22,7 +22,7 @@ "publishConfig": { "access": "public" }, - "repository": "stardust-ui/react.git", + "repository": "microsoft/fluent-ui-react.git", "scripts": { "build": "gulp bundle:package:no-umd --package code-sandbox" }, diff --git a/packages/code-sandbox/src/SandboxApp.tsx b/packages/code-sandbox/src/SandboxApp.tsx index f9d3699bfc..b99547be4c 100644 --- a/packages/code-sandbox/src/SandboxApp.tsx +++ b/packages/code-sandbox/src/SandboxApp.tsx @@ -42,11 +42,11 @@ const SandboxApp: React.FunctionComponent = props => {
Stardust UI @ {pkg.version}

This example is powered by Stardust UI, check{' '} - + our docs {' '} and{' '} - + GitHub . diff --git a/packages/docs-components/package.json b/packages/docs-components/package.json index bc7ccc0798..45f5d1cc19 100644 --- a/packages/docs-components/package.json +++ b/packages/docs-components/package.json @@ -3,7 +3,7 @@ "description": "A set of React components to build docs sites.", "version": "0.41.1", "author": "Oleksandr Fediashov ", - "bugs": "https://github.com/stardust-ui/react/issues", + "bugs": "https://github.com/microsoft/fluent-ui-react/issues", "dependencies": { "@babel/runtime": "^7.1.2", "copy-to-clipboard": "^3.2.0", @@ -14,7 +14,7 @@ "files": [ "dist" ], - "homepage": "https://github.com/stardust-ui/react/tree/master/packages/docs-components", + "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/docs-components", "jsnext:main": "dist/es/index.js", "license": "MIT", "main": "dist/commonjs/index.js", @@ -27,7 +27,7 @@ "publishConfig": { "access": "public" }, - "repository": "stardust-ui/react.git", + "repository": "microsoft/fluent-ui-react.git", "scripts": { "build": "gulp bundle:package:no-umd --package docs-components" }, diff --git a/packages/eslint-plugin/rules/no-visibility-modifiers/index.js b/packages/eslint-plugin/rules/no-visibility-modifiers/index.js index aa2e9e7e31..0c91324b19 100644 --- a/packages/eslint-plugin/rules/no-visibility-modifiers/index.js +++ b/packages/eslint-plugin/rules/no-visibility-modifiers/index.js @@ -4,7 +4,7 @@ const { AST_NODE_TYPES, ESLintUtils } = require('@typescript-eslint/experimental const createRule = ESLintUtils.RuleCreator( name => - `https://github.com/stardust-ui/react/tree/master/packages/internal-tooling/eslint/${name}.js`, + `https://github.com/microsoft/fluent-ui-react/tree/master/packages/internal-tooling/eslint/${name}.js`, ) module.exports = createRule({ diff --git a/packages/internal-tooling/babel/index.js b/packages/internal-tooling/babel/index.js index dc8e69c4ff..9e07f9b582 100644 --- a/packages/internal-tooling/babel/index.js +++ b/packages/internal-tooling/babel/index.js @@ -20,7 +20,7 @@ module.exports = api => { modules: useESModules ? false : 'cjs', targets: isNode ? { node: '8' } : undefined, exclude: [ - // https://github.com/stardust-ui/react/pull/1895 + // https://github.com/microsoft/fluent-ui-react/pull/1895 'proposal-object-rest-spread', 'transform-async-to-generator', ], diff --git a/packages/internal-tooling/eslint/index.js b/packages/internal-tooling/eslint/index.js index aa927a99bc..b8cf2eddb7 100644 --- a/packages/internal-tooling/eslint/index.js +++ b/packages/internal-tooling/eslint/index.js @@ -13,7 +13,7 @@ module.exports = { 'import/no-unresolved': 'off', 'react/jsx-filename-extension': ['error', { extensions: ['.js', '.tsx'] }], - 'no-shadow': 'off', // https://github.com/stardust-ui/react/pull/1261#pullrequestreview-231005092 + 'no-shadow': 'off', // https://github.com/microsoft/fluent-ui-react/pull/1261#pullrequestreview-231005092 'no-unused-vars': 'off', // we use @typescript-eslint/no-unused-vars instead semi: ['error', 'never'], diff --git a/packages/playground/src/components/Checkbox/README.md b/packages/playground/src/components/Checkbox/README.md index 245edeea28..04d9cb1a14 100644 --- a/packages/playground/src/components/Checkbox/README.md +++ b/packages/playground/src/components/Checkbox/README.md @@ -12,11 +12,11 @@ The `Checkbox` component allows a user to choose between two mutually exclusive https://codesandbox.io/s/checkboxes-ggpx1 -Note about the Stardust example: there's some weirdness with how the theme providers are interacting with each other, the Stardust checkbox's styling is messing up as a result. +Note about the Fluent UI example: there's some weirdness with how the theme providers are interacting with each other, the Fluent UI checkbox's styling is messing up as a result. Fabric Checkbox [docs](https://developer.microsoft.com/en-us/fabric#/controls/web/Checkbox) -Stardust Checkbox [docs](https://microsoft.github.io/fluent-ui-react/components/checkbox/definition) +Fluent UI Checkbox [docs](https://microsoft.github.io/fluent-ui-react/components/checkbox/definition) Material UI Checkbox [docs](https://material-ui.com/components/checkboxes/) @@ -96,7 +96,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/checkbox | styles | IStyleFunctionOrObject| | | theme | ITheme | | -### Stardust Checkbox props +### Fluent UI Checkbox props | Name | Type | Notes | @@ -115,7 +115,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/checkbox | theme | ThemeInput | | | variables | any | | -### Differences of Fabric/Stardust to resolve +### Differences of Fabric/Fluent UI to resolve | Name | Type | Notes | | -------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------| @@ -188,7 +188,7 @@ Could consider supporting an invalid state/error state but this might just be su

``` -### Stardust Checkbox example DOM +### Fluent UI Checkbox example DOM ```html ``` -### Stardust Slider example DOM +### Fluent UI Slider example DOM - Extra wrapper div - input element to receive focus @@ -411,7 +411,7 @@ render() { | trackColorPressed | | | trackSize | | -NOTE! Stardust does not follow this convention. Slider currently uses these tokens: +NOTE! Fluent UI does not follow this convention. Slider currently uses these tokens: ``` activeThumbColor: string diff --git a/packages/react-bindings/package.json b/packages/react-bindings/package.json index 4b576cad1c..50fe3bb343 100644 --- a/packages/react-bindings/package.json +++ b/packages/react-bindings/package.json @@ -3,7 +3,7 @@ "description": "A set of components and hooks to build components libraries and UI kits.", "version": "0.41.1", "author": "Oleksandr Fediashov ", - "bugs": "https://github.com/stardust-ui/react/issues", + "bugs": "https://github.com/microsoft/fluent-ui-react/issues", "dependencies": { "@babel/runtime": "^7.1.2", "@fluentui/accessibility": "^0.41.1", @@ -16,7 +16,7 @@ "files": [ "dist" ], - "homepage": "https://github.com/stardust-ui/react/tree/master/packages/react-bindings", + "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/react-bindings", "jsnext:main": "dist/es/index.js", "license": "MIT", "main": "dist/commonjs/index.js", @@ -28,7 +28,7 @@ "publishConfig": { "access": "public" }, - "repository": "stardust-ui/react.git", + "repository": "microsoft/fluent-ui-react.git", "scripts": { "build": "cross-env TS_NODE_PROJECT=../../tsconfig.json gulp bundle:package:no-umd --package react-bindings" }, diff --git a/packages/react-bindings/src/FocusZone/FocusTrapZone.tsx b/packages/react-bindings/src/FocusZone/FocusTrapZone.tsx index fcf6dc12ec..4d227828d9 100644 --- a/packages/react-bindings/src/FocusZone/FocusTrapZone.tsx +++ b/packages/react-bindings/src/FocusZone/FocusTrapZone.tsx @@ -405,7 +405,7 @@ export default class FocusTrapZone extends React.Component", - "bugs": "https://github.com/stardust-ui/react/issues", + "bugs": "https://github.com/microsoft/fluent-ui-react/issues", "dependencies": { "@babel/runtime": "^7.1.2", "prop-types": "^15.7.2" @@ -15,7 +15,7 @@ "files": [ "dist" ], - "homepage": "https://github.com/stardust-ui/react/tree/master/packages/react-component-event-listener", + "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/react-component-event-listener", "jsnext:main": "dist/es/index.js", "license": "MIT", "main": "dist/commonjs/index.js", @@ -27,7 +27,7 @@ "publishConfig": { "access": "public" }, - "repository": "stardust-ui/react.git", + "repository": "microsoft/fluent-ui-react.git", "scripts": { "build": "gulp bundle:package:no-umd --package react-component-event-listener" }, diff --git a/packages/react-component-nesting-registry/package.json b/packages/react-component-nesting-registry/package.json index 82f6bf74d2..032ab529ca 100644 --- a/packages/react-component-nesting-registry/package.json +++ b/packages/react-component-nesting-registry/package.json @@ -3,7 +3,7 @@ "description": "Registers a DOM nodes within a context.", "version": "0.41.1", "author": "Oleksandr Fediashov ", - "bugs": "https://github.com/stardust-ui/react/issues", + "bugs": "https://github.com/microsoft/fluent-ui-react/issues", "dependencies": { "@babel/runtime": "^7.1.2", "prop-types": "^15.7.2" @@ -15,7 +15,7 @@ "files": [ "dist" ], - "homepage": "https://github.com/stardust-ui/react/tree/master/packages/react-component-nesting-registry", + "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/react-component-nesting-registry", "jsnext:main": "dist/es/index.js", "license": "MIT", "main": "dist/commonjs/index.js", @@ -27,7 +27,7 @@ "publishConfig": { "access": "public" }, - "repository": "stardust-ui/react.git", + "repository": "microsoft/fluent-ui-react.git", "scripts": { "build": "gulp bundle:package:no-umd --package react-component-nesting-registry" }, diff --git a/packages/react-component-ref/package.json b/packages/react-component-ref/package.json index 6c5f74e5eb..25adedbbc1 100644 --- a/packages/react-component-ref/package.json +++ b/packages/react-component-ref/package.json @@ -3,7 +3,7 @@ "description": "A set of components and utils to deal with React refs.", "version": "0.41.1", "author": "Oleksandr Fediashov ", - "bugs": "https://github.com/stardust-ui/react/issues", + "bugs": "https://github.com/microsoft/fluent-ui-react/issues", "dependencies": { "@babel/runtime": "^7.1.2", "prop-types": "^15.7.2", @@ -16,7 +16,7 @@ "files": [ "dist" ], - "homepage": "https://github.com/stardust-ui/react/tree/master/packages/react-component-ref", + "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/react-component-ref", "jsnext:main": "dist/es/index.js", "license": "MIT", "main": "dist/commonjs/index.js", @@ -28,7 +28,7 @@ "publishConfig": { "access": "public" }, - "repository": "stardust-ui/react.git", + "repository": "microsoft/fluent-ui-react.git", "scripts": { "build": "gulp bundle:package:no-umd --package react-component-ref" }, diff --git a/packages/react-proptypes/package.json b/packages/react-proptypes/package.json index c5f1ab965d..41cd87cce4 100644 --- a/packages/react-proptypes/package.json +++ b/packages/react-proptypes/package.json @@ -3,7 +3,7 @@ "description": "Set of custom reusable PropTypes for React components, some of them are specific for Stardust UI.", "version": "0.41.1", "author": "Oleksandr Fediashov ", - "bugs": "https://github.com/stardust-ui/react/issues", + "bugs": "https://github.com/microsoft/fluent-ui-react/issues", "dependencies": { "@babel/runtime": "^7.1.2", "lodash": "^4.17.15", @@ -16,7 +16,7 @@ "files": [ "dist" ], - "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", "jsnext:main": "dist/es/index.js", "license": "MIT", "main": "dist/commonjs/index.js", @@ -24,7 +24,7 @@ "publishConfig": { "access": "public" }, - "repository": "stardust-ui/react.git", + "repository": "microsoft/fluent-ui-react.git", "scripts": { "build": "gulp bundle:package:no-umd --package react-proptypes" }, diff --git a/packages/react/package.json b/packages/react/package.json index 2cc633ca19..8598b6afa4 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -3,7 +3,7 @@ "description": "A themable React component library.", "version": "0.41.1", "author": "Levi Thomason ", - "bugs": "https://github.com/stardust-ui/react/issues", + "bugs": "https://github.com/microsoft/fluent-ui-react/issues", "dependencies": { "@babel/runtime": "^7.1.2", "@fluentui/accessibility": "^0.41.1", @@ -36,7 +36,7 @@ "files": [ "dist" ], - "homepage": "https://github.com/stardust-ui/react#readme", + "homepage": "https://github.com/microsoft/fluent-ui-react#readme", "jsnext:main": "dist/es/index.js", "license": "MIT", "main": "dist/commonjs/index.js", @@ -48,7 +48,7 @@ "publishConfig": { "access": "public" }, - "repository": "stardust-ui/react.git", + "repository": "microsoft/fluent-ui-react.git", "scripts": { "build": "gulp bundle:package --package react" }, diff --git a/packages/react/src/components/Accordion/AccordionTitle.tsx b/packages/react/src/components/Accordion/AccordionTitle.tsx index 23b60afb21..c02647ca95 100644 --- a/packages/react/src/components/Accordion/AccordionTitle.tsx +++ b/packages/react/src/components/Accordion/AccordionTitle.tsx @@ -107,7 +107,7 @@ class AccordionTitle extends UIComponent, any> { renderComponent({ ElementType, classes, unhandledProps, styles, accessibility }) { const { contentRef, children, content, indicator, active } = this.props - const defaultIndicator = { name: active ? 'stardust-arrow-down' : 'stardust-arrow-end' } + const defaultIndicator = { name: active ? 'icon-arrow-down' : 'icon-arrow-end' } const indicatorWithDefaults = indicator === undefined ? defaultIndicator : indicator const contentElement = ( diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx index e63ea5ae43..ffe8455ec3 100644 --- a/packages/react/src/components/Box/Box.tsx +++ b/packages/react/src/components/Box/Box.tsx @@ -44,7 +44,7 @@ const Box = createComponent>({ Box.create = createShorthandFactory({ Component: Box }) /** - * A Box is a basic component, commonly used for slots in other Stardust components. + * A Box is a basic component, commonly used for slots in other Fluent UI components. * By default it just renders a `div`. */ export default withSafeTypeForAs(Box) diff --git a/packages/react/src/components/Carousel/CarouselNavigationItem.tsx b/packages/react/src/components/Carousel/CarouselNavigationItem.tsx index 545c02b966..f723156029 100644 --- a/packages/react/src/components/Carousel/CarouselNavigationItem.tsx +++ b/packages/react/src/components/Carousel/CarouselNavigationItem.tsx @@ -81,7 +81,7 @@ class CarouselNavigationItem extends UIComponent, Checkb outline: toggle && !this.state.checked, size: toggle ? 'medium' : 'smaller', className: Checkbox.slotClassNames.indicator, - name: toggle ? 'stardust-circle' : 'stardust-checkmark', + name: toggle ? 'icon-circle' : 'icon-checkmark', styles: toggle ? styles.toggle : styles.checkbox, }), })} diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx index a29dc1970d..4730bb9014 100644 --- a/packages/react/src/components/Dropdown/Dropdown.tsx +++ b/packages/react/src/components/Dropdown/Dropdown.tsx @@ -309,8 +309,8 @@ class Dropdown extends AutoControlledComponent, Dropdo static defaultProps = { align: 'start', as: 'div', - checkableIndicator: 'stardust-checkmark', - clearIndicator: 'stardust-close', + checkableIndicator: 'icon-checkmark', + clearIndicator: 'icon-close', itemToString: item => { if (!item || React.isValidElement(item)) { return '' diff --git a/packages/react/src/components/Embed/Embed.tsx b/packages/react/src/components/Embed/Embed.tsx index 298f86aaf2..eede8a4373 100644 --- a/packages/react/src/components/Embed/Embed.tsx +++ b/packages/react/src/components/Embed/Embed.tsx @@ -200,7 +200,7 @@ class Embed extends AutoControlledComponent, EmbedState> defaultProps: () => ({ className: Embed.slotClassNames.control, circular: true, - name: active ? 'stardust-pause' : 'stardust-play', + name: active ? 'icon-pause' : 'icon-play', size: 'largest', styles: styles.control, }), diff --git a/packages/react/src/components/Flex/FlexItem.tsx b/packages/react/src/components/Flex/FlexItem.tsx index 76f66412e1..538fa30b26 100644 --- a/packages/react/src/components/Flex/FlexItem.tsx +++ b/packages/react/src/components/Flex/FlexItem.tsx @@ -122,7 +122,7 @@ const applyStyles = ( }) } - // assuming element is Stardust element + // assuming element is Fluent UI element return React.cloneElement(element, { styles: mergeStyles(styles.root || {}, element.props.styles), }) diff --git a/packages/react/src/components/Input/Input.tsx b/packages/react/src/components/Input/Input.tsx index 54e5ef0545..30a4945d0e 100644 --- a/packages/react/src/components/Input/Input.tsx +++ b/packages/react/src/components/Input/Input.tsx @@ -211,7 +211,7 @@ class Input extends AutoControlledComponent, InputState> const { value } = this.state if (clearable && (value as string).length !== 0) { - return 'stardust-close' + return 'icon-close' } return icon || null diff --git a/packages/react/src/components/Menu/MenuItem.tsx b/packages/react/src/components/Menu/MenuItem.tsx index 47e830aa03..0ae3ee368e 100644 --- a/packages/react/src/components/Menu/MenuItem.tsx +++ b/packages/react/src/components/Menu/MenuItem.tsx @@ -213,7 +213,7 @@ class MenuItem extends AutoControlledComponent, MenuIt } = this.props const { menuOpen } = this.state - const defaultIndicator = { name: vertical ? 'stardust-arrow-end' : 'stardust-arrow-down' } + const defaultIndicator = { name: vertical ? 'icon-arrow-end' : 'icon-arrow-down' } const indicatorWithDefaults = indicator === undefined ? defaultIndicator : indicator const targetRef = toRefObject(this.context.target) @@ -244,7 +244,7 @@ class MenuItem extends AutoControlledComponent, MenuIt {menu && Icon.create(indicatorWithDefaults, { defaultProps: () => ({ - name: vertical ? 'stardust-menu-arrow-end' : 'stardust-menu-arrow-down', + name: vertical ? 'icon-menu-arrow-end' : 'icon-menu-arrow-down', styles: styles.indicator, }), })} diff --git a/packages/react/src/components/Provider/Provider.tsx b/packages/react/src/components/Provider/Provider.tsx index 89c7ad6c79..fe4803bfa5 100644 --- a/packages/react/src/components/Provider/Provider.tsx +++ b/packages/react/src/components/Provider/Provider.tsx @@ -43,7 +43,7 @@ export interface ProviderProps extends ChildrenComponentProps { } /** - * The Provider passes the CSS-in-JS renderer, theme styles and other settings to Stardust components. + * The Provider passes the CSS-in-JS renderer, theme styles and other settings to Fluent UI components. */ class Provider extends React.Component> { static displayName = 'Provider' diff --git a/packages/react/src/components/Provider/ProviderBox.tsx b/packages/react/src/components/Provider/ProviderBox.tsx index 0c9948fcde..397649fe01 100644 --- a/packages/react/src/components/Provider/ProviderBox.tsx +++ b/packages/react/src/components/Provider/ProviderBox.tsx @@ -39,7 +39,7 @@ const ProviderBox = createComponent>({ }) /** - * The ProviderBox passes the CSS-in-JS renderer, theme styles and other settings to Stardust components. + * The ProviderBox passes the CSS-in-JS renderer, theme styles and other settings to Fluent UI components. * Also, being comapred to Provider, it additionally renders an element to the DOM (`div` by default). */ export default withSafeTypeForAs(ProviderBox) diff --git a/packages/react/src/components/Provider/ProviderConsumer.tsx b/packages/react/src/components/Provider/ProviderConsumer.tsx index 587ef54fd1..35d4b4f3ab 100644 --- a/packages/react/src/components/Provider/ProviderConsumer.tsx +++ b/packages/react/src/components/Provider/ProviderConsumer.tsx @@ -14,7 +14,7 @@ export interface ProviderConsumerProps { } /** - * A ProviderConsumer is used to consume Stardust context from Provider. + * A ProviderConsumer is used to consume Fluent UI context from Provider. */ const ProviderConsumer: React.FunctionComponent = ({ render }) => ( {(context: ProviderContextPrepared) => render(context.theme)} diff --git a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx index 4fc5f62aee..ac9c24999f 100644 --- a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx +++ b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx @@ -135,7 +135,7 @@ class RadioGroupItem extends AutoControlledComponent< {...unhandledProps} {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)} > - {Icon.create(icon || 'stardust-circle', { + {Icon.create(icon || 'icon-circle', { defaultProps: () => ({ size: 'small', styles: styles.icon, diff --git a/packages/react/src/components/SplitButton/SplitButton.tsx b/packages/react/src/components/SplitButton/SplitButton.tsx index 8257437330..b8f54fcaf6 100644 --- a/packages/react/src/components/SplitButton/SplitButton.tsx +++ b/packages/react/src/components/SplitButton/SplitButton.tsx @@ -204,7 +204,7 @@ class SplitButton extends AutoControlledComponent, defaultProps: () => ({ className: SplitButton.slotClassNames.toggleButton, disabled, - icon: 'stardust-arrow-down', + icon: 'icon-arrow-down', iconOnly: true, primary, secondary, diff --git a/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx b/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx index a49f57157c..55b5a709f0 100644 --- a/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx +++ b/packages/react/src/components/Toolbar/ToolbarMenuItem.tsx @@ -155,8 +155,8 @@ class ToolbarMenuItem extends AutoControlledComponent< static defaultProps = { as: 'button', accessibility: toolbarMenuItemBehavior as Accessibility, - activeIndicator: 'stardust-checkmark', - submenuIndicator: 'stardust-menu-arrow-end', + activeIndicator: 'icon-checkmark', + submenuIndicator: 'icon-menu-arrow-end', wrapper: { as: 'li' }, } @@ -310,7 +310,7 @@ class ToolbarMenuItem extends AutoControlledComponent< {menu && Icon.create(submenuIndicator, { defaultProps: () => ({ - name: 'stardust-menu-arrow-end', + name: 'icon-menu-arrow-end', styles: styles.submenuIndicator, }), })} diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts index defe9dd0d7..715bd676e7 100644 --- a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts +++ b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts @@ -178,7 +178,7 @@ import windowMinimize from './windowMinimize' import windowRestore from './windowRestore' export default { - 'stardust-circle': stardustCircle, + 'icon-circle': stardustCircle, accept, add, 'arrow-up': arrowUp, diff --git a/packages/react/src/themes/teams/components/Icon/svg/types.ts b/packages/react/src/themes/teams/components/Icon/svg/types.ts index 87eca204f2..60fa50bc34 100644 --- a/packages/react/src/themes/teams/components/Icon/svg/types.ts +++ b/packages/react/src/themes/teams/components/Icon/svg/types.ts @@ -10,7 +10,7 @@ export type SvgIconSpecWithStyles = { export type TeamsSvgIconSpec = SvgIconSpec | SvgIconSpecWithStyles // TEMPORARY, till the moment when all necessary Teams icons will be moved -// to this Stardust theme +// to this Fluent UI theme export type TeamsProcessedSvgIconSpec = SvgIconSpecWithStyles & { exportedAs?: string } diff --git a/packages/react/src/themes/teams/index.tsx b/packages/react/src/themes/teams/index.tsx index 6c4346718e..08738f55ca 100644 --- a/packages/react/src/themes/teams/index.tsx +++ b/packages/react/src/themes/teams/index.tsx @@ -37,16 +37,16 @@ const themeIcons: ThemeIcons = Object.keys( const icons: ThemeIcons = { ...themeIcons, - 'stardust-checkmark': themeIcons['accept'], - 'stardust-circle': themeIcons['stardust-circle'], - 'stardust-close': themeIcons['close'], - 'stardust-arrow-up': themeIcons['triangle-up'], - 'stardust-arrow-down': themeIcons['triangle-down'], - 'stardust-arrow-end': themeIcons['triangle-right'], - 'stardust-menu-arrow-down': themeIcons['chevron-down-medium'], - 'stardust-menu-arrow-end': themeIcons['chevron-right-medium'], - 'stardust-pause': themeIcons['pause'], - 'stardust-play': themeIcons['play'], + 'icon-checkmark': themeIcons['accept'], + 'icon-circle': themeIcons['icon-circle'], + 'icon-close': themeIcons['close'], + 'icon-arrow-up': themeIcons['triangle-up'], + 'icon-arrow-down': themeIcons['triangle-down'], + 'icon-arrow-end': themeIcons['triangle-right'], + 'icon-menu-arrow-down': themeIcons['chevron-down-medium'], + 'icon-menu-arrow-end': themeIcons['chevron-right-medium'], + 'icon-pause': themeIcons['pause'], + 'icon-play': themeIcons['play'], } const teamsTheme: ThemePrepared = createTheme( diff --git a/packages/react/src/themes/teams/withProcessedIcons.ts b/packages/react/src/themes/teams/withProcessedIcons.ts index c808a51448..259e280bbe 100644 --- a/packages/react/src/themes/teams/withProcessedIcons.ts +++ b/packages/react/src/themes/teams/withProcessedIcons.ts @@ -31,10 +31,10 @@ const processedIcons: ThemeIcons = Object.keys( const theme: ThemeInput = { icons: { ...processedIcons, - 'stardust-close': processedIcons['close'], - 'stardust-arrow-up': processedIcons['triangle-up'], - 'stardust-arrow-down': processedIcons['triangle-down'], - 'stardust-arrow-end': processedIcons['triangle-right'], + 'icon-close': processedIcons['close'], + 'icon-arrow-up': processedIcons['triangle-up'], + 'icon-arrow-down': processedIcons['triangle-down'], + 'icon-arrow-end': processedIcons['triangle-right'], 'stardust-chevron-start': processedIcons['chevron-start'], 'stardust-chevron-end': processedIcons['chevron-end'], }, diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts index a6092db68f..571c2ece0b 100644 --- a/packages/react/src/themes/types.ts +++ b/packages/react/src/themes/types.ts @@ -568,14 +568,14 @@ export type ThemeIconSpec = { } export type RequiredIconNames = - | 'stardust-checkmark' - | 'stardust-circle' - | 'stardust-close' - | 'stardust-arrow-end' - | 'stardust-arrow-up' - | 'stardust-arrow-down' - | 'stardust-pause' - | 'stardust-play' + | 'icon-checkmark' + | 'icon-circle' + | 'icon-close' + | 'icon-arrow-end' + | 'icon-arrow-up' + | 'icon-arrow-down' + | 'icon-pause' + | 'icon-play' | 'stardust-chevron-start' | 'stardust-chevron-end' diff --git a/packages/react/src/utils/factories.ts b/packages/react/src/utils/factories.ts index 4bedda3260..8c0f4855c8 100644 --- a/packages/react/src/utils/factories.ts +++ b/packages/react/src/utils/factories.ts @@ -61,9 +61,9 @@ export function createShorthand

({ if (process.env.NODE_ENV !== 'production') { console.warn( [ - '@stardust-ui/react:', + '@microsoft/fluent-ui-react:', 'The usage of render callback is deprecated and will be removed soon. Please use render props for shorthands instead.', - 'See: https://stardust-ui.github.io/react/shorthand-props', + 'See: https://microsoft.github.io/fluent-ui-react/shorthand-props', ].join(' '), ) } diff --git a/packages/react/test/specs/components/Carousel/Carousel-test.tsx b/packages/react/test/specs/components/Carousel/Carousel-test.tsx index cc6aa771ff..ad53567594 100644 --- a/packages/react/test/specs/components/Carousel/Carousel-test.tsx +++ b/packages/react/test/specs/components/Carousel/Carousel-test.tsx @@ -204,7 +204,7 @@ describe('Carousel', () => { describe('navigation', () => { const navigation = { - items: items.map(item => ({ key: item.key, icon: { name: 'stardust-circle' } })), + items: items.map(item => ({ key: item.key, icon: { name: 'icon-circle' } })), } afterEach(() => { diff --git a/packages/react/test/specs/components/Input/Input-test.tsx b/packages/react/test/specs/components/Input/Input-test.tsx index d036aceb31..baa1d2f490 100644 --- a/packages/react/test/specs/components/Input/Input-test.tsx +++ b/packages/react/test/specs/components/Input/Input-test.tsx @@ -131,7 +131,7 @@ describe('Input', () => { const inputComp = mount() const domNode = getInputDomNode(inputComp) setUserInputValue(inputComp, testValue) // user types into the input - const iconComp = inputComp.find('Icon[name="stardust-close"]') + const iconComp = inputComp.find('Icon[name="icon-close"]') expect(domNode.value).toEqual(testValue) // input value is the one typed by the user expect(iconComp.length).toBeGreaterThan(0) // the 'x' icon appears @@ -139,7 +139,7 @@ describe('Input', () => { iconComp.simulate('click') // user clicks on 'x' icon expect(domNode.value).toEqual('') // input value gets cleared - expect(inputComp.find('Icon[name="stardust-close"]').length).toEqual(0) // the 'x' icon disappears + expect(inputComp.find('Icon[name="icon-close"]').length).toEqual(0) // the 'x' icon disappears }) }) }) diff --git a/packages/react/test/specs/components/Popup/Popup-test.tsx b/packages/react/test/specs/components/Popup/Popup-test.tsx index b18fe4165a..bc58a18e46 100644 --- a/packages/react/test/specs/components/Popup/Popup-test.tsx +++ b/packages/react/test/specs/components/Popup/Popup-test.tsx @@ -67,7 +67,7 @@ describe('Popup', () => { expect(spy.mock.calls[0][1]).toMatchObject({ open: true }) }) - // https://github.com/stardust-ui/react/pull/619 + // https://github.com/microsoft/fluent-ui-react/pull/619 test('is called on click when controlled', () => { const spy = jest.fn() @@ -90,7 +90,7 @@ describe('Popup', () => { expect(spy.mock.calls[0][1]).toMatchObject({ open: true }) }) - // https://github.com/stardust-ui/react/pull/619 + // https://github.com/microsoft/fluent-ui-react/pull/619 test('is called on contextmenu when controlled', () => { const spy = jest.fn() diff --git a/packages/react/test/specs/components/Tooltip/Tooltip-test.tsx b/packages/react/test/specs/components/Tooltip/Tooltip-test.tsx index 830827d4c2..bdad790570 100644 --- a/packages/react/test/specs/components/Tooltip/Tooltip-test.tsx +++ b/packages/react/test/specs/components/Tooltip/Tooltip-test.tsx @@ -43,7 +43,7 @@ describe('Tooltip', () => { ) }) - // https://github.com/stardust-ui/react/pull/619 + // https://github.com/microsoft/fluent-ui-react/pull/619 test('is called on hover when controlled', () => { const onOpenChange = jest.fn() diff --git a/packages/state/README.md b/packages/state/README.md index 4198f1b894..b91af74bb2 100644 --- a/packages/state/README.md +++ b/packages/state/README.md @@ -46,4 +46,4 @@ const manager = createInputManager({ state: { value: "Hello world!" } }); # Usage with React -We provide React bindings under [`@fluentui/react-bindings`](https://github.com/stardust-ui/react/tree/master/packages/react-bindings). +We provide React bindings under [`@fluentui/react-bindings`](https://github.com/microsoft/fluent-ui-react/tree/master/packages/react-bindings). diff --git a/packages/state/package.json b/packages/state/package.json index 958b09e876..6ef199a885 100644 --- a/packages/state/package.json +++ b/packages/state/package.json @@ -3,7 +3,7 @@ "description": "A set of utils to create framework agnostic and reusable state managers", "version": "0.41.1", "author": "Oleksandr Fediashov ", - "bugs": "https://github.com/stardust-ui/react/issues", + "bugs": "https://github.com/microsoft/fluent-ui-react/issues", "dependencies": { "@babel/runtime": "^7.1.2" }, @@ -14,7 +14,7 @@ "files": [ "dist" ], - "homepage": "https://github.com/stardust-ui/react/tree/master/packages/state", + "homepage": "https://github.com/microsoft/fluent-ui-react/tree/master/packages/state", "jsnext:main": "dist/es/index.js", "license": "MIT", "main": "dist/commonjs/index.js", @@ -22,7 +22,7 @@ "publishConfig": { "access": "public" }, - "repository": "stardust-ui/react.git", + "repository": "microsoft/fluent-ui-react.git", "scripts": { "build": "cross-env TS_NODE_PROJECT=../../tsconfig.json gulp bundle:package:no-umd --package state" }, diff --git a/perf/doc/perf.md b/perf/doc/perf.md index 12fcaee875..31392ddc68 100644 --- a/perf/doc/perf.md +++ b/perf/doc/perf.md @@ -2,14 +2,14 @@ *You can't improve what you can't measure.* -As part of Stardust build pipeline we run a set of performance tests in order to avoid any regressions. This document describes the workflow. +As part of Fluent UI build pipeline we run a set of performance tests in order to avoid any regressions. This document describes the workflow. ## Measures ### Performance examples -For individual Stardust components there are usage examples in public docsite. Besides these *usage* examples there are also *performance* examples (currently not available in the public docsite). Compared to *usage* examples, *performance* examples render components with more data (ie list of 30 chat messages) so it takes more time (~100ms) to render them and makes any changes in render times visible (and distinguishable from jitter). +For individual Fluent UI components there are usage examples in public docsite. Besides these *usage* examples there are also *performance* examples (currently not available in the public docsite). Compared to *usage* examples, *performance* examples render components with more data (ie list of 30 chat messages) so it takes more time (~100ms) to render them and makes any changes in render times visible (and distinguishable from jitter). -Current perf examples measure performance of a single component. At the moment there are no compound perf examples, like a whole page built using several Stardust components. +Current perf examples measure performance of a single component. At the moment there are no compound perf examples, like a whole page built using several Fluent UI components. ### Getting the numbers To get a performance number, [Puppeteer](https://github.com/GoogleChrome/puppeteer) is used to render a performance example in headless Chrome and measure the **first render time**. @@ -19,7 +19,7 @@ To stabilize the numbers, the example is rendered 50 times and median value is u ## Workflow 1. With each GIT commit, build pipeline is executed in CircleCI. As part of the build, we run the performance tests for all performance examples. 2. Performance results are then stored to an external storage. -3. In Stardust docsite running locally (not currently available in public docsite, https://stardust-ui.github.io/react/) for each measured component a performance chart is displayed, showing measures from the last 50 test runs. +3. In Fluent UI docsite running locally (not currently available in public docsite, https://microsoft.github.io/fluent-ui-react/) for each measured component a performance chart is displayed, showing measures from the last 50 test runs. The following picture shows a chart for `Chat` component: ![Chart example](perf_chart.png) @@ -46,8 +46,8 @@ Bundle size numbers are stored at the same infrastructure used for storing perfo ## Future plans - explore possible ways to make the measurements more stable - add perf examples (charts) for more components and more variants -- add perf examples for compound examples (whole app page example built with multiple Stardust components) -- make perf charts available in public docsite (https://stardust-ui.github.io/react/) +- add perf examples for compound examples (whole app page example built with multiple Fluent UI components) +- make perf charts available in public docsite (https://microsoft.github.io/fluent-ui-react/) - make bundle size charts available in docsite ## FAQ From 5b746b89d666643f8df11713b2a4ef6e37dbe0b2 Mon Sep 17 00:00:00 2001 From: Levi Thomason Date: Wed, 11 Dec 2019 16:53:52 -0800 Subject: [PATCH 02/13] there are so many --- .../createPackageJson.ts | 2 +- docs/src/views/FAQ.tsx | 24 +++++++++---------- packages/perf-test/.digest/config.tsx | 2 +- .../src/components/Carousel/Carousel.tsx | 4 ++-- .../teams/components/Icon/svg/icons/index.ts | 4 ++-- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts index 32382ef413..f13b636283 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentControlsCodeSandbox/createPackageJson.ts @@ -3,7 +3,7 @@ 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 Fluent UI React, https://microsoft.github.io/fluent-ui-react/' const dependencies = { diff --git a/docs/src/views/FAQ.tsx b/docs/src/views/FAQ.tsx index 4915799b12..736b4f0378 100644 --- a/docs/src/views/FAQ.tsx +++ b/docs/src/views/FAQ.tsx @@ -17,11 +17,11 @@ export default () => (

  • {link('General', '#General')}
      -
    • {link('Does Stardust support mobile?', '#does-stardust-support-mobile')}
      • +
    • {link('Does Fluent UI support mobile?', '#does-fluent-ui-support-mobile')}
    • {link( - "How can @mixins be used in the Stardust's styles?", - '#how-can-mixins-be-used-in-the-stardusts-styles', + "How can @mixins be used in the Fluent UI's styles?", + '#how-can-mixins-be-used-in-the-fluent-uis-styles', )}
    • @@ -50,23 +50,23 @@ export default () => (
    • {link('Teams Specific', '#teams-specific')}
        -
      • {link('How to add Icons to Stardust?', '#how-to-add-icons-to-stardust')}
        • +
      • {link('How to add Icons to Fluent UI?', '#how-to-add-icons-to-fluent-ui')}
    - + - + - As the styles in Stardust are defined using CSS in JS, mixins can be defined as simple + As the styles in Fluent UI are defined using CSS in JS, mixins can be defined as simple functions that can be reused on multiple places.
    - For example, in Stardust the method 'getBorderFocusStyles' is re-used multiple times in + For example, in Fluent UI the method 'getBorderFocusStyles' is re-used multiple times in many component styles.

    } @@ -106,7 +106,7 @@ export default () => ( - Just as with vanilla React, all HTML props are supported on all Stardust components. Just + Just as with vanilla React, all HTML props are supported on all Fluent UI components. Just pass onLoad or onError to the component you want to put the prop on. ( component.

    - {code('Box')} is a utility component that is often used by Stardust to implement + {code('Box')} is a utility component that is often used by Fluent UI to implement higher-level components. By default, it renders styled {code('div')} element.

    @@ -158,7 +158,7 @@ export default () => ( /> - + @@ -178,7 +178,7 @@ export default () => ( value={` import { themes } from '@fluentui/react' - // 💡 Your overrides should be defined before rendering any Stardust components + // 💡 Your overrides should be defined before rendering any Fluent UI components // will remove all existing fontFaces themes.teams.fontFaces = [] diff --git a/packages/perf-test/.digest/config.tsx b/packages/perf-test/.digest/config.tsx index 9637beb013..4265a90fa9 100644 --- a/packages/perf-test/.digest/config.tsx +++ b/packages/perf-test/.digest/config.tsx @@ -37,7 +37,7 @@ function loadStories() { // https://github.com/storybookjs/storybook/blob/5484720791e7621e9a164d58fbe79db49db1522d/lib/client-api/src/story_store.ts#L191 // This code should behave the same way. if (matches) { - // TODO: stardust-ui storybook "config" seems to assume differing story file formats from CSF: only one story per file, naming, etc. + // TODO: fluent-ui storybook "config" seems to assume differing story file formats from CSF: only one story per file, naming, etc. // This code was modified to support multiple stories per file. Variable naming follows storybook CSF convention. // https://storybook.js.org/docs/testing/automated-visual-testing/#custom-solutions let kindName diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx index 0542f618ed..14d84d1d19 100644 --- a/packages/react/src/components/Carousel/Carousel.tsx +++ b/packages/react/src/components/Carousel/Carousel.tsx @@ -329,7 +329,7 @@ class Carousel extends AutoControlledComponent, Carous defaultProps: () => ({ className: Carousel.slotClassNames.paddlePrevious, iconOnly: true, - icon: 'stardust-chevron-start', + icon: 'icon-chevron-start', styles: styles.paddlePrevious, ...accessibility.attributes.paddlePrevious, ...applyAccessibilityKeyHandlers( @@ -346,7 +346,7 @@ class Carousel extends AutoControlledComponent, Carous defaultProps: () => ({ className: Carousel.slotClassNames.paddleNext, iconOnly: true, - icon: 'stardust-chevron-end', + icon: 'icon-chevron-end', styles: styles.paddleNext, ...accessibility.attributes.paddleNext, ...applyAccessibilityKeyHandlers(accessibility.keyHandlers.paddleNext, paddleNext), diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts index 715bd676e7..5e9c079ff6 100644 --- a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts +++ b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts @@ -215,8 +215,8 @@ export default { 'canvas-add-page': canvasAddPage, chat, 'chevron-down': chevronDown, - 'stardust-chevron-start': chevronStart, - 'stardust-chevron-end': chevronEnd, + 'icon-chevron-start': chevronStart, + 'icon-chevron-end': chevronEnd, 'chevron-down-medium': chevronDownMedium, 'chevron-right-medium': chevronRightMedium, 'clipboard-copied-to': clipboardCopiedTo, From 38ca0ceb2be75af1ea4817a8391942f6463a3992 Mon Sep 17 00:00:00 2001 From: Levi Thomason Date: Wed, 11 Dec 2019 16:56:49 -0800 Subject: [PATCH 03/13] there are still more --- .../utils/getRuntimeDependencies.ts | 4 +-- build/gulp/tasks/test-projects.ts | 26 +++++++++---------- build/webpack.config.ts | 2 +- 3 files changed, 16 insertions(+), 16 deletions(-) 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-projects.ts b/build/gulp/tasks/test-projects.ts index b7f0d3d6a2..f35fc6e539 100644 --- a/build/gulp/tasks/test-projects.ts +++ b/build/gulp/tasks/test-projects.ts @@ -44,28 +44,28 @@ const addResolutionPathsForStardustPackages = async ( const packStardustPackages = 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) => { + Object.keys(projectPackages).map(async (packageName: string) => { const filename = tmp.tmpNameSync({ prefix: `project-`, postfix: '.tgz' }) - const directory = stardustPackages[packageName] + 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 => { @@ -133,7 +133,7 @@ const performBrowserTest = async (publicDirectory: string, listenPort: number) = // Tests the following scenario // - Create a new react test app // - Add Fluent UI as a app's dependency -// - Update the App.tsx to include some stardust imports +// - 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') @@ -148,14 +148,14 @@ task('test:projects:cra-ts', async () => { 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) await runInTestApp(`yarn add ${packedPackages['@fluentui/react']}`) logger(`✔️Stardust 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..') 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, }, }), From b53e84fe2b24fca27f236a37d8f3c005f2027e7b Mon Sep 17 00:00:00 2001 From: Levi Thomason Date: Wed, 11 Dec 2019 17:26:38 -0800 Subject: [PATCH 04/13] you guessed it, plus bunch of breaks --- docs/src/components/CategoryColorSchemes.tsx | 2 +- docs/src/components/ColorBox.tsx | 9 +-------- docs/src/components/ColorSchemes.tsx | 2 +- docs/src/components/ColorVariants.tsx | 2 +- docs/src/components/Fader.tsx | 2 +- .../CopyToClipboard/NotificationProvider.tsx | 2 +- jest.config.js | 8 ++++---- packages/react/src/components/Debug/Debug.tsx | 6 +++--- .../components/Debug/DebugComponentViewer.tsx | 4 ++-- .../react/src/components/Debug/FiberNavigator.ts | 4 ++-- .../teams/components/Icon/svg/icons/index.ts | 4 ++-- .../react/src/themes/teams/withProcessedIcons.ts | 4 ++-- packages/react/src/utils/UIComponent.tsx | 4 ++-- packages/react/src/utils/createComponent.ts | 16 ++++++++-------- .../react/src/utils/createStardustComponent.tsx | 10 +++++----- packages/react/src/utils/debug/debugEnabled.ts | 10 +++++----- 16 files changed, 41 insertions(+), 48 deletions(-) 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/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/prototypes/CopyToClipboard/NotificationProvider.tsx b/docs/src/prototypes/CopyToClipboard/NotificationProvider.tsx index c4f6665627..4b2e543d54 100644 --- a/docs/src/prototypes/CopyToClipboard/NotificationProvider.tsx +++ b/docs/src/prototypes/CopyToClipboard/NotificationProvider.tsx @@ -46,7 +46,7 @@ export const NotificationProvider: React.FC = props => { export const Notification = createComponent({ displayName: 'Notification', - render: ({ target, trigger, content, stardust: { classes } }) => { + render: ({ target, trigger, content, config: { classes } }) => { const tooltipProps: TooltipProps = { content, open: true, diff --git a/jest.config.js b/jest.config.js index 7b55284d34..463eb1c166 100644 --- a/jest.config.js +++ b/jest.config.js @@ -3,14 +3,14 @@ const { rollup: lernaAliases } = require('lerna-alias') // packages/react/src -> packages/react, // as lernaAliases append 'src' by default -const stardustPackages = lernaAliases({ sourceDirectory: false }) +const projectPackages = lernaAliases({ sourceDirectory: false }) -// Excludes the non-stardust packages +// Excludes the non-project packages const excluded = ['@fluentui/playground', '@fluentui/react-theming'] -const projects = Object.keys(stardustPackages) +const projects = Object.keys(projectPackages) .filter(p => !excluded.includes(p)) - .map(packageName => stardustPackages[packageName]) + .map(packageName => projectPackages[packageName]) module.exports = { coverageReporters, diff --git a/packages/react/src/components/Debug/Debug.tsx b/packages/react/src/components/Debug/Debug.tsx index 1dcf692b14..0887262487 100644 --- a/packages/react/src/components/Debug/Debug.tsx +++ b/packages/react/src/components/Debug/Debug.tsx @@ -65,7 +65,7 @@ class Debug extends React.Component { ) return } - if (!r.stardustDebug) { + if (!r.fluentUIDebug) { console.error('Not a debuggable component. Try selecting some Stardust component.') return } @@ -82,7 +82,7 @@ class Debug extends React.Component { return } - fiberNav = fiberNav.findOwner(fiber => fiber.stardustDebug) + fiberNav = fiberNav.findOwner(fiber => fiber.fluentUIDebug) if (fiberNav !== this.state.fiberNav) { this.setState({ fiberNav }) @@ -174,7 +174,7 @@ class Debug extends React.Component { onClose={this.close} // TODO: Integrate CSS in JS Styles for Host Components (DOM nodes) // cssStyles={stylesForNode(stardustDOMNode)} - debugData={fiberNav.stardustDebug} + debugData={fiberNav.fluentUIDebug} position={debugPanelPosition || 'right'} onPositionLeft={this.positionLeft} onPositionRight={this.positionRight} diff --git a/packages/react/src/components/Debug/DebugComponentViewer.tsx b/packages/react/src/components/Debug/DebugComponentViewer.tsx index 52e1e27ad7..e991f51c19 100644 --- a/packages/react/src/components/Debug/DebugComponentViewer.tsx +++ b/packages/react/src/components/Debug/DebugComponentViewer.tsx @@ -30,7 +30,7 @@ const DebugComponentViewer: React.FC = props => { let parentNav = fiberNav.parent while (parentNav && !parentNav.isEqual(ownerNav)) { - if (parentNav.stardustDebug) parentNavs.unshift(parentNav) + if (parentNav.fluentUIDebug) parentNavs.unshift(parentNav) parentNav = parentNav.parent } } @@ -41,7 +41,7 @@ const DebugComponentViewer: React.FC = props => { { diff --git a/packages/react/src/components/Debug/FiberNavigator.ts b/packages/react/src/components/Debug/FiberNavigator.ts index 6cde329220..c94ef51b49 100644 --- a/packages/react/src/components/Debug/FiberNavigator.ts +++ b/packages/react/src/components/Debug/FiberNavigator.ts @@ -341,8 +341,8 @@ class FiberNavigator { return this.__fiber.elementType } - get stardustDebug() { - return this.instance && this.instance.stardustDebug ? this.instance.stardustDebug : null + get fluentUIDebug() { + return this.instance && this.instance.fluentUIDebug ? this.instance.fluentUIDebug : null } get jsxString() { diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts index 5e9c079ff6..61368f54b5 100644 --- a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts +++ b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts @@ -145,7 +145,7 @@ import send from './send' import settings from './settings' import speakerMute from './speakerMute' import star from './star' -import stardustCircle from './stardustCircle' +import iconCircle from './iconCircle' import sticker from './sticker' import strike from './strike' import sync from './sync' @@ -178,7 +178,7 @@ import windowMinimize from './windowMinimize' import windowRestore from './windowRestore' export default { - 'icon-circle': stardustCircle, + 'icon-circle': iconCircle, accept, add, 'arrow-up': arrowUp, diff --git a/packages/react/src/themes/teams/withProcessedIcons.ts b/packages/react/src/themes/teams/withProcessedIcons.ts index 259e280bbe..73935c1edf 100644 --- a/packages/react/src/themes/teams/withProcessedIcons.ts +++ b/packages/react/src/themes/teams/withProcessedIcons.ts @@ -35,8 +35,8 @@ const theme: ThemeInput = { 'icon-arrow-up': processedIcons['triangle-up'], 'icon-arrow-down': processedIcons['triangle-down'], 'icon-arrow-end': processedIcons['triangle-right'], - 'stardust-chevron-start': processedIcons['chevron-start'], - 'stardust-chevron-end': processedIcons['chevron-end'], + 'icon-chevron-start': processedIcons['chevron-start'], + 'icon-chevron-end': processedIcons['chevron-end'], }, } diff --git a/packages/react/src/utils/UIComponent.tsx b/packages/react/src/utils/UIComponent.tsx index fac690eaac..bcd5dfd014 100644 --- a/packages/react/src/utils/UIComponent.tsx +++ b/packages/react/src/utils/UIComponent.tsx @@ -31,7 +31,7 @@ class UIComponent extends React.Component { actionHandlers: AccessibilityActionHandlers // stores debug information - stardustDebug: any = null + fluentUIDebug: any = null constructor(props, context) { super(props, context) @@ -61,7 +61,7 @@ class UIComponent extends React.Component { state: this.state, actionHandlers: this.actionHandlers, render: this.renderComponent, - saveDebug: updatedDebug => (this.stardustDebug = updatedDebug), + saveDebug: updatedDebug => (this.fluentUIDebug = updatedDebug), }, this.context, ) diff --git a/packages/react/src/utils/createComponent.ts b/packages/react/src/utils/createComponent.ts index 1fd9b5efc1..bcb544ba4f 100644 --- a/packages/react/src/utils/createComponent.ts +++ b/packages/react/src/utils/createComponent.ts @@ -39,7 +39,7 @@ const createComponent =

    = any>({ ...(defaultProps as any), } - const StardustComponent: CreateComponentReturnType

    = (props): React.ReactElement

    => { + const FluentComponent: CreateComponentReturnType

    = (props): React.ReactElement

    => { // Stores debug information for component. // Note that this ref should go as the first one, to be discoverable by debug utils. const ref = React.useRef(null) @@ -55,26 +55,26 @@ const createComponent =

    = any>({ state: {}, actionHandlers, render: config => render(config, props), - saveDebug: stardustDebug => (ref.current = { stardustDebug }), + saveDebug: fluentUIDebug => (ref.current = { fluentUIDebug }), }, context, ) } - StardustComponent.className = className + FluentComponent.className = className - StardustComponent.create = createShorthandFactory({ + FluentComponent.create = createShorthandFactory({ Component: mergedDefaultProps.as, mappedProp: shorthandPropName, }) - StardustComponent.displayName = displayName + FluentComponent.displayName = displayName - StardustComponent.propTypes = propTypes // TODO: generate prop types + FluentComponent.propTypes = propTypes // TODO: generate prop types - StardustComponent.defaultProps = mergedDefaultProps + FluentComponent.defaultProps = mergedDefaultProps - return StardustComponent + return FluentComponent } export default createComponent diff --git a/packages/react/src/utils/createStardustComponent.tsx b/packages/react/src/utils/createStardustComponent.tsx index 051148cd69..3bf3e34c76 100644 --- a/packages/react/src/utils/createStardustComponent.tsx +++ b/packages/react/src/utils/createStardustComponent.tsx @@ -6,17 +6,17 @@ import { ComponentSlotClasses, ComponentSlotStylesPrepared } from '../themes/typ import { ReactAccessibilityBehavior, AccessibilityActionHandlers } from './accessibility/reactTypes' import { ObjectOf } from '../types' -export interface RenderStardustResultConfig { +export interface RenderResultConfig { accessibility: ReactAccessibilityBehavior classes: ComponentSlotClasses rtl: boolean styles: ComponentSlotStylesPrepared } -export interface CreateStardustComponentConfig

    { +export interface CreateComponentConfig

    { displayName: string className?: string - render: (props: P & { stardust: RenderStardustResultConfig }) => React.ReactNode + render: (props: P & { config: RenderResultConfig }) => React.ReactNode defaultProps?: any actionHandlers?: AccessibilityActionHandlers } @@ -27,13 +27,13 @@ const createComponent =

    = any>({ render, defaultProps, actionHandlers, -}: CreateStardustComponentConfig

    ): CreateComponentReturnType

    => { +}: CreateComponentConfig

    ): CreateComponentReturnType

    => { return createComponentInternal

    ({ displayName, className, render: (config, props) => { const filteredConfig = _.pick(config, ['accessibility', 'classes', 'rtl', 'styles']) - return render(Object.assign({ stardust: filteredConfig }, props)) + return render(Object.assign({ config: filteredConfig }, props)) }, defaultProps, actionHandlers, diff --git a/packages/react/src/utils/debug/debugEnabled.ts b/packages/react/src/utils/debug/debugEnabled.ts index b840c21589..07df7f09b0 100644 --- a/packages/react/src/utils/debug/debugEnabled.ts +++ b/packages/react/src/utils/debug/debugEnabled.ts @@ -3,16 +3,16 @@ const isDebugEnabled = () => { if (process.env.NODE_ENV !== 'production') { try { // eslint-disable-next-line no-undef - const stardustDebugEnabled = !!window.localStorage.stardustDebug + const fluentUIDebugEnabled = !!window.localStorage.fluentUIDebug if (process.env.NODE_ENV !== 'test') { - if (stardustDebugEnabled) { + if (fluentUIDebugEnabled) { /* eslint-disable-next-line no-console */ console.warn( [ '@fluentui/react:', `CSSinJS Debug data collection is enabled.`, - 'To remove this override paste `delete window.localStorage.stardustDebug` to your browser console and reload the page.', + 'To remove this override paste `delete window.localStorage.fluentUIDebug` to your browser console and reload the page.', ].join(' '), ) } else { @@ -21,13 +21,13 @@ const isDebugEnabled = () => { [ '@fluentui/react:', `CSSinJS Debug data collection is disabled.`, - 'To enable data collection paste `window.localStorage.stardustDebug = true` to your browser console and reload the page.', + 'To enable data collection paste `window.localStorage.fluentUIDebug = true` to your browser console and reload the page.', ].join(' '), ) } } - enabled = stardustDebugEnabled + enabled = fluentUIDebugEnabled } catch {} } From 0fc0f67e6842b235df87b69495fbfc4bf5971b25 Mon Sep 17 00:00:00 2001 From: Levi Thomason Date: Wed, 11 Dec 2019 18:10:52 -0800 Subject: [PATCH 05/13] the end is near! --- build/gulp/tasks/test-projects.ts | 22 ++++----- .../ComponentControls/ComponentButton.tsx | 2 +- .../ComponentDoc/useAccessibilityKnob.ts | 6 +-- .../usePlaygroundComponent.tsx | 4 +- docs/src/components/DocPage/DocPage.tsx | 2 +- .../components/Flex/Rtl/FlexExample.rtl.tsx | 2 +- .../Types/FlexExampleMediaCard.shorthand.tsx | 2 +- docs/src/examples/components/Grid/index.tsx | 2 +- docs/src/index.ejs | 2 +- docs/src/pages/Composition.mdx | 6 +-- docs/src/pages/Layout.mdx | 2 +- docs/src/pages/ShorthandProps.mdx | 4 +- docs/src/prototypes/IconViewer/index.tsx | 8 +-- docs/src/prototypes/customScrollbar/index.tsx | 2 +- docs/src/prototypes/customToolbar/index.tsx | 2 +- .../prototypes/employeeCard/CustomText.tsx | 9 ++++ .../prototypes/employeeCard/EmployeeCard.tsx | 30 ++++++------ docs/src/prototypes/employeeCard/Text.tsx | 9 ---- docs/src/prototypes/employeeCard/index.tsx | 2 +- .../hexagonalAvatar/CustomAvatar.tsx | 10 ++-- docs/src/prototypes/hexagonalAvatar/index.tsx | 10 ++-- .../components/TransparentDivider.tsx | 4 +- docs/src/views/Accessibility.tsx | 49 ++++++++++--------- docs/src/views/AccessibilityBehaviors.tsx | 4 +- docs/src/views/Colors.tsx | 2 +- docs/src/views/FocusTrapZoneDoc.tsx | 2 +- docs/src/views/FocusZoneDoc.tsx | 4 +- docs/src/views/IntegrateCustomComponents.tsx | 30 ++++++------ docs/src/views/Introduction.tsx | 4 +- docs/src/views/Layout.tsx | 4 +- docs/src/views/Performance.tsx | 2 +- docs/src/views/QuickStart.tsx | 6 +-- docs/src/views/Theming.tsx | 10 ++-- docs/src/views/ThemingExamples.tsx | 4 +- packages/ability-attributes/package.json | 2 +- packages/code-sandbox/package.json | 2 +- packages/code-sandbox/src/KnobsSnippet.tsx | 4 +- packages/code-sandbox/src/SandboxApp.tsx | 4 +- .../playground/src/components/Icon/README.md | 2 +- packages/react-proptypes/package.json | 2 +- packages/react/src/components/Box/Box.tsx | 4 +- packages/react/src/components/Debug/Debug.tsx | 12 ++--- .../src/components/Provider/ProviderBox.tsx | 4 +- packages/react/src/index.ts | 2 +- .../{stardust-icons.sh => process-icons.sh} | 10 ++-- .../{stardustCircle.tsx => iconCircle.tsx} | 0 packages/react/src/themes/types.ts | 8 +-- packages/react/src/umd.ts | 4 +- ...rdustComponent.tsx => createComponent.tsx} | 6 +-- ...Component.ts => createComponentPrivate.ts} | 8 +-- packages/react/src/utils/index.ts | 2 +- .../test/specs/commonTests/isConformant.tsx | 10 ++-- .../commonTests/isExportedAtTopLevel.tsx | 6 +-- .../test/specs/utils/createComponent-test.tsx | 2 +- ...stardust-ui.js => jest.fluent-ui-react.js} | 2 +- ...ust-ui.js => jestSetup.fluent-ui-react.js} | 0 56 files changed, 182 insertions(+), 177 deletions(-) create mode 100644 docs/src/prototypes/employeeCard/CustomText.tsx delete mode 100644 docs/src/prototypes/employeeCard/Text.tsx rename packages/react/src/themes/teams/components/Icon/svg/ProcessedIcons/{stardust-icons.sh => process-icons.sh} (93%) rename packages/react/src/themes/teams/components/Icon/svg/icons/{stardustCircle.tsx => iconCircle.tsx} (100%) rename packages/react/src/utils/{createStardustComponent.tsx => createComponent.tsx} (88%) rename packages/react/src/utils/{createComponent.ts => createComponentPrivate.ts} (92%) rename scripts/config/jest/{jest.stardust-ui.js => jest.fluent-ui-react.js} (86%) rename scripts/config/jest/{jestSetup.stardust-ui.js => jestSetup.fluent-ui-react.js} (100%) diff --git a/build/gulp/tasks/test-projects.ts b/build/gulp/tasks/test-projects.ts index f35fc6e539..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,7 +41,7 @@ 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 projectPackages = lernaAliases({ sourceDirectory: false }) @@ -150,10 +150,10 @@ task('test:projects:cra-ts', async () => { 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 Fluent UI components in test project's App.tsx") fs.copyFileSync(scaffoldPath('App.tsx'), testAppPath('src', 'App.tsx')) @@ -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')) @@ -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/docs/src/components/ComponentDoc/ComponentControls/ComponentButton.tsx b/docs/src/components/ComponentDoc/ComponentControls/ComponentButton.tsx index 9607b0c39f..0d7bd61e5c 100644 --- a/docs/src/components/ComponentDoc/ComponentControls/ComponentButton.tsx +++ b/docs/src/components/ComponentDoc/ComponentControls/ComponentButton.tsx @@ -9,7 +9,7 @@ interface LabelledButtonProps { const ComponentButton = createComponent({ displayName: 'ComponentButton', - render: ({ stardust, ...props }) => { + render: ({ config, ...props }) => { const { iconName, label, onClick } = props return ( 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/usePlaygroundComponent.tsx b/docs/src/components/ComponentPlayground/usePlaygroundComponent.tsx index df2360da17..8dd2497d40 100644 --- a/docs/src/components/ComponentPlayground/usePlaygroundComponent.tsx +++ b/docs/src/components/ComponentPlayground/usePlaygroundComponent.tsx @@ -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/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/index.ejs b/docs/src/index.ejs index 82782fc00b..6fe053d237 100644 --- a/docs/src/index.ejs +++ b/docs/src/index.ejs @@ -7,7 +7,7 @@ '/> - Stardust + Fluent UI