From 4adf34fc4fdd074128e9173d07d3fa3ab6e8f765 Mon Sep 17 00:00:00 2001 From: Aneesha Kommineni Date: Tue, 14 Jan 2020 15:17:04 -0800 Subject: [PATCH 1/4] removing all remaining references to stardust --- .../src/accessibility/getAccessibility.ts | 2 +- specs/Button.md | 16 ++++++------- specs/Checkbox.md | 12 +++++----- specs/Icon.md | 24 +++++++++---------- specs/Link.md | 10 ++++---- specs/Menu.md | 12 +++++----- specs/Slider.md | 10 ++++---- 7 files changed, 43 insertions(+), 43 deletions(-) diff --git a/packages/react-bindings/src/accessibility/getAccessibility.ts b/packages/react-bindings/src/accessibility/getAccessibility.ts index 76906a98ef..1f0e5e5122 100644 --- a/packages/react-bindings/src/accessibility/getAccessibility.ts +++ b/packages/react-bindings/src/accessibility/getAccessibility.ts @@ -33,7 +33,7 @@ const getAccessibility = >( if (process.env.NODE_ENV !== 'production') { // For the non-production builds we enable the runtime accessibility attributes validator. // We're adding the data-aa-class attribute which is being consumed by the validator, the - // schema is located in @stardust-ui/ability-attributes package. + // schema is located in @fluent-ui-react/ability-attributes package. if (definition.attributes) { Object.keys(definition.attributes).forEach(slotName => { const validatorName = `${displayName}${slotName === 'root' ? '' : `__${slotName}`}` diff --git a/specs/Button.md b/specs/Button.md index c6324f45f5..33c6c73240 100644 --- a/specs/Button.md +++ b/specs/Button.md @@ -43,7 +43,7 @@ The following are variants that exist because of the need of `Buttons` to reside - In Ant Design - In Semantic UI - In Shards React - - In Stardust UI + - In Current Fluent UI - `Button group/set` - In Ant Design - In Atlaskit @@ -54,7 +54,7 @@ The following are variants that exist because of the need of `Buttons` to reside - In React Bootstrap - In Semantic UI - In Shards React - - In Stardust UI + - In Current Fluent UI - `Conditional button` - In Semantic UI - `Floating action/Raised button` @@ -119,11 +119,11 @@ The following section documents links to different UI libraries implementations - [Shards React Button docs](https://designrevision.com/docs/shards-react/component/button) -- [Stardust Button docs](https://microsoft.github.io/fluent-ui-react/components/button/definition) +- [Current Fluent Button docs](https://microsoft.github.io/fluent-ui-react/components/button/definition) ## Props -The following section documents the properties that will become part of the new component, as well as the process for mitigating all changes when moving from Fabric and Stardust to Fluent UI. +The following section documents the properties that will become part of the new component, as well as the process for mitigating all changes when moving from Fabric and Current Fluent to Fluent UI. > TODO: Consult the prop wizard to derive consistently defined props. @@ -223,7 +223,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/button | `toggled` | `boolean` | Already deprecated in favor of `checked`. | | `uniqueId` | `string \| number` | This is used for keytip support in Fabric. Maybe remove it until we add `Keytips` in Fluent UI? | -### Stardust Button props +### Current Fluent Button props #### ButtonProps interface @@ -306,7 +306,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/button | `toggled` | Removing as it is already deprecated. | ☑ | No, because prop is already deprecated. | ❌ | | `uniqueId` | TBD | ❌ | ❌ | ❌ | -### Conversion process from Stardust to Fluent UI Button +### Conversion process from Current Fluent to Fluent UI Button #### ButtonProps interface @@ -632,7 +632,7 @@ None. - Has no built-in support for icons via props. -### Stardust Button +### Current Fluent Button #### Example DOM @@ -899,7 +899,7 @@ render() { | `endIconColorPrimaryHovered` | | | `endIconColorPrimaryPressed` | | -NOTE! Stardust does not follow this convention. Their `Button` currently uses these tokens: +NOTE! Current Fluent does not follow this convention. Their `Button` currently uses these tokens: ``` backgroundColor: string diff --git a/specs/Checkbox.md b/specs/Checkbox.md index 04af936b31..20db60c1c7 100644 --- a/specs/Checkbox.md +++ b/specs/Checkbox.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 Current Fluent example: there's some weirdness with how the theme providers are interacting with each other, the Current Fluent 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) +Current Fluent Checkbox [docs](https://microsoft.github.io/fluent-ui-react/components/checkbox/definition) Open UI Checkbox [docs](https://open-ui.org/components/checkbox) @@ -69,7 +69,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/checkbox | styles | IStyleFunctionOrObject| | | theme | ITheme | | -### Stardust Checkbox props +### Current Fluent Checkbox props | Name | Type | Notes | @@ -91,7 +91,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/checkbox | toggle | boolean | default false | | variables | any | | -### Differences of Fabric/Stardust to resolve +### Differences of Fabric/Current Fluent to resolve | Name | Type | Notes | | -------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------| @@ -222,7 +222,7 @@ Could consider supporting an invalid state/error state but this might just be su ``` -### Stardust Checkbox example DOM +### Current Fluent Checkbox example DOM ```html ``` -### Stardust Slider example DOM +### Current Fluent 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! Current Fluent does not follow this convention. Slider currently uses these tokens: ``` activeThumbColor: string From f562d50b8dbfcda172ea9e8635b59362579ec5c7 Mon Sep 17 00:00:00 2001 From: Aneesha Kommineni Date: Wed, 15 Jan 2020 12:54:15 -0800 Subject: [PATCH 2/4] responding to feedback --- .../src/accessibility/getAccessibility.ts | 2 +- specs/Button.md | 16 ++++++------- specs/Checkbox.md | 12 +++++----- specs/Icon.md | 24 +++++++++---------- specs/Link.md | 10 ++++---- specs/Menu.md | 12 +++++----- specs/Slider.md | 10 ++++---- 7 files changed, 43 insertions(+), 43 deletions(-) diff --git a/packages/react-bindings/src/accessibility/getAccessibility.ts b/packages/react-bindings/src/accessibility/getAccessibility.ts index 1f0e5e5122..db1bf49274 100644 --- a/packages/react-bindings/src/accessibility/getAccessibility.ts +++ b/packages/react-bindings/src/accessibility/getAccessibility.ts @@ -33,7 +33,7 @@ const getAccessibility = >( if (process.env.NODE_ENV !== 'production') { // For the non-production builds we enable the runtime accessibility attributes validator. // We're adding the data-aa-class attribute which is being consumed by the validator, the - // schema is located in @fluent-ui-react/ability-attributes package. + // schema is located in @fluent-ui-react/packages/ability-attributes. if (definition.attributes) { Object.keys(definition.attributes).forEach(slotName => { const validatorName = `${displayName}${slotName === 'root' ? '' : `__${slotName}`}` diff --git a/specs/Button.md b/specs/Button.md index 33c6c73240..393dffec24 100644 --- a/specs/Button.md +++ b/specs/Button.md @@ -43,7 +43,7 @@ The following are variants that exist because of the need of `Buttons` to reside - In Ant Design - In Semantic UI - In Shards React - - In Current Fluent UI + - In Fluent UI - `Button group/set` - In Ant Design - In Atlaskit @@ -54,7 +54,7 @@ The following are variants that exist because of the need of `Buttons` to reside - In React Bootstrap - In Semantic UI - In Shards React - - In Current Fluent UI + - In Fluent UI - `Conditional button` - In Semantic UI - `Floating action/Raised button` @@ -119,11 +119,11 @@ The following section documents links to different UI libraries implementations - [Shards React Button docs](https://designrevision.com/docs/shards-react/component/button) -- [Current Fluent Button docs](https://microsoft.github.io/fluent-ui-react/components/button/definition) +- [Fluent UI Button docs](https://microsoft.github.io/fluent-ui-react/components/button/definition) ## Props -The following section documents the properties that will become part of the new component, as well as the process for mitigating all changes when moving from Fabric and Current Fluent to Fluent UI. +The following section documents the properties that will become part of the new component, as well as the process for mitigating all changes when moving to Fluent UI. > TODO: Consult the prop wizard to derive consistently defined props. @@ -223,7 +223,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/button | `toggled` | `boolean` | Already deprecated in favor of `checked`. | | `uniqueId` | `string \| number` | This is used for keytip support in Fabric. Maybe remove it until we add `Keytips` in Fluent UI? | -### Current Fluent Button props +### Fluent UI Button props #### ButtonProps interface @@ -306,7 +306,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/button | `toggled` | Removing as it is already deprecated. | ☑ | No, because prop is already deprecated. | ❌ | | `uniqueId` | TBD | ❌ | ❌ | ❌ | -### Conversion process from Current Fluent to Fluent UI Button +### Conversion process from old Fluent UI to new Fluent UI Button #### ButtonProps interface @@ -632,7 +632,7 @@ None. - Has no built-in support for icons via props. -### Current Fluent Button +### Fluent UI Button #### Example DOM @@ -899,7 +899,7 @@ render() { | `endIconColorPrimaryHovered` | | | `endIconColorPrimaryPressed` | | -NOTE! Current Fluent does not follow this convention. Their `Button` currently uses these tokens: +NOTE! Fluent UI does not follow this convention. Their `Button` currently uses these tokens: ``` backgroundColor: string diff --git a/specs/Checkbox.md b/specs/Checkbox.md index 20db60c1c7..ad2428de36 100644 --- a/specs/Checkbox.md +++ b/specs/Checkbox.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 Current Fluent example: there's some weirdness with how the theme providers are interacting with each other, the Current Fluent checkbox's styling is messing up as a result. +Note about the Fluent example: there's some weirdness with how the theme providers are interacting with each other, the Fluent checkbox's styling is messing up as a result. Fabric Checkbox [docs](https://developer.microsoft.com/en-us/fabric#/controls/web/Checkbox) -Current Fluent 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) Open UI Checkbox [docs](https://open-ui.org/components/checkbox) @@ -69,7 +69,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/checkbox | styles | IStyleFunctionOrObject| | | theme | ITheme | | -### Current Fluent Checkbox props +### Fluent UI Checkbox props | Name | Type | Notes | @@ -91,7 +91,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/checkbox | toggle | boolean | default false | | variables | any | | -### Differences of Fabric/Current Fluent to resolve +### Differences of Fabric/Fluent to resolve | Name | Type | Notes | | -------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------| @@ -222,7 +222,7 @@ Could consider supporting an invalid state/error state but this might just be su ``` -### Current Fluent Checkbox example DOM +### Fluent UI Checkbox example DOM ```html ``` -### Current Fluent Slider example DOM +### Fluent UI Slider example DOM - Extra wrapper div - input element to receive focus @@ -411,7 +411,7 @@ render() { | trackColorPressed | | | trackSize | | -NOTE! Current Fluent 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 From f07447965112778da97b5da4fb564d0bf66089ff Mon Sep 17 00:00:00 2001 From: Aneesha Kommineni Date: Fri, 17 Jan 2020 11:26:47 -0800 Subject: [PATCH 3/4] nit changes --- specs/Checkbox.md | 8 ++++---- specs/Icon.md | 2 +- specs/Link.md | 4 ++-- specs/Menu.md | 4 ++-- specs/Slider.md | 2 +- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/specs/Checkbox.md b/specs/Checkbox.md index ad2428de36..de84cc555c 100644 --- a/specs/Checkbox.md +++ b/specs/Checkbox.md @@ -12,7 +12,7 @@ The `Checkbox` component allows a user to choose between two mutually exclusive https://codesandbox.io/s/checkboxes-ggpx1 -Note about the Fluent example: there's some weirdness with how the theme providers are interacting with each other, the Fluent 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) @@ -91,7 +91,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/checkbox | toggle | boolean | default false | | variables | any | | -### Differences of Fabric/Fluent to resolve +### Differences of Fabric/Fluent UI to resolve | Name | Type | Notes | | -------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------| @@ -147,7 +147,7 @@ Removing the following two props because the ARIA spec dictates role='checkbox' ### Conversion process from Fabric 7 to Fluent UI Checkbox -#### Fluent Checkbox recommended props interface +#### Fluent UI Checkbox recommended props interface | Name | To transition or not?| Property transitioned? | Breaking change? | Codemod/Shim created? | | -----------------------------| -------------------- | :--------------------: | :--------------: | :-------------------: | @@ -316,7 +316,7 @@ If there's additional static text representing that is descriptive, `aria-descri ### Themability and customization -Both Fluent and Teams themes and other custom themes will be made with compose and the design tokens specified below. Screenshots of themed variants will be posted here soon after that work is done like the example code below. +Both Fluent UI and Teams themes and other custom themes will be made with compose and the design tokens specified below. Screenshots of themed variants will be posted here soon after that work is done like the example code below. The `Checkbox` uses `react-texture` to provide a recomposable implementation that has no runtime performance penalties. The `BaseCheckbox` implementation can be used to provide new `slots` and default `props`: diff --git a/specs/Icon.md b/specs/Icon.md index 0fd0af0ac2..b372aef6e8 100644 --- a/specs/Icon.md +++ b/specs/Icon.md @@ -67,7 +67,7 @@ The following section documents links to different UI libraries implementations - [Semantic UI Icon docs](https://react.semantic-ui.com/elements/icon/) -- [Fluent Icon docs](https://microsoft.github.io/fluent-ui-react/components/icon/definition) +- [Fluent UI Icon docs](https://microsoft.github.io/fluent-ui-react/components/icon/definition) ## Props diff --git a/specs/Link.md b/specs/Link.md index 3df9a528ea..ca31fdbb32 100644 --- a/specs/Link.md +++ b/specs/Link.md @@ -96,7 +96,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/link ### Fluent UI Link props -Fluent does not currently have a `Link` component implementation. +Fluent UI does not currently have a `Link` component implementation. ### Conversion process from Fabric 7 to Fluent UI Link @@ -117,7 +117,7 @@ Fluent does not currently have a `Link` component implementation. | `styles` | TBD | ❌ | ❌ | ❌ | | `theme` | TBD | ❌ | ❌ | ❌ | -### Conversion process from Fluent to Fluent UI Link +### Conversion process from old Fluent UI to Fluent UI Link Fluent UI does not currently have a `Link` component implementation. diff --git a/specs/Menu.md b/specs/Menu.md index c251a3c4d0..523b609fe4 100644 --- a/specs/Menu.md +++ b/specs/Menu.md @@ -225,12 +225,12 @@ To help provide additional information to menu items and their context, the menu Similarly Submenus should control their open state through context. #### Discussion: -This is a large departure from the way that both Fluent and Fabric implement menus but it is more in line with the way a lot of other frameworks menus work. Additionally I believe it gives a lot more flexibility through composition which removes some of the pressure to add many props. +This is a large departure from the way that both Fluent UI and Fabric implement menus but it is more in line with the way a lot of other frameworks menus work. Additionally I believe it gives a lot more flexibility through composition which removes some of the pressure to add many props. There should be a lot more discussion to see if this relaxed approach to props is appropriate. Additionally it could make SplitButton menu items difficult to implement. ### Conversion Plan: -#### Fabric to Fluent: +#### Fabric to Fluent UI: ##### Menu | Action to take/taken | Property transitioned? | Breaking change? | Codemod/Shim created? | diff --git a/specs/Slider.md b/specs/Slider.md index ec9b9d131e..f0427b5731 100644 --- a/specs/Slider.md +++ b/specs/Slider.md @@ -121,7 +121,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/slider | variables | any | Consider only recomposition | | vertical | boolean | | -### Differences of Fabric/Fluent to resolve +### Differences of Fabric/Fluent UI to resolve | Name | Fx | Recommendation | | --------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | From 9e5ee416f4ebc5fd7479b7b7d0db8ac91145a65a Mon Sep 17 00:00:00 2001 From: Levi Thomason Date: Thu, 23 Jan 2020 09:12:08 -0800 Subject: [PATCH 4/4] Update specs/Link.md Co-Authored-By: Makoto Morimoto --- specs/Link.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/specs/Link.md b/specs/Link.md index ca31fdbb32..1a230942ac 100644 --- a/specs/Link.md +++ b/specs/Link.md @@ -117,7 +117,7 @@ Fluent UI does not currently have a `Link` component implementation. | `styles` | TBD | ❌ | ❌ | ❌ | | `theme` | TBD | ❌ | ❌ | ❌ | -### Conversion process from old Fluent UI to Fluent UI Link +### Conversion process from old Fluent UI to new Fluent UI Link Fluent UI does not currently have a `Link` component implementation.