Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Theme setup] Initial setup and Accordion example #436

Merged
merged 9 commits into from
Oct 27, 2020

Conversation

daigof
Copy link
Contributor

@daigof daigof commented Oct 21, 2020

  • This is mostly a copy of the work from this PR [POC] Emotion Themes #387

  • Converted Accordion to FC. My main concern was defining the theme as AccordionProp while using the HOC, this will prompt consumers of Radiance to pass a theme prop. With hooks this is solved automatically. Tested with console logs the setContentHeight logic and works correctly with the new FC version.

  • Wanted to contain the changes to Accordion component, next PR will continue porting the changes from [POC] Emotion Themes #387 and convert more components to FC

@michaeljaltamirano
Copy link
Contributor

michaeljaltamirano commented Oct 21, 2020

  • This is mostly a copy of the work from this PR [POC] Emotion Themes #387
  • Converted Accordion to FC. My main concern was defining the theme as AccordionProp while using the HOC, this will prompt consumers of Radiance to pass a theme prop. With hooks this is solved automatically. Tested with console logs the setContentHeight logic and works correctly with the new FC version.
  • Wanted to contain the changes to Accordion component, next PR will continue porting the changes from [POC] Emotion Themes #387 and convert more components to FC

Given this theming prop type issue you've discovered, I would recommend that we just focus our work for now on converting those components over in anticipation of adding the theme, once it's more fully fleshed out. Does that sound like a correct way to go about for now?

So:

  1. Split the function component refactor into its own PR--we can keep this one more long-standing for now.
  2. Follow-up PRs to convert the other components.

I also think we might need to create a long-standing branch to merge the theme changes into, because any changes to how we apply styles is going to create a blocker for any other radiance-ui changes that need to be released. We can discuss that in our building Slack channel, too.

@michaeljaltamirano michaeljaltamirano changed the base branch from master to epic/add-theming-functionality October 27, 2020 15:03
@@ -110,3 +113,38 @@ addParameters({
});

addons.setConfig(ADDONS_CONFIG);

export const globalTypes = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@daigof I removed the swap theme button because updating the global styles caused all of the stories are render with additional padding: https://www.chromatic.com/snapshot?appId=5f6e46f1e7081000221523cf&id=5f9857317557760022517a76

Decided to use @storybook/addon-toolbars for a more built-in solution.

Copy link
Contributor

@michaeljaltamirano michaeljaltamirano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the build fixes the visual regressions, will merge this in as a start in order to wrap up work on #463.

@daigof
Copy link
Contributor Author

daigof commented Oct 27, 2020

@michaeljaltamirano can this be merged after the cleanup part3?#464

@michaeljaltamirano
Copy link
Contributor

@michaeljaltamirano can this be merged after the cleanup part3?#464

The base branch here is epic/add-theming-functionality. They're not intersecting.

@michaeljaltamirano michaeljaltamirano merged commit 6fb4f55 into epic/add-theming-functionality Oct 27, 2020
@michaeljaltamirano michaeljaltamirano deleted the theme-setup-1 branch October 27, 2020 19:21
michaeljaltamirano added a commit that referenced this pull request Nov 9, 2020
* [Theme setup] Initial setup and Accordion example (#436)

* initial setup

* convert Acoordion,add  theme suport to stories

* complete accordion example

* shouldShowForEnvironment refactor

* commit snapshot size

* v13.0.0-alpha.1

* Replace swap button with addon-toolbars to fix visual regression

Co-authored-by: Michael Altamirano <michaeljaltamirano@gmail.com>

* [Theming] Add built-in TypeScript support (#463)

* initial setup

* convert Acoordion,add  theme suport to stories

* complete accordion example

* shouldShowForEnvironment refactor

* commit snapshot size

* v13.0.0-alpha.1

* Commit example with Rollup + TypeScript resolution

* Commit hard-coded import

* Revert "Commit hard-coded import"

This reverts commit 9713df2.

* PR Cleanup

* Remove rollup plugin

* Move type resolution files out of utils and into types folder

* Commit master size-snapshot

* Push last size-snapshot

Co-authored-by: Diego Fortes <daigof@gmail.com>

* [Theming] Convert Component Usage (Part I) (#467)

* Convert for Accordion.Thumbnails

* Convert easy cases: styled component and normal component usage

* Add @types/enzyme-adapter-react-16

* Pass in blank string instead of undefined to maintain some semblance of distinction (for now)

* Convert setupTests.js to ts

* Get tests passing, check on chromatic

* [Theming] Convert Component Usage (Part II, Buttons) (#475)

* Bump @types/react from 16.9.53 to 16.9.55 (#473)

* Bump @types/react-dom from 16.9.8 to 16.9.9 (#469)

* Bump @types/enzyme from 3.10.7 to 3.10.8 (#470)

* Bump lint-staged from 10.4.0 to 10.5.0 (#468)

* Rename primary and secondary files to match default export name, export new COLORS_PROP_TYPES for aliased values

* Export values as const for type inference, add secondary tints for lavender usage in buttons

* Button update: add theming, constrict typing, remove unnecessary css imports (when in-lining in styled component)

* Update size snapshot, new items due to new COLORS_PROP_TYPES usage

* Decorate tests

* Add back base button css composition, since typography depends on it

* Tighten textColor typing, too

* Override prettier, TODO: use prettier-eslint

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* [Theming] Convert Components (Part III) (#476)

* Update global styles and storybook preview configuration

* Update Callout, Chip, LoadingSpinner, and ProgressBar

* Update DialogModal, Tabs, and Toggle

* Update Dropdown

* Update SelectorButton styles, modify eslint rule

* Convert COntainer, ImmersiveModal, OptionButton

* Last commits: Container and Field, and update .size-snapshot

* Rename prop to get off DOM

* [Theming] Convert Components (Part IV) (#477)

* Bump @types/react from 16.9.53 to 16.9.55 (#473)

* Bump @types/react-dom from 16.9.8 to 16.9.9 (#469)

* Bump @types/enzyme from 3.10.7 to 3.10.8 (#470)

* Bump lint-staged from 10.4.0 to 10.5.0 (#468)

* Rename primary and secondary files to match default export name, export new COLORS_PROP_TYPES for aliased values

* Export values as const for type inference, add secondary tints for lavender usage in buttons

* Button update: add theming, constrict typing, remove unnecessary css imports (when in-lining in styled component)

* Update size snapshot, new items due to new COLORS_PROP_TYPES usage

* Decorate tests

* Add back base button css composition, since typography depends on it

* Tighten textColor typing, too

* Override prettier, TODO: use prettier-eslint

* Commit Typography WIP, save for last

* Fix build, update .size-snapshot, replace all TYPOGRAPHY_STYLE usages, including story

* Reconfigure stories/tsconfig, export ThemeColors instead for improved DX

* Fix bizarre formatting

* Fix formatting pt. 2

* One last eslint fix and prettier write cleanup

* try running through eslint-plugin-prettier

* Conform to docs order

* Remove floating semicolons

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* [Theming] Update Colors Export (#480)

* Bump @types/react from 16.9.53 to 16.9.55 (#473)

* Bump @types/react-dom from 16.9.8 to 16.9.9 (#469)

* Bump @types/enzyme from 3.10.7 to 3.10.8 (#470)

* Bump lint-staged from 10.4.0 to 10.5.0 (#468)

* Bump typescript from 4.0.3 to 4.0.5 (#471)

* Bump chromatic from 5.2.0 to 5.3.0 (#478)

* Bump @react-aria/focus from 3.2.2 to 3.2.3 (#479)

* Mass commit: add TODO to existing COLORS export, fix lingering COLORS imports, update stories

* Add react-is as devDependency to fix install warning

* Fix visual regression in Available Constants story

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* v13.0.0-alpha.2

* [Theming] Fix tsc output (#498)

* Re-arrange new files for theming to fix lib type file structure

* Fix window.matchMedia type by fleshing it out

* v13.0.0-alpha.3

* [Theming] Update Test Suite (#505)

* [Theming] Update Declarations  (#504)

* Merge declaration changes from master

* Rename code comment

* Do not make Button onClick event potentially undefined

* Keep Dropdown value type consistent

* v13.0.0-alpha.4

* Push size changes, too

* Narrow ReactNode to JSX.Element in ImmersiveModal title

* Simplify generics usage

* Increase carousel story delay to prevent load jank from failing regression test

Co-authored-by: Diego Fortes <daigof@gmail.com>
Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
daigof added a commit that referenced this pull request Nov 9, 2020
* [Theme setup] Initial setup and Accordion example (#436)

* initial setup

* convert Acoordion,add  theme suport to stories

* complete accordion example

* shouldShowForEnvironment refactor

* commit snapshot size

* v13.0.0-alpha.1

* Replace swap button with addon-toolbars to fix visual regression

Co-authored-by: Michael Altamirano <michaeljaltamirano@gmail.com>

* [Theming] Add built-in TypeScript support (#463)

* initial setup

* convert Acoordion,add  theme suport to stories

* complete accordion example

* shouldShowForEnvironment refactor

* commit snapshot size

* v13.0.0-alpha.1

* Commit example with Rollup + TypeScript resolution

* Commit hard-coded import

* Revert "Commit hard-coded import"

This reverts commit 9713df2.

* PR Cleanup

* Remove rollup plugin

* Move type resolution files out of utils and into types folder

* Commit master size-snapshot

* Push last size-snapshot

Co-authored-by: Diego Fortes <daigof@gmail.com>

* [Theming] Convert Component Usage (Part I) (#467)

* Convert for Accordion.Thumbnails

* Convert easy cases: styled component and normal component usage

* Add @types/enzyme-adapter-react-16

* Pass in blank string instead of undefined to maintain some semblance of distinction (for now)

* Convert setupTests.js to ts

* Get tests passing, check on chromatic

* [Theming] Convert Component Usage (Part II, Buttons) (#475)

* Bump @types/react from 16.9.53 to 16.9.55 (#473)

* Bump @types/react-dom from 16.9.8 to 16.9.9 (#469)

* Bump @types/enzyme from 3.10.7 to 3.10.8 (#470)

* Bump lint-staged from 10.4.0 to 10.5.0 (#468)

* Rename primary and secondary files to match default export name, export new COLORS_PROP_TYPES for aliased values

* Export values as const for type inference, add secondary tints for lavender usage in buttons

* Button update: add theming, constrict typing, remove unnecessary css imports (when in-lining in styled component)

* Update size snapshot, new items due to new COLORS_PROP_TYPES usage

* Decorate tests

* Add back base button css composition, since typography depends on it

* Tighten textColor typing, too

* Override prettier, TODO: use prettier-eslint

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* [Theming] Convert Components (Part III) (#476)

* Update global styles and storybook preview configuration

* Update Callout, Chip, LoadingSpinner, and ProgressBar

* Update DialogModal, Tabs, and Toggle

* Update Dropdown

* Update SelectorButton styles, modify eslint rule

* Convert COntainer, ImmersiveModal, OptionButton

* Last commits: Container and Field, and update .size-snapshot

* Rename prop to get off DOM

* [Theming] Convert Components (Part IV) (#477)

* Bump @types/react from 16.9.53 to 16.9.55 (#473)

* Bump @types/react-dom from 16.9.8 to 16.9.9 (#469)

* Bump @types/enzyme from 3.10.7 to 3.10.8 (#470)

* Bump lint-staged from 10.4.0 to 10.5.0 (#468)

* Rename primary and secondary files to match default export name, export new COLORS_PROP_TYPES for aliased values

* Export values as const for type inference, add secondary tints for lavender usage in buttons

* Button update: add theming, constrict typing, remove unnecessary css imports (when in-lining in styled component)

* Update size snapshot, new items due to new COLORS_PROP_TYPES usage

* Decorate tests

* Add back base button css composition, since typography depends on it

* Tighten textColor typing, too

* Override prettier, TODO: use prettier-eslint

* Commit Typography WIP, save for last

* Fix build, update .size-snapshot, replace all TYPOGRAPHY_STYLE usages, including story

* Reconfigure stories/tsconfig, export ThemeColors instead for improved DX

* Fix bizarre formatting

* Fix formatting pt. 2

* One last eslint fix and prettier write cleanup

* try running through eslint-plugin-prettier

* Conform to docs order

* Remove floating semicolons

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* [Theming] Update Colors Export (#480)

* Bump @types/react from 16.9.53 to 16.9.55 (#473)

* Bump @types/react-dom from 16.9.8 to 16.9.9 (#469)

* Bump @types/enzyme from 3.10.7 to 3.10.8 (#470)

* Bump lint-staged from 10.4.0 to 10.5.0 (#468)

* Bump typescript from 4.0.3 to 4.0.5 (#471)

* Bump chromatic from 5.2.0 to 5.3.0 (#478)

* Bump @react-aria/focus from 3.2.2 to 3.2.3 (#479)

* Mass commit: add TODO to existing COLORS export, fix lingering COLORS imports, update stories

* Add react-is as devDependency to fix install warning

* Fix visual regression in Available Constants story

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* v13.0.0-alpha.2

* [Theming] Fix tsc output (#498)

* Re-arrange new files for theming to fix lib type file structure

* Fix window.matchMedia type by fleshing it out

* v13.0.0-alpha.3

* [Theming] Update Test Suite (#505)

* [Theming] Update Declarations  (#504)

* Merge declaration changes from master

* Rename code comment

* Do not make Button onClick event potentially undefined

* Keep Dropdown value type consistent

* v13.0.0-alpha.4

* Push size changes, too

* Narrow ReactNode to JSX.Element in ImmersiveModal title

* Simplify generics usage

* refactor fonts to theme

* add test

* refactor out test util function

* reafctor util tester

* [TypeScript] Replace ThemeType Absolute Imports with Relative Imports (#510)

* Move ThemeType (and associated imports) to relative imports instead of absolute

* Update .size-snapshot.json

Co-authored-by: Michael Altamirano <michaeljaltamirano@gmail.com>
Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
michaeljaltamirano added a commit that referenced this pull request Nov 10, 2020
* [Themes] - Add fonts to themes (#509)

* [Theme setup] Initial setup and Accordion example (#436)

* initial setup

* convert Acoordion,add  theme suport to stories

* complete accordion example

* shouldShowForEnvironment refactor

* commit snapshot size

* v13.0.0-alpha.1

* Replace swap button with addon-toolbars to fix visual regression

Co-authored-by: Michael Altamirano <michaeljaltamirano@gmail.com>

* [Theming] Add built-in TypeScript support (#463)

* initial setup

* convert Acoordion,add  theme suport to stories

* complete accordion example

* shouldShowForEnvironment refactor

* commit snapshot size

* v13.0.0-alpha.1

* Commit example with Rollup + TypeScript resolution

* Commit hard-coded import

* Revert "Commit hard-coded import"

This reverts commit 9713df2.

* PR Cleanup

* Remove rollup plugin

* Move type resolution files out of utils and into types folder

* Commit master size-snapshot

* Push last size-snapshot

Co-authored-by: Diego Fortes <daigof@gmail.com>

* [Theming] Convert Component Usage (Part I) (#467)

* Convert for Accordion.Thumbnails

* Convert easy cases: styled component and normal component usage

* Add @types/enzyme-adapter-react-16

* Pass in blank string instead of undefined to maintain some semblance of distinction (for now)

* Convert setupTests.js to ts

* Get tests passing, check on chromatic

* [Theming] Convert Component Usage (Part II, Buttons) (#475)

* Bump @types/react from 16.9.53 to 16.9.55 (#473)

* Bump @types/react-dom from 16.9.8 to 16.9.9 (#469)

* Bump @types/enzyme from 3.10.7 to 3.10.8 (#470)

* Bump lint-staged from 10.4.0 to 10.5.0 (#468)

* Rename primary and secondary files to match default export name, export new COLORS_PROP_TYPES for aliased values

* Export values as const for type inference, add secondary tints for lavender usage in buttons

* Button update: add theming, constrict typing, remove unnecessary css imports (when in-lining in styled component)

* Update size snapshot, new items due to new COLORS_PROP_TYPES usage

* Decorate tests

* Add back base button css composition, since typography depends on it

* Tighten textColor typing, too

* Override prettier, TODO: use prettier-eslint

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* [Theming] Convert Components (Part III) (#476)

* Update global styles and storybook preview configuration

* Update Callout, Chip, LoadingSpinner, and ProgressBar

* Update DialogModal, Tabs, and Toggle

* Update Dropdown

* Update SelectorButton styles, modify eslint rule

* Convert COntainer, ImmersiveModal, OptionButton

* Last commits: Container and Field, and update .size-snapshot

* Rename prop to get off DOM

* [Theming] Convert Components (Part IV) (#477)

* Bump @types/react from 16.9.53 to 16.9.55 (#473)

* Bump @types/react-dom from 16.9.8 to 16.9.9 (#469)

* Bump @types/enzyme from 3.10.7 to 3.10.8 (#470)

* Bump lint-staged from 10.4.0 to 10.5.0 (#468)

* Rename primary and secondary files to match default export name, export new COLORS_PROP_TYPES for aliased values

* Export values as const for type inference, add secondary tints for lavender usage in buttons

* Button update: add theming, constrict typing, remove unnecessary css imports (when in-lining in styled component)

* Update size snapshot, new items due to new COLORS_PROP_TYPES usage

* Decorate tests

* Add back base button css composition, since typography depends on it

* Tighten textColor typing, too

* Override prettier, TODO: use prettier-eslint

* Commit Typography WIP, save for last

* Fix build, update .size-snapshot, replace all TYPOGRAPHY_STYLE usages, including story

* Reconfigure stories/tsconfig, export ThemeColors instead for improved DX

* Fix bizarre formatting

* Fix formatting pt. 2

* One last eslint fix and prettier write cleanup

* try running through eslint-plugin-prettier

* Conform to docs order

* Remove floating semicolons

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* [Theming] Update Colors Export (#480)

* Bump @types/react from 16.9.53 to 16.9.55 (#473)

* Bump @types/react-dom from 16.9.8 to 16.9.9 (#469)

* Bump @types/enzyme from 3.10.7 to 3.10.8 (#470)

* Bump lint-staged from 10.4.0 to 10.5.0 (#468)

* Bump typescript from 4.0.3 to 4.0.5 (#471)

* Bump chromatic from 5.2.0 to 5.3.0 (#478)

* Bump @react-aria/focus from 3.2.2 to 3.2.3 (#479)

* Mass commit: add TODO to existing COLORS export, fix lingering COLORS imports, update stories

* Add react-is as devDependency to fix install warning

* Fix visual regression in Available Constants story

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* v13.0.0-alpha.2

* [Theming] Fix tsc output (#498)

* Re-arrange new files for theming to fix lib type file structure

* Fix window.matchMedia type by fleshing it out

* v13.0.0-alpha.3

* [Theming] Update Test Suite (#505)

* [Theming] Update Declarations  (#504)

* Merge declaration changes from master

* Rename code comment

* Do not make Button onClick event potentially undefined

* Keep Dropdown value type consistent

* v13.0.0-alpha.4

* Push size changes, too

* Narrow ReactNode to JSX.Element in ImmersiveModal title

* Simplify generics usage

* refactor fonts to theme

* add test

* refactor out test util function

* reafctor util tester

* [TypeScript] Replace ThemeType Absolute Imports with Relative Imports (#510)

* Move ThemeType (and associated imports) to relative imports instead of absolute

* Update .size-snapshot.json

Co-authored-by: Michael Altamirano <michaeljaltamirano@gmail.com>
Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

* [Colors] Add 'transparent' color (#512)

* Add transparent as valid COLORS alias/value

Co-authored-by: Michael Altamirano <michaeljaltamirano@gmail.com>
Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants