Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(implementation-guide): fix incorrect example links #31962

Merged
merged 2 commits into from
Jul 10, 2024
Merged

docs(implementation-guide): fix incorrect example links #31962

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a8d9d4
docs(implementation-guide): fix incorrect example links
mainframev Jul 10, 2024
ec24329
Update docs/react-v9/contributing/component-implementation-guide.md
mainframev Jul 10, 2024
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
18 changes: 9 additions & 9 deletions docs/react-v9/contributing/component-implementation-guide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ A draft implementation is optional, but you may find it useful to create one bef
### Resources

- Start with the [Spec Template](Spec-Template)
- Refer to the [Best Practices](https://github.com/microsoft/fluentui/wiki/Implementation-Best-Practices) while designing the component
- Refer to the [Best Practices](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/implementation-best-practices.md) while designing the component

Write the spec in a file named `SPEC.md` in the component's folder. The spec should document your research above, and outline the proposed API, structure, and usage of the component.

Expand Down Expand Up @@ -169,8 +169,8 @@ Once the first draft of the spec has been reviewed, you can get started on the i

You can follow examples of other converged components for the structure of the implementation, such as:

- [Button](https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-button/src/components/Button)
- [Avatar](https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-avatar/src/components/Avatar)
- [Button](https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-button/library/src/components/Button)
- [Avatar](https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-avatar/library/src/components/Avatar)

## Documentation

Expand All @@ -180,8 +180,8 @@ The primary public documentation for our controls is in the form of storybook st

You can get started by looking at existing storybook stories:

- [Button examples](https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-button/stories/Button)
- [Avatar examples](https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-avatar/src/stories/Avatar)
- [Button examples](https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-button/stories/src/Button)
- [Avatar examples](https://github.com/microsoft/fluentui/tree/master/packages/react-components/react-avatar/stories/src/Avatar)

### Additional documentation

Expand Down Expand Up @@ -216,15 +216,15 @@ Once the component has been released as unstable, you should perform additional
- Use [queries](https://testing-library.com/docs/queries/about) like `getByRole` to find elements in the rendered DOM tree, and check that their attributes are as expected.
- Avoid using snapshot tests.
- When deciding what tests to write, generally the tests should cover all functionality in your component's state hook (`use{Component}`)
- Follow examples from other components for more guidance, such as [Button.test.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-button/src/components/Button/Button.test.tsx)
- Follow examples from other components for more guidance, such as [Button.test.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-button/library/src/components/Button/Button.test.tsx)
- **Visual Regression Tests**
- VR tests ensure that the components visuals do not change unexpectedly.
- Add stories to the `vr-tests-react-components` app, for example [Button.stories.tsx](https://github.com/microsoft/fluentui/blob/master/apps/vr-tests-react-components/src/stories/Button.stories.tsx)
- Add stories to the `vr-tests-react-components` app, for example [Button.stories.tsx](https://github.com/microsoft/fluentui/blob/master/apps/vr-tests-react-components/src/stories/Button/Button.stories.tsx)
- When deciding what tests to write, generally the tests should cover all states in your component's styling hook (`use{Component}Styles`).
- **Bundle Size Tests**
- Example: [Button.fixture.js](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-button/bundle-size/Button.fixture.js)
- Example: [Button.fixture.js](https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-button/library/bundle-size/Button.fixture.js)
- **Manual Accessibility Tests**
- For more info see [Manual Accessibility Review Checklist](https://github.com/microsoft/fluentui/wiki/Manual-Accessibility-Review-Checklist)
- For more info see [Manual Accessibility Review Checklist](https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/accessibility-review-checklist.md)

## Validation

Expand Down
Loading