Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

Removing all remaining references to stardust. #2242

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const getAccessibility = <Props extends Record<string, any>>(
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/packages/ability-attributes.
if (definition.attributes) {
Object.keys(definition.attributes).forEach(slotName => {
const validatorName = `${displayName}${slotName === 'root' ? '' : `__${slotName}`}`
Expand Down
16 changes: 8 additions & 8 deletions specs/Button.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 Fluent UI
- `Button group/set`
- In Ant Design
- In Atlaskit
Expand All @@ -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 Fluent UI
- `Conditional button`
- In Semantic UI
- `Floating action/Raised button`
Expand Down Expand Up @@ -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)
- [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 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 to Fluent UI.

> TODO: Consult the prop wizard to derive consistently defined props.

Expand Down Expand Up @@ -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
### Fluent UI Button props

#### ButtonProps interface

Expand Down Expand Up @@ -306,7 +306,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/button
| `toggled` | Removing as it is already deprecated. | &#9745; | No, because prop is already deprecated. | &#x274C; |
| `uniqueId` | TBD | &#x274C; | &#x274C; | &#x274C; |

### Conversion process from Stardust to Fluent UI Button
### Conversion process from old Fluent UI to new Fluent UI Button

#### ButtonProps interface

Expand Down Expand Up @@ -632,7 +632,7 @@ None.

- Has no built-in support for icons via props.

### Stardust Button
### Fluent UI Button

#### Example DOM

Expand Down Expand Up @@ -899,7 +899,7 @@ render() {
| `endIconColorPrimaryHovered` | |
| `endIconColorPrimaryPressed` | |

NOTE! Stardust 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
Expand Down
16 changes: 8 additions & 8 deletions specs/Checkbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Open UI Checkbox [docs](https://open-ui.org/components/checkbox)

Expand Down Expand Up @@ -69,7 +69,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/checkbox
| styles | IStyleFunctionOrObject<ICheckboxStyleProps, ICheckboxStyles>| |
| theme | ITheme | |

### Stardust Checkbox props
### Fluent UI Checkbox props


| Name | Type | Notes |
Expand All @@ -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/Fluent UI to resolve

| Name | Type | Notes |
| -------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------|
Expand Down Expand Up @@ -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? |
| -----------------------------| -------------------- | :--------------------: | :--------------: | :-------------------: |
Expand Down Expand Up @@ -222,7 +222,7 @@ Could consider supporting an invalid state/error state but this might just be su
</div>
```

### Stardust Checkbox example DOM
### Fluent UI Checkbox example DOM

```html
<div class="ui-checkbox dd ol om gz de nb on cd oo op cb oq ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp or os ot ou hu hv hw hx ov ow ox oy ic id ie if ig ih ii ij ik il im oz pa pb pc ir is it iu pd pe pf pg lu ph pi pj pk" aria-checked="false" role="checkbox" tabindex="0">
Expand Down Expand Up @@ -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`:

Expand Down Expand Up @@ -372,7 +372,7 @@ TBD
| iconColorPressed | |
| iconSize | |

NOTE! Stardust does not follow this convention. Their Checkbox currently uses these tokens:
NOTE! Fluent UI does not follow this convention. Their Checkbox currently uses these tokens:

```
background: string
Expand Down
22 changes: 11 additions & 11 deletions specs/Icon.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,10 @@ The following section documents variants of the component that currently exist i
- In Gestalt
- `Bordered icons`
- In Semantic UI
- In Stardust
- In Fluent UI
- `Circular icons`
- In Semantic UI
- In Stardust
- In Fluent UI
- `Corner icons`
- In Semantic UI
- `Focusable icons`
Expand All @@ -34,7 +34,7 @@ The following section documents variants of the component that currently exist i
- `Rotated icons`
- In Ant Design
- In Semantic UI
- In Stardust
- In Fluent UI
- `Spinning/Loading icons`
- In Ant Design
- In Semantic UI
Expand Down Expand Up @@ -67,11 +67,11 @@ The following section documents links to different UI libraries implementations

- [Semantic UI Icon docs](https://react.semantic-ui.com/elements/icon/)

- [Stardust 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

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 to Fluent UI.

> TODO: Consult the prop wizard to derive consistently defined props.

Expand Down Expand Up @@ -111,7 +111,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/icon
| `styles` | `IStyleFunctionOrObject<IIconStyleProps, IIconStyles>` | Should be deprecated in favor of recomposition. |
| `theme` | `ITheme` | Should not show up in the public props contract. |

### Stardust Icon props
### Fluent UI Icon props

#### IconProps interface

Expand Down Expand Up @@ -141,7 +141,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/icon
| `styles` | TBD | &#x274C; | &#x274C; | &#x274C; |
| `theme` | TBD | &#x274C; | &#x274C; | &#x274C; |

### Conversion process from Stardust to Fluent UI Icon
### Conversion process from old Fluent UI to new Fluent UI Icon

#### IconProps interface

Expand Down Expand Up @@ -325,7 +325,7 @@ None.
- Only supports font icons.
- Can support icon groups and icon superpositions with the second item in the corner.

### Stardust Icon
### Fluent UI Icon

#### Example DOM

Expand Down Expand Up @@ -447,9 +447,9 @@ Fabric uses global registration for its icons which needs a call to an initializ
- [Icon registration utilities](https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/styling/src/utilities/icons.ts)
- [Icon component](https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Icon)

#### Stardust
#### Fluent UI

Stardust registers icons in the theme, with all default icons being SVGs but also supporting font icons via:
Fluent UI registers icons in the theme, with all default icons being SVGs but also supporting font icons via:

```ts
type ObjectOrFunc<TResult, TArg = {}> = ((arg: TArg) => TResult) | TResult;
Expand All @@ -468,7 +468,7 @@ Below are wiki and code references into this process:
- [Icon styles as part of theme component styles](https://github.com/microsoft/fluent-ui-react/blob/de10e334fc039370c4fe4b425050327d57f3f515/packages/react/src/themes/teams/componentStyles.ts#L51)
- [Merging icons as part of theme](https://github.com/microsoft/fluent-ui-react/blob/feat/generate-css/src/themes/teams/index.ts)

> - TODO: Decide on recommended thing to do. Leaning towards Stardust approach but worried about perf implications regarding icon definitions.
> - TODO: Decide on recommended thing to do. Leaning towards Fluent UI approach but worried about perf implications regarding icon definitions.
> - TODO: Discuss how to handle font loading if we put icons in the theme.
> - Should font loading also be part of the theme?
> - Has to be loaded somehow and is ok for the majority of customers to automatically load them, but some customers need to prevent this loading from MSFT CDNs.
Expand Down
10 changes: 5 additions & 5 deletions specs/Link.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ The following section documents links to different UI libraries implementations

## 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 to Fluent UI.

### Recommended component props

Expand Down Expand Up @@ -94,9 +94,9 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/link
| `styles` | `IStyleFunctionOrObject<ILinkStyleProps, ILinkStyles>` | Should be deprecated in favor of recomposition. |
| `theme` | `ITheme` | Should not show up in the public props contract. |

### Stardust Link props
### Fluent UI Link props

Stardust 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

Expand All @@ -117,9 +117,9 @@ Stardust does not currently have a `Link` component implementation.
| `styles` | TBD | &#x274C; | &#x274C; | &#x274C; |
| `theme` | TBD | &#x274C; | &#x274C; | &#x274C; |

### Conversion process from Stardust to Fluent UI Link
### Conversion process from old Fluent UI to new Fluent UI Link

Stardust does not currently have a `Link` component implementation.
Fluent UI does not currently have a `Link` component implementation.

## DOM Structure

Expand Down
14 changes: 7 additions & 7 deletions specs/Menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ Most menus have a concept of a specific menuitem. It is an integral part of the

* [Aria practices](https://www.w3.org/TR/wai-aria-1.1/#menu)
* [Fabric](https://developer.microsoft.com/en-us/fabric#/controls/web/contextualmenu)
* [Stardust](https://microsoft.github.io/fluent-ui-react/components/menu/definition)
* [Fluent UI](https://microsoft.github.io/fluent-ui-react/components/menu/definition)
* [Material-ui](https://material-ui.com/components/menus/)
* [Chakra-ui](https://chakra-ui.com/menu)
* [AntDesign](https://ant.design/components/menu/)
Expand All @@ -44,7 +44,7 @@ Most menus have a concept of a specific menuitem. It is an integral part of the
* The line between list and menu is fuzzy.

## API
### Prop comparison \(Stardust vs Fabric\)
### Prop comparison \(Fluent UI vs Fabric\)
_Note:_ I've skipped some of the boilerplate props like className.

#### Fabric
Expand Down Expand Up @@ -124,7 +124,7 @@ _Note:_ I've skipped some of the boilerplate props like className.
| text | string | Text description for the menu item to display |
| title | string | Optional title for displaying text when hovering over an item. |

#### Stardust
#### Fluent UI

##### Menu
| Prop Name | Type | Description |
Expand Down Expand Up @@ -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 Stardust 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? |
Expand Down Expand Up @@ -307,7 +307,7 @@ There should be a lot more discussion to see if this relaxed approach to props i
| text | &#x274C; | &#x274C; | &#x274C; |
| title | &#x274C; | &#x274C; | &#x274C; |

#### Stardust to Fluent
#### Old Fluent UI to new Fluent UI

##### Menu

Expand Down Expand Up @@ -386,7 +386,7 @@ Based on my recommendations, the MenuItem ends up doing a lot of work compared t
</ul>
```

### Stardust Dom Structure
### Fluent UI Dom Structure
Note: Class names removed
```HTML
<ul role="menu" data-aa-class="Menu" >
Expand Down
10 changes: 5 additions & 5 deletions specs/Slider.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ https://codesandbox.io/s/sliders-xi0zw

Fabric Slider [docs](https://developer.microsoft.com/en-us/fabric#/controls/web/slider)

Stardust Slider [docs](http://localhost:8080/components/slider/definition)
Fluent UI Slider [docs](http://localhost:8080/components/slider/definition)

Material UI Slider [docs](https://material-ui.com/components/slider/)

Expand Down Expand Up @@ -98,7 +98,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/slider
| valueFormat | (value: number) => string | Could be depreacted; consider slots override? |
| vertical | boolean | |

### Stardust Slider props
### Fluent UI Slider props

| Name | Type | Notes |
| --------------------------- | -------------------------------------- | ------------------------------------------------------ |
Expand All @@ -121,7 +121,7 @@ https://developer.microsoft.com/en-us/fabric#/controls/web/slider
| variables | any | Consider only recomposition |
| vertical | boolean | |

### Differences of Fabric/Stardust to resolve
### Differences of Fabric/Fluent UI to resolve

| Name | Fx | Recommendation |
| --------------------------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
Expand Down Expand Up @@ -230,7 +230,7 @@ General considerations:
</div>
```

### Stardust Slider example DOM
### Fluent UI Slider example DOM

- Extra wrapper div
- input element to receive focus
Expand Down Expand Up @@ -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
Expand Down