Fannypack v5 Roadmap

[jxom]

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.

Check out the v5 branch

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

• [x] Provider
• [x] GlobalStyles

Primitives

• [x] Box
• [x] Block
• [x] Flex
• [x] Grid
• [x] Inline
• [x] InlineBlock
• [x] InlineFlex

Typography

• [x] Blockquote
• [x] Code
• [x] Heading
• [x] Link
• [x] List
• [x] Paragraph
• [x] Text

Layout

• [x] Columns
• [x] Container
• [x] FieldStack
• [x] Group
• [x] Set
• [x] Stack

Components

• [ ] Accordian
• [x] ActionButtons
• [x] Alert
• [x] Avatar
• [x] Badge
• [x] Button
• [x] Breadcrumb
• [x] Callout
• [x] CalloutOverlay
• [x] Card
• [x] Dialog
• [x] DialogModal
• [x] Divider
• [x] DropdownMenu
• [x] Icon
• [x] Image
• [x] Menu
• [x] Navigation
• [x] Pagination
• [x] Popover
• [x] ProgressBar
• [x] Rating
• [x] SideNav
• [x] Spinner
• [x] Table
• [x] Tabs
• [x] Tag
• [ ] Timeline
• [x] Toast
• [x] Tooltip
• [x] TopNav

Form

• [x] Autosuggest
• [x] AutosuggestField
• [x] Checkbox
• [x] CheckboxField
• [x] CheckboxGroup
• [x] CheckboxGroupField
• [x] FieldStack
• [x] FieldWrapper
• [x] Input
• [x] InputField
• [x] Label
• [ ] PhoneNumberInput
• [ ] PhoneNumberInputField
• [x] Radio
• [ ] RadioButtons
• [ ] RadioButtonsField
• [x] RadioGroup
• [x] RadioGroupField
• [x] Select
• [x] SelectField
• [x] SelectMenu
• [x] SelectMenuField
• [x] Switch
• [x] SwitchField
• [x] Textarea
• [x] TextareaField

Form Adaptors

• [x] Formik
• [ ] React Final Form
• [ ] React Hook Form
• [x] Redux Form

Utilities

• [x] Backdrop
• [x] Clickable
• [ ] Composite
• [x] Drawer
• [x] Hidden
• [x] Modal
• [x] Overlay
• [x] Portal
• [x] Rover
• [x] Tabbable

Shells

• [x] Page.Content
• [x] Page.WithSidebar
• [ ] Page.WithHeader

Addons

• [ ] PaymentCardInput
• [ ] PhotoUpload
• [x] HighlightedCode
• [x] Markdown

Copy Blocks

• [ ] Hero sections
• [ ] Feature sections
• [x] Call-to-action sections
• [ ] Pricing sections
• [ ] Testimonial sections
• [ ] FAQ sections
• [ ] Newsletter signup sections
• [ ] Stats sections
• [ ] Footers
• [ ] Contact us form
• [ ] Meet the team

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>

[ferryarman]

@jxom just wondering is v5 available for public or it's currently limited to group of people ?

[jxom]

@ferryarman - It is available at https://github.com/bumbag/bumbag-ui