Releases: smooth-code/smooth-ui
v10.0.1
v10.0.0
Features
BREAKING CHANGES
React v16.8+ is now required
The library now uses hooks inside, hooks required React v16.8+.
Grid gutter is now based on system
Components Grid
, Row
and Col
accepts a gutter
property since a long time... But this prop was not accepting responsive and all system based utilities. It is now completely based on system.
// In v9, gutter will be "8px"
// In v10, gutter will be "40px", to fix it use `gutter="8px"` or better `gutter={1}`
<Grid gutter={8} />
Same behaviour for Row
an Col
components.
Toggler render props is now an array
Toggler now returns an array instead of an object. It allows better renaming and it is aligned with useState
signature.
// v9
<Toggler>{({ toggled, onToggle }) => { /* ... */ }</Toggler>
// v10
<Toggler>{([toggled, onToggle]) => { /* ... */ }</Toggler>
v9.1.0
v9.0.2
v9.0.1
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).
v8.1.0
v8.0.1
v8.0.0
Bug Fixes
Features
BREAKING CHANGES
-
OriginalComponent.withComponent(NewComponent)
is replaced byuiAs(OriginalComponent, NewComponent)
-
as={NewComponent}
is replaced byuiAs={NewComponent}
-
globalStyle()
is now replaced byNormalize
component
Migration from Smooth UI v7
-
Replace all
withComponent()
on Smooth UI based components byuiAs()
seeuiAs
helper documentation -
Replace all
as
prop on Smooth UI based components byuiAs
seeuiAs
prop documentation -
Replace
globalStyle()
byNormalize
, seeNormalize
documentation