feat: refactor color recipes #4623

nicholasrice · 2021-04-21T22:39:28Z

Pull Request

📖 Description

This PR refactors the existing color recipes loosely following #3833. Doing so decouples the recipe implementations from the FASTDesignSystem interface in favor of specific granular inputs.

It adds two key types, Palette and Swatch that are used by recipes. A Palette represents a collection of Swatch object, and a Swatch represents a color in a Palette. Two concrete implementations of these base types are also added, PaletteRGB and SwatchRGB, which are used by the color recipes.

closes #3833

👩‍💻 Reviewer Notes

📑 Test Plan

✅ Checklist

General

I have included a change request file using $ yarn change
I have added tests for my changes.
I have tested my changes.
I have updated the project documentation to reflect my changes.
I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

I have added a new component
I have modified an existing component
I have updated the definition file
I have updated the configuration file

⏭ Next Steps

packages/web-components/fast-components/src/color-vNext/palette.ts

bheston

All the suggestions are just for consistency. Recipes look good as a first step toward the DI style work.

packages/web-components/fast-components/src/color-vNext/palette.ts

packages/web-components/fast-components/src/color-vNext/recipes/neutral-divider.ts

packages/web-components/fast-components/src/color-vNext/recipes/neutral-fill.ts

packages/web-components/fast-components/src/color-vNext/recipes/neutral-foreground-hint.ts

packages/web-components/fast-components/src/color-vNext/recipes/neutral-outline.ts

…e.ts Co-authored-by: Brian Heston <[email protected]>

EisenbergEffect

Really excited about this work. @nicholasrice Can you add documentation for this like you did for the design tokens? Even better if you can connect the dots between the two.

nicholasrice · 2021-04-22T17:43:36Z

@EisenbergEffect I documented to Palette and Swatch interfaces and implementations but not the recipes themselves since those are actually internal. We'll end up exporting a function that wraps the recipes that implements the DerivedDesignToken type, which I think we can document use of.

EisenbergEffect · 2021-04-22T18:05:57Z

Sounds good!

* refactor color recipes away from DesignSystem data structure * rename dir * cleanup * factor binary-search out to it's own file * updating code docs * Change files * fixing binary-search * Update packages/web-components/fast-components/src/color-vNext/palette.ts Co-authored-by: Brian Heston <[email protected]> * addressing feedback * adding readme * pretty pretty closes #3833 Co-authored-by: nicholasrice <[email protected]> Co-authored-by: Brian Heston <[email protected]>

…#4634) * vNext: update components to extend FoundationElement (#4570) * support foundation element on accordion and accordion item * update anchor to use foundation element * update AnchoredRegion to extend FoundationElement * update Badge to extend FoundationElement * update breadcrumb and breadcrumb item to extend FoundationElement * update Button to extend FoundationElement * update checkbox to extend from FoundationElement * update Dialog to extend FoundationElement * update disclosure to extend FoundationElement * update divider to extend FoundationElement * update Flipper to extend FoundationElement * update horizontal scroll to extend FoundationElement * update Listbox and ListboxOption to extend FoundationElement * update combobox to extend FoundationElement * update select to extend combobox and update tests * fix listbox option styles and export * update tests (wip) * update Menu and MenuItem to extend FoundationElement * update number field to extend FoundationElement * update base name values * fix: prevent the mixin helper from copying over constructor properties * feat: fixture ergonomic improvements for foundation elements * test: fix Anchor and associated unit tests based on new system * remove incorrect tagFor usage * update radio and radiogroup * update skeleton * update slider and slider label * update switch * update tabs et all to use FoundationElement * update text area and text field to use foundation el * Update tooltip to use FoundationElement * update tests and tree item and view * remove website from lerna packages in favor of npm registry to prevent breaking changes for the time being * update progress and progress ring to use Foundation element * fixing the tests * feat: enable fixtures to handle N foundation elements and custom system * fixing tests! * Change files * fix errors in fast-website * update typings for explorer * update naming convention to lowercase fast * update imports for sites * Change files * update template names to lowercase * update style casing and apply updates to component registries * update tsdoc links for templates Co-authored-by: Rob Eisenberg <[email protected]> * (vNext) update casing for style exports (#4618) * update casing for style exports to illustrate they are functions * Change files * add api report * feat: refactor color recipes (#4623) * refactor color recipes away from DesignSystem data structure * rename dir * cleanup * factor binary-search out to it's own file * updating code docs * Change files * fixing binary-search * Update packages/web-components/fast-components/src/color-vNext/palette.ts Co-authored-by: Brian Heston <[email protected]> * addressing feedback * adding readme * pretty pretty closes #3833 Co-authored-by: nicholasrice <[email protected]> Co-authored-by: Brian Heston <[email protected]> * fix: update storybook to use custom element definitions and fix rollup (#4629) * update storybook to use custom element defintions * Change files Co-authored-by: nicholasrice <[email protected]> * feat(design-system): better integrate with DI and enforce constraints * test(DesignSystem): add basic tests for new API behavior * fix(fast-components): update rollup index to use the new DS API * Change files Co-authored-by: Chris Holt <[email protected]> Co-authored-by: Nicholas Rice <[email protected]> Co-authored-by: Brian Heston <[email protected]> Co-authored-by: nicholasrice <[email protected]> Co-authored-by: EisenbergEffect <[email protected]>