Skip to content

Include values in Fluent 9 storybook typography table#27189

Merged
layershifter merged 2 commits intomicrosoft:masterfrom
NotWoods:tigeroakes/typography-values
Mar 14, 2023
Merged

Include values in Fluent 9 storybook typography table#27189
layershifter merged 2 commits intomicrosoft:masterfrom
NotWoods:tigeroakes/typography-values

Conversation

@NotWoods
Copy link
Contributor

Previous Behavior

The current typography table doesn't show the literal font-size values. This makes it difficult to figure out the typography token that best corresponds with literal font sizes (such as "12px") which are often used in Figma designs.

New Behavior

Added column that includes font values, similar to the colors page.

image

Related Issue(s)

See internal docs that I've shared with @paulgildea

@NotWoods NotWoods requested a review from a team as a code owner March 13, 2023 21:41
@size-auditor
Copy link

size-auditor bot commented Mar 13, 2023

Asset size changes

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

Baseline commit: 533fcd3f705bc3161fb85f773fc396455f507d10 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 13, 2023

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 9083c9c:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 13, 2023

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)
88.789 kB
26.532 kB
react-alert
Alert
90.467 kB
22.106 kB
react-avatar
Avatar
54.149 kB
14.571 kB
react-avatar
AvatarGroup
18.064 kB
6.664 kB
react-avatar
AvatarGroupItem
70.425 kB
19.075 kB
react-badge
Badge
25.746 kB
7.568 kB
react-badge
CounterBadge
26.725 kB
7.874 kB
react-badge
PresenceBadge
28.318 kB
7.779 kB
react-button
Button
39.613 kB
9.935 kB
react-button
CompoundButton
46.795 kB
11.405 kB
react-button
MenuButton
44.296 kB
11.255 kB
react-button
SplitButton
52.846 kB
12.866 kB
react-button
ToggleButton
57.982 kB
11.853 kB
react-card
Card - All
83.548 kB
23.894 kB
react-card
Card
78.317 kB
22.433 kB
react-card
CardFooter
9.045 kB
3.806 kB
react-card
CardHeader
10.984 kB
4.509 kB
react-card
CardPreview
9.852 kB
4.159 kB
react-checkbox
Checkbox
35.895 kB
10.82 kB
react-checkbox
CheckboxField
42.8 kB
12.714 kB
react-combobox
Combobox (including child components)
88.622 kB
28.082 kB
react-combobox
ComboboxField
84.988 kB
27.82 kB
react-combobox
Dropdown (including child components)
87.309 kB
27.827 kB
react-components
react-components: Button, FluentProvider & webLightTheme
67.03 kB
18.099 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
206.206 kB
57.126 kB
react-components
react-components: FluentProvider & webLightTheme
37.861 kB
12.034 kB
react-dialog
Dialog (including children components)
92.72 kB
27.216 kB
react-divider
Divider
19.754 kB
6.68 kB
react-field
Field
20.397 kB
7.053 kB
react-image
Image
11.259 kB
4.473 kB
react-infobutton
InfoButton
130.366 kB
39.382 kB
react-input
Input
25.664 kB
7.695 kB
react-input
InputField
35.613 kB
10.592 kB
react-label
Label
12.461 kB
4.57 kB
react-link
Link
12.306 kB
5.073 kB
react-menu
Menu (including children components)
130.26 kB
39.493 kB
react-menu
Menu (including selectable components)
133.436 kB
40.038 kB
react-overflow
hooks only
11.214 kB
4.271 kB
react-persona
Persona
61.21 kB
16.521 kB
react-popover
Popover
117.438 kB
35.784 kB
react-portal
Portal
11.377 kB
4.179 kB
react-portal-compat
PortalCompatProvider
6.324 kB
2.129 kB
react-positioning
usePositioning
24.01 kB
8.793 kB
react-progress
ProgressBar
15.965 kB
5.701 kB
react-progress
ProgressField
26.415 kB
8.872 kB
react-provider
FluentProvider
19.928 kB
6.832 kB
react-radio
Radio
35.392 kB
11.117 kB
react-radio
RadioGroup
17.872 kB
6.523 kB
react-radio
RadioGroupField
28.023 kB
9.681 kB
react-select
Select
26.87 kB
8.761 kB
react-select
SelectField
36.179 kB
11.28 kB
react-slider
Slider
35.816 kB
11.043 kB
react-slider
SliderField
45.717 kB
13.975 kB
react-spinbutton
SpinButton
35.559 kB
10.351 kB
react-spinbutton
SpinButtonField
44.565 kB
12.765 kB
react-spinner
Spinner
23.336 kB
7.18 kB
react-switch
Switch
30.943 kB
9.25 kB
react-switch
SwitchField
37.805 kB
11.148 kB
react-table
DataGrid
149.792 kB
40.502 kB
react-table
Table (Primitives only)
46.798 kB
12.557 kB
react-table
Table as DataGrid
137.684 kB
35.154 kB
react-table
Table (Selection only)
85.511 kB
21.173 kB
react-table
Table (Sort only)
84.832 kB
20.982 kB
react-text
Text - Default
12.261 kB
4.819 kB
react-text
Text - Wrappers
15.571 kB
5.23 kB
react-textarea
Textarea
28.981 kB
9.071 kB
react-textarea
TextareaField
39.334 kB
12.008 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
30.908 kB
6.714 kB
react-theme
Teams: Light theme
17.776 kB
5.141 kB
react-tooltip
Tooltip
49.273 kB
16.775 kB
🤖 This report was generated against 533fcd3f705bc3161fb85f773fc396455f507d10

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 13, 2023

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1335 1287 5000
Button mount 935 940 5000
Field mount 2059 2037 5000
FluentProvider mount 1679 1649 5000
FluentProviderWithTheme mount 638 629 10
FluentProviderWithTheme virtual-rerender 603 595 10
FluentProviderWithTheme virtual-rerender-with-unmount 641 635 10
InfoButton mount 570 571 5000
MakeStyles mount 1907 1918 50000
Persona mount 3101 3030 5000
SpinButton mount 2453 2451 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Mar 13, 2023

🕵 fluentuiv9 No visual regressions between this PR and main

@layershifter
Copy link
Member

/azp run Fluent UI React - PR and CI

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@layershifter layershifter enabled auto-merge (squash) March 14, 2023 10:39
@layershifter layershifter merged commit db03906 into microsoft:master Mar 14, 2023
GeoffCoxMSFT pushed a commit to GeoffCoxMSFT/fluentui that referenced this pull request Mar 14, 2023
Co-authored-by: Oleksandr Fediashov <olfedias@microsoft.com>
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Mar 15, 2023
* master: (141 commits)
  chore: prerequisite changes before migrating v9 packages to SWC based transpilation (microsoft#26965)
  feat: Add InfoLabel component (microsoft#27118)
  fix(tools): update migrate-converged generator to add node field to package.json exports map (microsoft#27152)
  applying package updates
  fix: Embed play/pause indicator should render correctly in high contrast mode (microsoft#27213)
  feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens (microsoft#27034)
  chore: Prepare release 0.66.4 (microsoft#27163)
  fix(react-datepicker-compat): Fix text entry issues with input (microsoft#27204)
  fix: Smooth out animation of indeterminate progress bar (microsoft#27201)
  Add cxe-red as a codeowner of react-file-type-icons (microsoft#27147)
  Added documentation about custom style hooks (microsoft#27087)
  Custom style react-text (microsoft#27078)
  Custom style react-image (microsoft#27066)
  Add JSDoc for tabster focus indicator selector (microsoft#27041)
  Theme designer: Move colors to local files (microsoft#27191)
  docs(react-card): move card out of preview (microsoft#27185)
  Include values in typography table (microsoft#27189)
  feat: accept a className in `mountNode` in `Portal` (microsoft#27008)
  RFC: Extend `mountNode` prop in `Portal` (microsoft#27009)
  applying package updates
  ...
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Mar 15, 2023
* master: (141 commits)
  chore: prerequisite changes before migrating v9 packages to SWC based transpilation (microsoft#26965)
  feat: Add InfoLabel component (microsoft#27118)
  fix(tools): update migrate-converged generator to add node field to package.json exports map (microsoft#27152)
  applying package updates
  fix: Embed play/pause indicator should render correctly in high contrast mode (microsoft#27213)
  feat(tokens): Add colorNeutralBackgroundAlpha and colorNeutralStrokeAlpha tokens (microsoft#27034)
  chore: Prepare release 0.66.4 (microsoft#27163)
  fix(react-datepicker-compat): Fix text entry issues with input (microsoft#27204)
  fix: Smooth out animation of indeterminate progress bar (microsoft#27201)
  Add cxe-red as a codeowner of react-file-type-icons (microsoft#27147)
  Added documentation about custom style hooks (microsoft#27087)
  Custom style react-text (microsoft#27078)
  Custom style react-image (microsoft#27066)
  Add JSDoc for tabster focus indicator selector (microsoft#27041)
  Theme designer: Move colors to local files (microsoft#27191)
  docs(react-card): move card out of preview (microsoft#27185)
  Include values in typography table (microsoft#27189)
  feat: accept a className in `mountNode` in `Portal` (microsoft#27008)
  RFC: Extend `mountNode` prop in `Portal` (microsoft#27009)
  applying package updates
  ...
@NotWoods NotWoods deleted the tigeroakes/typography-values branch March 16, 2023 18:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants