v6 Roadmap

[RobertBolender]

v6 goals

• Can be installed cleanly on top of v5
• Can have multiple versions installed without conflicts (no global CSS files, etc)
• Should be installed as a direct dependency rather than a peer dependency

v6 roadmap

• Refactor Listbox/Dropdown components to Listbox/Menu/Dropdown (see [RFD] v6 successor to Listbox #411 @korbinancell)
• Remove all references to any styleOverrides props, replacing the functionality with styled-system props
  • Accordion (Create v6 Accordion with Styled System #391)
  • DatePickerInput (Update Input and DatePickerInput for v6 #392)
  • Dropdown (Dropdown v6 Update #379)
  • FilesSection (Switch to v6 Button in FilesSection #395)
  • Input (Update Input and DatePickerInput for v6 #392)
  • Listbox (Menu #432, see also [RFD] v6 successor to Listbox #411)
  • ModalBackdrop (only used internally, not exported)
  • ParameterSentence (Create v6 ParameterSentence components with Styled System #410)
  • SimpleToast (Create v6 SimpleToast with Styled System #400)
  • Slider (Create v6 Slider with Styled System #404)
  • Tab? (Remove styleOverrides prop from Tab #409)
• Remove all references to legacy theme props, replacing the functionality with our global styled-system theme
  • Checkbox (Create v6 Checkbox with global Styled System theme and child config components #412)
  • Helpbox (Create v6 HelpBox with Styled System #414)
  • LoadingSpinner (Create v6 LoadingSpinner with Styled System #415)
  • Radio (Create v6 Radio with global Styled System theme and child config components #416)
  • SimpleToast (Create v6 SimpleToast with Styled System #400)
• Consider updating exported API for parent/child components
  Example pattern: <Modal>, <Modal.Content> instead of <Modal> and <ModalContent>
  • Tabs (Streamline Tab component exports (and add documentation) #417)
• Consider using the ChildConfig API pattern for these components:
  • Checkbox (Create v6 Checkbox with global Styled System theme and child config components #412)
  • Radio (Create v6 Radio with global Styled System theme and child config components #416)
• Update all other components to accept styled-system props
  • Popover (Add popover v6 implementation #338)
• Update Styled-Components to v5 (performance improvements with zero minimal breaking changes) (Upgrade to styled-components v5 #420)
• v6 PR with Breaking Changes (v6 #413)
  • Update ReactSelect to v3 (React select bump #384, v6 #413)
  • Remove all Bootstrap components
  • Remove GroupSelector
  • Remove Grid
  • Remove FilePicker
  • Remove ProductDrawer
  • Rename text-input-v2 exports to remove the confusing "v2" label.
  • Remove all v5 components
• Ship it! (completed 2021-01-14)

Shortly after shipping v6

• Storybook / docs upgrade (draft PR Add storybook docs #397)
• Jest unit tests with React-Testing-Library
  • Prefer to co-locate tests within component directories, such as Button.jsx and Button.test.jsx adjacent to each other.
  • Test that all components render without crashing
  • Test that all components can transition to all appropriate states without crashing (isOpen, isClosed, toggles, etc.)
  • Test that components can render without crashing even if rendered outside of a global theme provider

Further down the road

• Visual Regression / Snapshot Testing (Still under internal discussion, considering Percy or jest-image-snapshot for visual regression testing)

[TyMick]

Is there a standard set of Styled System prop categories that we want all components to use? At the moment I'm only adding to each v6 component the Styled System categories that are directly needed to replace some functionality being removed from the v5 version.

Should I add our common collection to each of them?

styled-ui/theme/system.js

Lines 16 to 25 in f52061d

	export const common = compose(
	styledSystem.space,
	styledSystem.color,
	styledSystem.display,
	styledSystem.system({
	pointerEvents: true,
	transform: true,
	transition: true,
	}),
	);

Maybe typography as well to the components that contain text?

styled-ui/theme/system.js

Lines 35 to 42 in f52061d

	export const typography = compose(
	styledSystem.typography,
	styledSystem.system({
	textTransform: true,
	whiteSpace: true,
	textOverflow: true,
	}),
	);

[RobertBolender]

Is there a standard set of Styled System prop categories that we want all components to use?

Not yet, although adding common and typography as appropriate as you suggested sounds like a good idea.

[RobertBolender]

Closed with #413