This repository has been archived by the owner on Jun 20, 2022. It is now read-only.
v9.0.0
Bug Fixes
Features
BREAKING CHANGES
uiAs
prop & helper have been removedprop
utility has been removed- Undocumented utilities are no longer exported
controlFocus
has been renamedbaseFocus
,controlFocus
is only
for controls (when control prop istrue
)mixin
function is no longer available, also mixins have changedSelect
no longer acceptsoptions
prop
uiAs
uiAs
was confusing, it has been completely removed. You can now use native methods provided by emotion and styled-components.
- The
as
prop (styled-components & emotion) - The
withComponent
method (styled-components & emotion)
// smooth-ui v8
<Button uiAs="div" />
// smooth-ui v9
<Button as="div" />
// smooth-ui v8
import { uiAs } from '@smooth-ui/core-sc'
const DivButton = uiAs(Button, 'div')
// smooth-ui v9
const DivButton = Button.withComponent('div')
Mixins
Previously mixins were called using mixin
helper:
import { styled, mixin } from '@smooth-ui/core-sc'
const Styled = styled.div`
color: ${mixin('colorLevel', 'red', 5)};
`
All mixins are now exported:
import { styled, colorLevel } from '@smooth-ui/core-sc'
const Styled = styled.div`
color: ${colorLevel('red', 5)};
`
Theme
Theme is no longer required, Smooth UI will work well without theme and
you can override only needed properties without having to load the
entire theme.
The benefit from that approach is that code splitting is fully
efficient, if you use only one component in Smooth UI you will load only
theme primitives of this component.
The size of a result bundle that is using only a Button
:
202K bundle-smooth-ui-v8.js
194K bundle-smooth-ui-v9.js
65K bundle-smooth-ui-v8.js.gz
63K bundle-smooth-ui-v9.js.gz
As you can see the bundle has been reduced of 8K (no gzip) and of 2K
(gzip).