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

refactor: finish stardust to fluent rename #2165

Merged
merged 15 commits into from
Dec 12, 2019
Merged
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
25 changes: 13 additions & 12 deletions .github/CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Getting started](#getting-started)
- [Useful Commands](#useful-commands)
- [Workflow](#workflow)
Expand All @@ -25,7 +26,7 @@

Make sure you have [Node.js][1] version v8 or later installed.

You can contribute to Stardust by being an official [contributor](setup-local-development.md#contributors) or without permissions, as a [collaborator](setup-local-development.md#collaborators)
You can contribute to Fluent UI by being an official [contributor](setup-local-development.md#contributors) or without permissions, as a [collaborator](setup-local-development.md#collaborators)

### Useful Commands

Expand Down Expand Up @@ -64,7 +65,7 @@ These guides will walk your through various activities for contributing:

## Accessibility

Stardust implements accessibility using accessibility behaviors. The behaviors add attributes to the DOM elements (mainly role and aria-\* properties) as well as handle keyboard interaction and focus. Every accessible component has a default behavior, which can be overriden using the `accessibility` prop. You can choose a behavior from the ones provided by Stardust or you can implement a new behavior.
Fluent UI implements accessibility using accessibility behaviors. The behaviors add attributes to the DOM elements (mainly role and aria-\* properties) as well as handle keyboard interaction and focus. Every accessible component has a default behavior, which can be overridden using the `accessibility` prop. You can choose a behavior from the ones provided by Fluent UI or you can implement a new behavior.

Behaviors apply properties, focus handling and keyboard handlers to the component slots. When developing a component, the properties and keyboard handlers need to be spread to the corresponding slots.

Expand Down Expand Up @@ -94,9 +95,9 @@ An application should always have an element with [focus][7] when in use. The us
- pressing arrow keys to navigate through children (for example menu items in menu)
- using the screen reader with or without virtual cursor

Stardust uses Office UI Fabric [FocusZone][8] for basic TAB and arrow key focus handling. To use the focus zone, you can use the `focusZone` configuration in the behavior (for example see [MenuItemBehavior][9]).
Fluent UI uses Office UI Fabric [FocusZone][8] for basic TAB and arrow key focus handling. To use the focus zone, you can use the `focusZone` configuration in the behavior (for example see [MenuItemBehavior][9]).

Focused component needs to be clearly visible. This is handled in Stardust by focus indicator functionality. Focus indicator will be displayed only if the application is in keyboard mode. Application switches to keyboard mode when a key relevant to navigation is pressed. It disables keyboard mode on mouse click events.
Focused component needs to be clearly visible. This is handled in Fluent UI by focus indicator functionality. Focus indicator will be displayed only if the application is in keyboard mode. Application switches to keyboard mode when a key relevant to navigation is pressed. It disables keyboard mode on mouse click events.

To style the focused component, you can use the `isFromKeyboard` utility and prop. See [Button component][10] and [Button style][11] for reference.

Expand All @@ -118,7 +119,7 @@ You should to run `lerna create` command to create a new package
- the directory name should not contain any namespace prefix and can be prefixed with the library name if the
implementation is not framework agnostic
- please provide a meaningful description to a package in the matched field
- use `https://github.com/stardust-ui/react/tree/master/packages/__DIRECTORY_NAME__` as `homepage`
- use `https://github.com/microsoft/fluent-ui-react/tree/master/packages/__DIRECTORY_NAME__` as `homepage`
- our packages are currently published with MIT license, please follow it until you will have specific legal requirements

```sh
Expand All @@ -133,10 +134,10 @@ package name: (@fluentui/react-proptypes)
version: (0.21.1)
description: Set of custom reusable PropTypes for React components.
keywords:
homepage: https://github.com/stardust-ui/react/tree/master/packages/react-proptypes
homepage: https://github.com/microsoft/fluent-ui-react/tree/master/packages/react-proptypes
license: (ISC) MIT
entry point: (lib/react-proptypes.js)
git repository: (https://github.com/stardust-ui/react.git)
git repository: (https://github.com/microsoft/fluent-ui-react.git)
```

#### Update `package.json`
Expand Down Expand Up @@ -223,11 +224,11 @@ lerna add @fluentui/react-proptypes packages/react
[6]: https://www.w3.org/TR/wai-aria-1.1/#namecalculation
[7]: https://www.w3.org/TR/wai-aria-1.1/#managingfocus
[8]: https://developer.microsoft.com/en-us/fabric#/components/focuszone
[9]: https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/accessibility/Behaviors/Menu/MenuBehavior.ts
[10]: https://github.com/stardust-ui/react/blob/master/src/components/Button/Button.tsx
[11]: https://github.com/stardust-ui/react/blob/master/src/themes/teams/components/Button/buttonStyles.ts
[12]: https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/accessibility/Behaviors/Menu/MenuItemBehavior.ts
[13]: https://github.com/stardust-ui/react/blob/master/src/components/Menu/MenuItem.tsx
[9]: https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/accessibility/Behaviors/Menu/MenuBehavior.ts
[10]: https://github.com/microsoft/fluent-ui-react/blob/master/src/components/Button/Button.tsx
[11]: https://github.com/microsoft/fluent-ui-react/blob/master/src/themes/teams/components/Button/buttonStyles.ts
[12]: https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/accessibility/Behaviors/Menu/MenuItemBehavior.ts
[13]: https://github.com/microsoft/fluent-ui-react/blob/master/src/components/Menu/MenuItem.tsx
[14]: https://lernajs.io/
[15]: https://yarnpkg.com/en/docs/workspaces
[16]: https://github.com/lerna/lerna/tree/master/commands/add
4 changes: 2 additions & 2 deletions .github/ISSUE_TEMPLATE/Support_question.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
11 changes: 6 additions & 5 deletions .github/add-a-feature.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->


- [Propose feature](#propose-feature)
- [Prototype](#prototype)
- [Spec out the API](#spec-out-the-api)
Expand Down Expand Up @@ -31,7 +32,7 @@ Build a minimal prototype showcasing the proposed feature. Do not worry about te

## Spec out the API

Review the documentation for the component. Spec out the component's proposed API. The spec should demonstrate how component's API you are proposing will be used by Stardust consumer. You can reference this [API proposal][2] for the Menu Icons.
Review the documentation for the component. Spec out the component's proposed API. The spec should demonstrate how component's API you are proposing will be used by Fluent UI consumer. You can reference this [API proposal][2] for the Menu Icons.

Once the component spec is solidified, it's time to write some code. The following sections cover everything you'll need to spec and build your awesome component.

Expand Down Expand Up @@ -190,11 +191,11 @@ After iterating on the feature with the maintainers, you will add full test cove
- [Test a component](test-a-feature.md)
- [Writing documentation](document-a-feature.md)

[1]: https://github.com/stardust-ui/react/issues
[2]: https://github.com/stardust-ui/react/pull/73
[3]: https://github.com/stardust-ui/react/blob/master/packages/react/src/utils/AutoControlledComponent.tsx
[1]: https://github.com/microsoft/fluent-ui-react/issues
[2]: https://github.com/microsoft/fluent-ui-react/pull/73
[3]: https://github.com/microsoft/fluent-ui-react/blob/master/packages/react/src/utils/AutoControlledComponent.tsx
[4]: https://facebook.github.io/react/docs/forms.html#controlled-components
[5]: https://facebook.github.io/react/docs/forms.html#uncontrolled-components
[6]: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
[7]: https://stardust-ui.github.io/react/glossary
[7]: https://microsoft.github.io/fluent-ui-react/glossary
[8]: https://github.com/Semantic-Org/Semantic-UI-React/issues/607
2 changes: 1 addition & 1 deletion .github/document-a-feature.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
8 changes: 4 additions & 4 deletions .github/release-a-package.md
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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/
20 changes: 10 additions & 10 deletions .github/setup-local-development.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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:<your-user>/react.git stardust-ui-react
cd stardust-ui-react
git clone git@github.com:<your-user>/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).
Expand All @@ -81,7 +81,7 @@ Continue to [Start](#start).
Now, enter the directory and install dependencies:

```
cd stardust-ui-react
cd fluent-ui-react
yarn
```

Expand Down
2 changes: 1 addition & 1 deletion .github/test-a-feature.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm

## [Unreleased]

### BREAKING CHANGES
- Rename all "Stardust UI" references to "Fluent UI" @levithomason ([#2165](https://github.com/microsoft/fluent-ui-react/pull/2165))

### Fixes
- Fix colors expand for `border-color` shorthand @layershifter ([#2160](https://github.com/microsoft/fluent-ui-react/pull/2160))

Expand Down
28 changes: 12 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!-- Logo -->
<p align="center">
<a href="https://microsoft.github.io/fluent-ui-react">
<img height="128" width="128" src="https://github.com/microsoft/fluent-ui-react/raw/master/docs/src/logo.png">
<img height="128" width="128" src="https://github.com/microsoft/fluent-ui-react/raw/master/docs/src/public/images/fluent-ui-logo.png">
</a>
</p>

Expand All @@ -12,17 +12,17 @@

<!-- Badges -->
<p align="center">
<a href="https://gitter.im/stardust-ui/react">
<a href="https://gitter.im/microsoft/fluent-ui-react">
<img alt="Gitter" src="https://img.shields.io/badge/gitter-join_chat-1dce73.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIwIiB5PSI1IiBmaWxsPSIjZmZmIiB3aWR0aD0iMSIgaGVpZ2h0PSI1Ii8%2BPHJlY3QgeD0iMiIgeT0iNiIgZmlsbD0iI2ZmZiIgd2lkdGg9IjEiIGhlaWdodD0iNyIvPjxyZWN0IHg9IjQiIHk9IjYiIGZpbGw9IiNmZmYiIHdpZHRoPSIxIiBoZWlnaHQ9IjciLz48cmVjdCB4PSI2IiB5PSI2IiBmaWxsPSIjZmZmIiB3aWR0aD0iMSIgaGVpZ2h0PSI0Ii8%2BPC9zdmc%2B&logoWidth=8&style=flat-square&maxAge=2592000" />
</a>
<a href="https://circleci.com/gh/stardust-ui/react/tree/master">
<img alt="Circle" src="https://img.shields.io/circleci/project/github/stardust-ui/react/master.svg?style=flat-square" />
<a href="https://circleci.com/gh/microsoft/fluent-ui-react/tree/master">
<img alt="Circle" src="https://img.shields.io/circleci/project/github/microsoft/fluent-ui-react/master.svg?style=flat-square" />
</a>
<a href="https://codecov.io/gh/stardust-ui/react">
<img alt="Codecov" src="https://img.shields.io/codecov/c/github/stardust-ui/react/master.svg?style=flat-square" />
<a href="https://codecov.io/gh/microsoft/fluent-ui-react">
<img alt="Codecov" src="https://img.shields.io/codecov/c/github/microsoft/fluent-ui-react/master.svg?style=flat-square" />
</a>
<a href="https://david-dm.org/stardust-ui/react">
<img alt="David" src="https://img.shields.io/david/stardust-ui/react.svg?style=flat-square" />
<a href="https://david-dm.org/microsoft/fluent-ui-react">
<img alt="David" src="https://img.shields.io/david/microsoft/fluent-ui-react.svg?style=flat-square" />
</a>
<a href="https://www.npmjs.com/package/@fluentui/react">
<img alt="npm" src="https://img.shields.io/npm/v/@fluentui/react.svg?style=flat-square" />
Expand Down Expand Up @@ -72,27 +72,23 @@ 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]
- [Teams (Microsoft)][301]

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]

<!-- REPO -->

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down
2 changes: 1 addition & 1 deletion build/gulp/tasks/test-dependencies/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
Loading