Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

chore(package): create styles package #2222

Merged
merged 15 commits into from
Jan 10, 2020
Merged

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Jan 10, 2020

Big movement ⏩

This PR moves all styles related utilities and Typescript types to a separate @fluentui/styles package to avoid circular dependencies between @fluentui/react and @fluentui/react-bindings. Extracted utilities are considered as framework agnostic (hopefully 🐱 ), all React related things should be moved and will be moved to @fluentui/react-bindings in a separate PR.

Potentially breaking changes

ICSSInJSStyle type is not anymore extending React.CSSProperties, so you can't assign ICSSInJSStyle to React.CSSProperties anymore - you have to use type cast.

@@ -17,7 +17,6 @@ const flexItemStyles: ComponentSlotStylesPrepared<FlexItemProps, FlexItemVariabl
...(p.grow && { flexGrow: p.grow }),
...(p.grow === true && { flexGrow: 1 }),

...p.itemStyles,
Copy link
Member Author

Choose a reason for hiding this comment

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

This prop was cruft

@DustyTheBot
Copy link
Collaborator

DustyTheBot commented Jan 10, 2020

Warnings
⚠️ New package.json added: packages/styles/package.json. Make sure you have approval before merging!
⚠️ Package (or peer) dependencies changed. Make sure you have approval before merging!

Changed dependencies are detected.

Changed dependencies in packages/react/package.json

package before after
@fluentui/styles - ^0.43.0

Changed dependencies are detected.

Changed dependencies in packages/code-sandbox/package.json

package before after
@fluentui/react ^0.43.0 *
@fluentui/docs-components - ^0.43.0

Perf comparison

Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.7 0.42 1.67:1 2000 1392
🔧 Button.Fluent 1.3 0.18 7.22:1 1000 1301
🔧 Checkbox.Fluent 1.42 0.29 4.9:1 1000 1422
🔧 Dialog.Fluent 0.34 0.18 1.89:1 5000 1682
🔧 Dropdown.Fluent 3.66 0.36 10.17:1 1000 3658
🔧 Icon.Fluent 0.29 0.03 9.67:1 5000 1431
🔧 Image.Fluent 0.11 0.08 1.38:1 5000 554
🔧 Slider.Fluent 1.98 0.31 6.39:1 1000 1977
🦄 Text.Fluent 0.06 0.18 0.33:1 5000 277
🦄 Tooltip.Fluent 0.4 18.74 0.02:1 5000 2016

🔧 Needs work     🎯 On target     🦄 Amazing

Generated by 🚫 dangerJS

@layershifter layershifter merged commit f24754a into master Jan 10, 2020
@layershifter layershifter deleted the chore/create-styles branch January 10, 2020 19:32
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants