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

[Epic] Add Theming Functionality #466

Merged
merged 18 commits into from
Nov 9, 2020

Conversation

michaeljaltamirano
Copy link
Contributor

@michaeljaltamirano michaeljaltamirano commented Oct 28, 2020

This PR includes all of the changes necessary for a new major version (v13) of radiance-ui.

  1. Adds theming around all component usage.
    • Exports primaryTheme and work-in-progress secondaryTheme from radiance-ui/lib/constants, too.
  2. Overhauls storybook and test suite for new theme paradigm.
  3. Updates types declarations (once [Theming] Update Declarations  #504 is merged in).

daigof and others added 4 commits October 27, 2020 14:21
* 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>
* 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>
@snags88 snags88 temporarily deployed to curology-radiance-pr-466 October 28, 2020 16:24 Inactive
* 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
@snags88 snags88 temporarily deployed to curology-radiance-pr-466 October 28, 2020 20:24 Inactive
* 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>
@snags88 snags88 temporarily deployed to curology-radiance-pr-466 October 29, 2020 15:50 Inactive
* 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
@snags88 snags88 temporarily deployed to curology-radiance-pr-466 October 29, 2020 19:53 Inactive
* 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>
@snags88 snags88 temporarily deployed to curology-radiance-pr-466 October 30, 2020 15:27 Inactive
* 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>
@snags88 snags88 temporarily deployed to curology-radiance-pr-466 October 30, 2020 19:37 Inactive
@snags88 snags88 temporarily deployed to curology-radiance-pr-466 October 30, 2020 19:42 Inactive
@michaeljaltamirano michaeljaltamirano marked this pull request as ready for review November 5, 2020 15:36
package.json Outdated Show resolved Hide resolved
* 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
Copy link
Contributor

@daigof daigof left a comment

Choose a reason for hiding this comment

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

Great Job. There is a change in Chromatic Carousel but I tested and it works the same as PROD there is a slight animation of the cards at the beginning.

@michaeljaltamirano

    /**
     * There is visual jank when this component loads--this reduces brittleness in Chromatic
     */
    chromatic: { delay: parseInt(ANIMATION.defaultTiming, 10) },

I suggest just put an arbitrary value here since we are not depending in ANIMATION.defaultTiming in Carousel, it is left to react-slick internally, how about 500?

@michaeljaltamirano
Copy link
Contributor Author

Merging this in--it looks like we might need one follow-up PR for types, it doesn't look like ThemeType is persisting as I'd expect in the consumer apps, but I'd like to get this in master

@michaeljaltamirano michaeljaltamirano merged commit eec08e1 into master Nov 9, 2020
@michaeljaltamirano michaeljaltamirano deleted the epic/add-theming-functionality branch November 9, 2020 15:44
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