Fannypack v5 is now underway - a complete rewrite of the underlying internals of Fannypack. This issue aims to be an umbrella issue to track work in progress of the rewrite. The new Fannypack will use Emotion for it's CSS-in-JS solution & use Reakit v1 to leverage accessibility, customisability & composibility in it's components.
The main motivation to rewrite Fannypack is to support Reakit v1, hooks, smaller bundle size, as well as better composability, themeability and accessibility. Whilst a major refactor of v4 could have been quite possible, I felt a rewrite was more appropriate as I wanted to start off fresh & incorporate learnings from v4.
Fannypack v5's API will be very similar to v4, however there are a few breaking changes as noted below.
I'm planning to incrementally migrate every component from v4 onto v5. Component styling will remain the same as v4.
Here is the current TODO list for v5. Feel free to build any uncompleted component below. If you would like to take on a component, please comment which component you would like to take (make sure nobody has mentioned it in the comments too!). Once you have commented, please raise an issue with the title 'Add <{Component}>', and I will label this as 'in-progress'.
Here is a contributing guide to get you started
Foundation
Primitives
Typography
Layout
Components
Form
Form Adaptors
Utilities
Shells
Addons
Copy Blocks
Fannypack v5 will also introduce a few breaking changes.
Breaking changes to date
-
Removed absolute
, fixed
, static
, sticky
props from <Box>
.
- They could introduce an "impossible" state. E.g.
<Box fixed absolute>
- Migration Steps:
- Use the
position
prop. <Box fixed>
-> <Box position="fixed">
-
Removed row
, column
, rowReverse
, columnReverse
from <Flex>
.
- They could introduce an "impossible" state. E.g.
<Flex row column>
- Migration Steps:
- Use the
flexDirection
prop. <Flex row>
-> <Box flexDirection="row">
-
Added a fresh palette colour scheme. See more
-
Added a subtle animation to the hover & active event on Button
.
-
Converted Fannypack's breakpoints into it's own theme field. See more
theme.layout.mobileBreakpoint
-> theme.breakpoints.mobile
theme.layout.tabletBreakpoint
-> theme.breakpoints.tablet
theme.layout.desktopBreakpoint
-> theme.breakpoints.desktop
theme.layout.widescreenBreakpoint
-> theme.breakpoints.widescreen
theme.layout.fullHDBreakpoint
-> theme.breakpoints.fullHD
-
Moved HighlightedCode
to a separate package (fannypack-addon-highlighted-code
) as a Fannypack "addon".
-
Renamed layout.gapFactor
to layout.gapUnit
-
Renamed verticalAt
to verticalBreakpoint
on <Group>