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.

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): update Icon docs with examples #24768

Merged
merged 5 commits into from
Oct 4, 2022

Conversation

tomi-msft
Copy link
Contributor

Fixes #23323

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 12, 2022

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
189.156 kB
52.385 kB
react-components
react-components: FluentProvider & webLightTheme
33.4 kB
11.008 kB
react-portal-compat
PortalCompatProvider
5.857 kB
1.978 kB
🤖 This report was generated against 2e8d044a4ce2c1095f13e08716c3ba13069ebf0d

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 12, 2022

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 edb78d1:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor
Copy link

size-auditor bot commented Sep 12, 2022

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 2e8d044a4ce2c1095f13e08716c3ba13069ebf0d (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 12, 2022

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1225 1235 5000
Button mount 886 949 5000
FluentProvider mount 1539 1521 5000
FluentProviderWithTheme mount 563 625 10
FluentProviderWithTheme virtual-rerender 588 596 10
FluentProviderWithTheme virtual-rerender-with-unmount 547 627 10
MakeStyles mount 1876 1773 50000
SpinButton mount 2374 2467 5000

Each icon also accepts `className` and `primaryFill` props for styling.

| - Name - | Description | Default |
| ----------- | ---------------------------------------------------------------------------------------------------------------------- | -------------- |
| bundleIcon | Pass in the filled and unfilled version of an icon and this will combine them into one icon | - |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it a component prop?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bundleIcon is not a component prop, rather a helper method. I've moved it from the prop table

@Hotell Hotell removed their assignment Sep 13, 2022
</div>
)
);
```

### Fluent icons as fonts
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you also add a code sample how to use icons as fonts ?

@tomi-msft tomi-msft merged commit 93f154a into microsoft:master Oct 4, 2022
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 5, 2022
* master: (62 commits)
  chore(migrate-converged): add functionality to execute various v9 package file restructuring tasks (microsoft#24458)
  chore(react-dialog): updates stories (microsoft#25070)
  refactor Progress to remove label and description slots (microsoft#25067)
  fix(SplitButton): Remove borders from hover and pressed state in primary split buttons (microsoft#25059)
  chore(react-persona): Add vr, conformance, and unit tests (microsoft#25007)
  (docs): update Icon docs with examples (microsoft#24768)
  Split button/primary hc fix (microsoft#25066)
  chore(react-utilities): restricts trigger API types (microsoft#25044)
  Add utilities export @fluentui/style-utilities v8 (microsoft#25065)
  chore: migrate whole repo to webpack 5 (microsoft#24542)
  applying package updates
  BREAKING: refactor `useTable` to be composable (microsoft#24947)
  Added shims to shim packages (microsoft#25048)
  Add Progress SPEC (microsoft#24418)
  applying package updates
  chore(react-persona): Add bundle-size command for bundle-size fixtures (microsoft#25055)
  fix(Button): Remove margin added to buttons by Safari (microsoft#25052)
  fix: Menu triggers no longer take focus when they are mounted (microsoft#25016)
  chore: deletes react-trigger package (microsoft#25042)
  Fixed a minor typo: immmediately => immediately (microsoft#25036)
  ...
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
* (docs): update Icon docs with examples

* change file

* Apply suggestions from code review

Co-authored-by: Oleksandr Fediashov <[email protected]>

* Move bundleIcon from prop list

* Add example explanation

Co-authored-by: Oleksandr Fediashov <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Icon - v9 docs are lacking available props
6 participants