docs: cleanup docs pages#23187
Merged
Merged
Conversation
layershifter
commented
May 24, 2022
| ## Server-Side Rendering | ||
|
|
||
| Fluent UI fully supports Server-Side Rendering. | ||
| Fluent UI React v9 fully supports Server-Side Rendering. |
Member
Author
There was a problem hiding this comment.
Mention this explicitly to avoid confusion.
layershifter
commented
May 24, 2022
Comment on lines
+33
to
+36
| - primitive (`string`, `number`, `boolean`) | ||
| - HTML element (`div`, `span`, `img`) | ||
| - JSX component (`<MyCustomControl />`) | ||
| - render function (() => React.ReactNode) | ||
| - props object (InputProps, IconProps) | ||
| - render function (`() => React.ReactNode`) |
layershifter
commented
May 24, 2022
| - render function (() => React.ReactNode) | ||
| - props object (InputProps, IconProps) | ||
| - render function (`() => React.ReactNode`) | ||
| - props object (`InputProps`, `LabelProps`) |
Member
Author
There was a problem hiding this comment.
I replaced IconProps as we don't rely have them in react-components
layershifter
commented
May 24, 2022
|
|
||
| For example, the Avatar component has a badge slot. | ||
| Avatar limites this slot to components or render functions with PresenceBadgeProps props. | ||
| Avatar limits this slot to components or render functions with `PresenceBadgeProps` props. |
layershifter
commented
May 24, 2022
| ## Styling components | ||
|
|
||
| To style Fluent UI components `makeStyles` is used. | ||
| To style Fluent UI React v9 components `makeStyles` is used. `makeStyles` comes from [`Griffel`](https://griffel.js.org) a homegrown CSS-in-JS implementation which generates atomic CSS classes. |
Member
Author
There was a problem hiding this comment.
Updated to match latest changes
layershifter
commented
May 24, 2022
| When `mergeClasses()` is called, it merges all classes from first to last - the latter argument overwrites the previous ones (similar to `Object.assign()`). | ||
|
|
||
| ```jsx | ||
| import { makeStyles, mergeClasses } from '@fluentui/react-components'; |
Member
Author
There was a problem hiding this comment.
Added imports everywhere to make snippets copy-pastable
layershifter
commented
May 24, 2022
| No matter what theme is used, the component styles are always the same. The only way to change the component styling is through theme tokens which can be used in style values. | ||
|
|
||
| ```js | ||
| import { tokens } from '@fluentui/react-theme'; |
Member
Author
There was a problem hiding this comment.
We recommend to use @fluentui/react-components, let's be consistent
layershifter
commented
May 24, 2022
|
|
||
| const useOverrides = makeStyles({ | ||
| button: { color: tokens.colorNeutralForeground3 }, | ||
| buttonIcon: { border: '1px solid red'}, |
Member
Author
There was a problem hiding this comment.
Oops, shorthands are not supported, updated it
layershifter
commented
May 24, 2022
| return ( | ||
| <> | ||
| <Button className={overrides.button} icon={{className: overrides.buttonIcon, children: <CallIcon />}} /> | ||
| <Button className={overrides.button} icon={{ className: overrides.buttonIcon, children: <CallEndRegular /> }} /> |
Member
Author
There was a problem hiding this comment.
Added real icon to be used
layershifter
commented
May 24, 2022
| import { Meta } from '@storybook/addon-docs'; | ||
|
|
||
| <Meta title="Concepts/Upgrading/from v0/Components/Textarea Upgrade" /> | ||
| <Meta title="Concepts/Upgrading/from v8/Components/Textarea Upgrade" /> |
Member
Author
There was a problem hiding this comment.
This causes funny collision as this page gets displayed for v0
layershifter
commented
May 24, 2022
| 'The `positioningRef` positioning prop provides an [imperative handle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle)', | ||
| 'to manually position an element. The target can be a normal HTML element or a virtual element such as a', | ||
| 'coordinate on the viewport', | ||
| 'coordinate on the viewport.', |
layershifter
commented
May 24, 2022
| story: [ | ||
| 'The positioned element can be offset from the target element by using a callback function.', | ||
| 'The callback function provides the arguments and are a values used directly by Popper.', | ||
| 'The callback function provides the following arguments:', |
layershifter
commented
May 24, 2022
| '', | ||
| '- Simple array with X and Y axis values', | ||
| '- A function that returns the array offset value', | ||
| '- An object with `mainAxis` and `crossAxis` values', |
layershifter
commented
May 24, 2022
Comment on lines
+6
to
+7
| const [crossAxis, setCrossAxis] = React.useState(10); | ||
| const [mainAxis, setMainAxis] = React.useState(10); |
Member
Author
There was a problem hiding this comment.
Changes names in snippet to match actual code
layershifter
marked this pull request as ready for review
May 24, 2022 16:06
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 3de9808:
|
Collaborator
📊 Bundle size reportUnchanged fixtures
|
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: dd94d998cb154a07cfc70ac760707231c18e41e8 (build) |
Collaborator
Perf Analysis (
|
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 1284 | 1212 | 5000 | |
| Button | mount | 772 | 810 | 5000 | |
| FluentProvider | mount | 2288 | 2243 | 5000 | |
| FluentProviderWithTheme | mount | 392 | 428 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 370 | 380 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 455 | 452 | 10 | |
| MakeStyles | mount | 1968 | 1983 | 50000 |
spmonahan
approved these changes
May 24, 2022
ling1726
approved these changes
May 24, 2022
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
See comments on files directly 👇