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.

None yet

3 participants