Releases: hackclub/design-system
Releases · hackclub/design-system
0.0.1-18
0.0.1-17
0.0.1-16
0.0.1-15
- Removes
Truncate
component for low usage. Duplicate the source if you actively use it - Fixes React browser errors triggered by using
aria-role
(my mistake, the correct attribute isrole
) - Upgrades dependencies, including @hackclub/icons with its 32 new icons
- Makes
Container
full-width by default, finally - Replaces
f
&w
shorthands internally—highly recommended to switch yours as well beforestyled-system
is upgraded - Adds antialiasing to default page styles
- Adds
rem
-poweredmaxWidth
prop toText
(plus its derivatives, such asHeading
)Use
<Text maxWidth={48} />
formax-width: 48rem;
without themx
hassle of aContainer
.
0.0.1-14
This release uses our new Phantom Sans typeface, changes the scales, and has a few minor updates.
This probably breaks everything you've ever designed! So I'm sorry about that. Test through things, but you can also patch the theme using ThemeProvider theme={{ … }}
with the old scales. I'll release a package to make this easier sometime soon.
0.0.1-12
0.0.1-11
Big changes
Icon
&IconButton
now use https://github.com/hackclub/icons instead of the Material Design set. As such, use theglyph
prop instead ofname
.LargeButton
now defaults to an all-caps, larger format to better match the new design language.OutlineButton
has been redesigned. It should now use the same props asButton
s (bg
for the border color,color
for the text color on hover/focus). It's also the same size as the newLargeButton
.Link
now supports thehoverline
property for underlining on hover, as well as customchevronLeft
andchevronRight
props.
Small changes
transition
is now cooler. Doesn't break compatibility.gradient
is a new helper ontheme
for making nice radial gradients. New design language often encourages radial over linear.- Updated some dependencies.
- This is the first release with <100% test coverage. Will be fixed soon, this release was hurried.
Usage notes
- We're preparing for the upcoming v4 release of styled-components, so use
styled(Component)
instead ofComponent.extend
for all new code. The codebase itself has been almost fully migrated, the final ones need to be fixed using the upcomingas
prop or they break usage with.withComponent
(also deprecated). Ignore the console notifications for now… - When using
theme
, prefer importing it in each file instead of accessing from props due to the performance boost on re-renders. DS itself will continue accessing from props in order to support customThemeProvider
s. When using theme from props is necessary, prefer inline destructuring unless other props are needed in that expression (${({ theme }) => theme.colors.primary}
is preferable).
Future
styled-components
v4 withas
- New
styled-system
- Truly fix DOM prop filtering
Sheet
componenticon
prop on Buttons