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

feat: configprovider: add support for gradient and individual component theme containers #783

Conversation

dkilgore-eightfold
Copy link
Contributor

@dkilgore-eightfold dkilgore-eightfold commented Feb 13, 2024

SUMMARY:

  • Adds base palette linear-gradient css variables and mappings
  • Updates ConfigProvider to add a Gradient context and gradient prop
  • Updates ConfigProvider to add a Theme context
  • Updates legacy theme engine to support gradients
  • Updates styleGenerator to add gradient theme and individual scoped component theme containers support
  • Adds gradient theme support to Accordion, Button, Carousel, Dialog, InfoBar, LinkButton, Modal, Pagination, Panel, PanelHeader, Pill, Snackbar, Stepper, Stat, and Upload
  • Adds component container theme support to Accordion, Breadcrumb, Button, Carousel, CheckBox, Dialog InfoBar, Link, LinkButton, MatchScore Modal, Pagination, Panel, PanelHeader, PersistentBar, Progress, RadioButton, Tabs, TextArea, TextInput, SearchBar, Select, Slider, Snackbar, and Upload (Pill SkillTag, SkillBlock, Stat and Stepper use a less efficient legacy implementation - keeping 'as-is' for now)
  • Adds scoped theme modules to components that need their own containers
  • Adds Copilot SVGs and exports them
  • Adds Copilot Icons
  • Ensure border-radius is 0 in fullscreen Modal
  • Fixes bug in Pill component where the Button counter was not being themed properly and its insets were wrong
  • Updates MenuItemButton styles to align a bit better with Button
  • Adds colorInvert prop and its styles to Tabs pill variant.
  • Exports any types that were missed which were being used in the ConfigProvider stories
  • Exports Gradient and Theme context providers and their types
  • Fixes bug in Button where its counter spacing was too tight when there was no label
  • Fixes bug in TwoStateButton where its text color was using accent palette instead of bluegreen
  • Updates themes.ts so its arrays don't need to be reverse() and the hexidecimal casing is in line with the modules
  • Adds custom gradient theme support
  • Updates InfoBar to use background, rather than background-color
  • Updates InputStatus to include highlight and applies updates status styles to TextArea, TextInput, SearchBar, Select, TimePicker, and DatePicker
  • Updates stories
  • Updates --violet-color-30 to match the design specification
  • Updates some semantic variable colors to match the latest design specification in Button

An example where a button was changed to ButtonVariant.Primary with gradient, theme="blueViolet" and configContextProps={{ noThemeContext: true }} in a local test.
home

Storybook
https://github.com/EightfoldAI/octuple/assets/99700808/9222e250-f487-4f2b-8dc3-6277397fefdd

JIRA TASK (Eightfold Employees Only):

ENG-78260
ENG-78250
ENG-77347
ENG-77346
ENG-76044
ENG-76043
ENG-76042

CHANGE TYPE:

  • Bugfix Pull Request
  • Feature Pull Request

TEST COVERAGE:

  • Tests for this change already exist
  • I have added unittests for this change

TEST PLAN:

Pull the PR branch and run yarn and yarn storybook. Verify the ConfigProvider, Accordion, Button, Carousel, CheckBox, Dialog, InfoBar, Link, LinkButton, MatchScore, Modal, Pagination, Panel, PersistentBar, Pill, Progress, RadioButton, TextArea, TextInput, SearchBar, Select, Slider, Snackbar, Stepper, Timeline, Tabs, TimePicker,DatePicker, and Upload stories behave as expected.

Copy link

codesandbox-ci bot commented Feb 13, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Copy link

codecov bot commented Feb 13, 2024

Codecov Report

Attention: 177 lines in your changes are missing coverage. Please review.

Comparison is base (e828a69) 84.83% compared to head (dc1ec70) 84.37%.

Files Patch % Lines
src/components/PersistentBar/PersistentBar.tsx 34.28% 23 Missing ⚠️
...omponents/ConfigProvider/Theming/styleGenerator.ts 62.50% 18 Missing ⚠️
src/components/Panel/PanelHeader.tsx 0.00% 18 Missing ⚠️
src/components/Upload/Cropper/Cropper.tsx 0.00% 15 Missing ⚠️
src/components/Slider/Slider.tsx 83.72% 14 Missing ⚠️
src/components/LinkButton/LinkButton.tsx 59.25% 11 Missing ⚠️
src/components/Pagination/Pagination.tsx 84.21% 6 Missing and 3 partials ⚠️
src/components/Select/Select.tsx 75.00% 6 Missing ⚠️
src/components/Inputs/TextInput/TextInput.tsx 87.17% 5 Missing ⚠️
src/components/Button/Button.tsx 66.66% 4 Missing ⚠️
... and 32 more
Additional details and impacted files
@@            Coverage Diff             @@
##             main     #783      +/-   ##
==========================================
- Coverage   84.83%   84.37%   -0.47%     
==========================================
  Files         999     1008       +9     
  Lines       19552    19866     +314     
  Branches     7302     7530     +228     
==========================================
+ Hits        16587    16762     +175     
- Misses       2885     3022     +137     
- Partials       80       82       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@dkilgore-eightfold dkilgore-eightfold merged commit c9d0e83 into EightfoldAI:main Feb 23, 2024
3 of 6 checks passed
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