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

Jump to bottom

Added global design tokens - spacing, duration, curves #22607

Merged
merged 6 commits into from
Apr 28, 2022
Merged

Added global design tokens - spacing, duration, curves #22607

merged 6 commits into from
Apr 28, 2022

Conversation

GeoffCoxMSFT
Copy link
Member

Changes

  • Added spacing type
  • Added horizontal and vertical spacing to theme
  • Added duration type to theme
  • Added curve type to theme
  • Defined constants for new theme types based on figma values
  • Initialized all themes with constants

Issues

Updates #22231

@GeoffCoxMSFT GeoffCoxMSFT self-assigned this Apr 22, 2022
@GeoffCoxMSFT GeoffCoxMSFT requested review from a team as code owners April 22, 2022 16:28
@codesandbox-ci
Copy link

codesandbox-ci bot commented Apr 22, 2022 •
edited
Loading

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 7137c59:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 22, 2022 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-theme
Teams: all themes		 30.098 kB
6.657 kB		 31.327 kB
7.041 kB		 1.229 kB
384 B
react-theme
Teams: Light theme		 18.632 kB
5.317 kB		 19.772 kB
5.698 kB		 1.14 kB
381 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)		 73.754 kB
22.494 kB
react-badge
Badge		 20.965 kB
6.605 kB
react-badge
CounterBadge		 21.918 kB
6.919 kB
react-badge
PresenceBadge		 22.005 kB
6.582 kB
react-card
Card - All		 57.884 kB
16.524 kB
react-card
Card		 53.169 kB
15.238 kB
react-card
CardFooter		 7.756 kB
3.299 kB
react-card
CardHeader		 9.321 kB
3.816 kB
react-card
CardPreview		 7.728 kB
3.323 kB
react-combobox
Combobox		 60.564 kB
20.751 kB
react-divider
Divider		 15.455 kB
5.57 kB
react-image
Image		 10.179 kB
3.995 kB
react-input
Input		 21.775 kB
7.228 kB
react-label
Label		 8.441 kB
3.541 kB
react-link
Link		 11.176 kB
4.545 kB
react-positioning
usePopper		 23.21 kB
8.084 kB
react-priority-overflow
hooks only		 10.792 kB
4.125 kB
react-provider
FluentProvider		 14.079 kB
5.274 kB
react-radio
Radio		 23.488 kB
7.889 kB
react-radio
RadioGroup		 8.205 kB
3.516 kB
react-spinbutton
SpinButton		 41.955 kB
11.856 kB
react-spinner
Spinner		 17.224 kB
5.856 kB
react-switch
Switch		 24.333 kB
8.019 kB
react-text
Text - Default		 10.867 kB
4.269 kB
react-text
Text - Wrappers		 14.183 kB
4.61 kB
react-textarea
Textarea		 20.672 kB
7.07 kB
react-theme
Single theme token import		 69 B
89 B
react-tooltip
Tooltip		 42.907 kB
14.761 kB
🤖 This report was generated against fa6e17664a3d0cf6001f336aa015ff2a1a8598b3

@size-auditor
Copy link

size-auditor bot commented Apr 22, 2022 •
edited
Loading

Asset size changes

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

Baseline commit: fa6e17664a3d0cf6001f336aa015ff2a1a8598b3 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Apr 22, 2022 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1206 1242 5000
Button mount 763 742 5000
FluentProvider mount 2238 2351 5000
FluentProviderWithTheme mount 376 435 10
FluentProviderWithTheme virtual-rerender 344 355 10
FluentProviderWithTheme virtual-rerender-with-unmount 430 406 10
MakeStyles mount 2029 1986 50000

@miroslavstastny
Copy link
Member

Let's discuss in the tech sync.

miroslavstastny
miroslavstastny approved these changes Apr 28, 2022
View reviewed changes
Copy link
Member

@miroslavstastny miroslavstastny left a comment

Choose a reason for hiding this comment

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

Thanks for adding the tokens!
We also need to add stories, I've created a separate tracking issue #22690.

@GeoffCoxMSFT GeoffCoxMSFT enabled auto-merge (squash) April 28, 2022 15:56
@GeoffCoxMSFT GeoffCoxMSFT merged commit 57583bf into microsoft:master Apr 28, 2022
marwan38 pushed a commit to marwan38/fluentui that referenced this pull request Jun 13, 2022
@GeoffCoxMSFT @marwan38
Added global design tokens - spacing, duration, curves (microsoft#22607)
f84ee22 
* Added tokens from global figma

* Updated exports for new theme types

* yarn change

* Updated exports

* Fixed XXXl -> XXXL
@miroslavstastny miroslavstastny mentioned this pull request Oct 9, 2023
Closed
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@miroslavstastny miroslavstastny miroslavstastny approved these changes

@micahgodbolt micahgodbolt micahgodbolt approved these changes

Assignees

@GeoffCoxMSFT GeoffCoxMSFT

Labels
Component: Theme Fluent UI react-components (v9)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@GeoffCoxMSFT @fabricteam @miroslavstastny @micahgodbolt