Feature RS-8352 Tabs #477

careful-axe · 2021-11-30T04:36:14Z

Added react-bootstrap so we can wrap their Tabs and Tab components and then added styled-components so the style overrides don't get loose in rails-server.

Added a bunch of react-testing-library packages and added a spec helper so that jest-dom functions such as toHaveClass and toBeInTheDocument accessible in tests without having to import in every file.

Screenshot showing new design system tabs (top) and current rails tabs (bottom) look and act the same. Will be separate pr to implement in rails-server once Tabs are live.

Didn't add theming since felt like would be a lot for one pr but I would love to, so maybe will add? Otherwise used variables instead for shared css values which might not be the most graceful solution?

Screenshots from storybook:

Known issues small issues:

Should be using toBeInTheDocument instead of toHaveClass in the the tests, but non-active components are displaying likely due to not having full css in the tests. Will research further into this.
There is an TypeError: Cannot set properties of undefined (setting 'hook') console error when you click tabs, this does not show up in the rails server but is annoying and weird in the design system and so do want to resolve this.
Lint error Error: 1:8 error '@testing-library/jest-dom' should be listed in the project's dependencies, not devDependencies import/no-extraneous-dependencies that is weird since why would jest-dom be in the main dependencies? Disabled but want to look a bit more into it.

jojolee1996 · 2021-12-01T22:13:49Z

This is looking great Jane! Love the hover transitions. The only thing I wanted to comment on is that the disabled state is the same color as the non-disabled state, which might be confusing on mobile where there isn't a hover state.

Can we make the following color changes to help differentiate between these two states:

Non-disabled: $ux-gray-800
Disabled: $ux-gray-600

careful-axe · 2021-12-01T22:26:14Z

This is looking great Jane! Love the hover transitions. The only thing I wanted to comment on is that the disabled state is the same color as the non-disabled state, which might be confusing on mobile where there isn't a hover state.

Can we make the following color changes to help differentiate between these two states:

Non-disabled: $ux-gray-800

Disabled: $ux-gray-600

@jojolee1996 great idea, made the changes and just pushed. Screenshot attached for convenience.

jasonbasuil

This is really awesome Jane! Thanks so much for bringing this in. It looks great.

Some general comments. It's great to see some introduction to styled-components and how it can potentially help with some override issues that have popped up periodically on rails-server. It's cool to see the unique className that gets generated. It definitely is a different way to approach our styling and may have different implications within our broader application / what already exists. That being said, I'm okay leaning into giving styled-components a trial run within the context of this component (since I know you've been advocating for using it for some time! 😄 ) I imagine we probably won't transition to styled-components right away until we reach a little bit more stability within the Design System / deal with some global styling debt on the rails-server side...but I could be wrong!

Curious what you and others think!

jasonbasuil · 2021-12-02T17:30:57Z

package.json

@@ -2,9 +2,12 @@
  "name": "@user-interviews/ui-design-system",
  "version": "1.23.2",
  "dependencies": {
+    "node-sass": "^4.14.1",
+    "react-bootstrap": "^2.0.2",


Exciting to see more components using React Bootstrap! 🥳

src/Tabs/Tabs.styles.js

jasonbasuil · 2021-12-02T17:44:37Z

src/Tabs/Tabs.styles.js

+import colors from '../Styles/colors/palette';
+
+const borderWidth = '2px';
+const fontType30 = '400 0.875rem/1.25rem DM Sans, sans-serif';


I'm curious, if we were to adopt styled-components more broadly, we'd have to create new font-type tokens like this for all of our existing ones? Just thinking ahead to what that might look like instead of hard-coding in weights, size, type, etc.

I think the theming would be the best answer for that but as an interim solution we can just do the same thing we did with colors, which is have a centralized object which can then be used for theming in a heartbeat when we are ready for it.

That would also be where the border widths would live with some usable name rather than a variable within the styles file.

There is a more graceful way to do this for sure though, I can explore options was just hoping to sneak past with this until we had something we all liked. I can create some potential solutions off of this pr as a point of discussion.

For now is ok to put a TODO in there (already added) and iterate on it a little later?

I always wished for some kind of webpack config that would let us export variables from scss to use in javascript (for fonts and colors, so we could have one source of truth) like this https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/ or https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass but I played around with it a little bit a while back without any luck. I'm cool with having a todo for now to explore our options as I feel like that problem already exists for us with the colors as well.

Yeah I did a little poking along those lines too and there seems to be an awful lot of friction to it... but is open question for sure which we can and should swing back to. I lean towards theming since is just such a powerful way to share variables but as it potentially loses a bunch of the beauty of scss so regardless of that leaning still want to research ways to have the best of both worlds which is having scss.

jasonbasuil · 2021-12-02T17:45:56Z

src/Tabs/Tabs.styles.js

+
+export const StyledTabsWrapper = styled.span`
+  .nav-tabs {
+    border-bottom: ${borderWidth} solid ${colors.UX_GRAY_400};


neat that we can use our JS color variables here 😄

rroppolo

So sorry for the delay @careful-axe! These look great - I am good with separating out the theming / style vars conversation into a separate issue/pr to not block this 👍

src/Tabs/Tab/Tab.jsx

rroppolo · 2021-12-03T19:04:10Z

src/Tabs/Tabs.mdx

+### Uncontrolled Tabs
+- **activeKey:** Leave undefined
+- **defaultActiveKey:** Required
+- **onSelect:** Leave undefined


I really like how you added separate instructions for controlled and uncontrolled! I feel like some of our form inputs could benefit from a similar treatment.

rroppolo · 2021-12-03T19:12:40Z

src/Tabs/Tabs.styles.js

+import colors from '../Styles/colors/palette';
+
+const borderWidth = '2px';
+const fontType30 = '400 0.875rem/1.25rem DM Sans, sans-serif';


I always wished for some kind of webpack config that would let us export variables from scss to use in javascript (for fonts and colors, so we could have one source of truth) like this https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/ or https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass but I played around with it a little bit a while back without any luck. I'm cool with having a todo for now to explore our options as I feel like that problem already exists for us with the colors as well.

frankhock

this looks awesome, excited to be creeping into the css-in-js world again!

package.json

frankhock · 2021-12-03T19:41:18Z

package.json

    "react-router-dom": "^5.2.0",
    "react-select": "^3.0.8",
    "react-transition-group": "^4.3.0",
+    "styled-components": "^5.3.3",


❓ should this be a peer dependency as we use styled-components in the RS repo already?

The end goal is that the design system can stand completely on its own but even so if this is moved out of here storybook breaks.

Ooh good call - for other packages that are already present in rails-server we create them as peer dependencies and then also add them to devDependencies to work independently

Ah gotcha I didn't realize dev supported storybook, added to dev and peer and storybook works again, thanks for the heads up...

src/Tabs/Tab/Tab.jsx

* HOTFIX update tooltip primary variant to ux-emerald (#415) * Feature RS-8352 Tabs (#477) Add Tabs and Tabs with react-bootstrap and styled-components * feature/UIDS-442 add Button to DS (#450) Adds react-bootstrap and Button component to the Design System * Bug/UIDS-484 Set node version on nightly visual tests (#485) * chore/UIDS-476 documentation updates (#486) * Chore/ Add Percy snapshots for buttons (#488) * Chore/ Delete old sample file for cypress tests (#482) * Merge hotfix/1.24.1 into develop branch (#493) * allows Tooltip to open on hover (#487) * Prepare release 1.25.0 Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* allows Tooltip to open on hover (#487) * Prepare hotfix 1.24.1 (#492) * Merge release/1.25.0 into main branch (#494) * HOTFIX update tooltip primary variant to ux-emerald (#415) * Feature RS-8352 Tabs (#477) Add Tabs and Tabs with react-bootstrap and styled-components * feature/UIDS-442 add Button to DS (#450) Adds react-bootstrap and Button component to the Design System * Bug/UIDS-484 Set node version on nightly visual tests (#485) * chore/UIDS-476 documentation updates (#486) * Chore/ Add Percy snapshots for buttons (#488) * Chore/ Delete old sample file for cypress tests (#482) * Merge hotfix/1.24.1 into develop branch (#493) * allows Tooltip to open on hover (#487) * Prepare release 1.25.0 Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * update relative bootstrap imports (#497) * Prepare hotfix 1.25.1 Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com>

* HOTFIX update tooltip primary variant to ux-emerald (#415) * Feature RS-8352 Tabs (#477) Add Tabs and Tabs with react-bootstrap and styled-components * feature/UIDS-442 add Button to DS (#450) Adds react-bootstrap and Button component to the Design System * Bug/UIDS-484 Set node version on nightly visual tests (#485) * chore/UIDS-476 documentation updates (#486) * Chore/ Add Percy snapshots for buttons (#488) * Chore/ Delete old sample file for cypress tests (#482) * Merge hotfix/1.24.1 into develop branch (#493) * allows Tooltip to open on hover (#487) * Merge release/1.25.0 into develop branch (#495) * allows Tooltip to open on hover (#487) * Prepare hotfix 1.24.1 (#492) * Prepare release 1.25.0 Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Merge hotfix/1.25.1 into develop branch (#499) * allows Tooltip to open on hover (#487) * Prepare hotfix 1.24.1 (#492) * Merge release/1.25.0 into main branch (#494) * HOTFIX update tooltip primary variant to ux-emerald (#415) * Feature RS-8352 Tabs (#477) Add Tabs and Tabs with react-bootstrap and styled-components * feature/UIDS-442 add Button to DS (#450) Adds react-bootstrap and Button component to the Design System * Bug/UIDS-484 Set node version on nightly visual tests (#485) * chore/UIDS-476 documentation updates (#486) * Chore/ Add Percy snapshots for buttons (#488) * Chore/ Delete old sample file for cypress tests (#482) * Merge hotfix/1.24.1 into develop branch (#493) * allows Tooltip to open on hover (#487) * Prepare release 1.25.0 Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * update relative bootstrap imports (#497) * Prepare hotfix 1.25.1 Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> * Chore/wait a bit longer for things to render on some percy snapshots (#503) * UIDS-438 Add AsyncCreatableSelect (#500) * UIDS-506 Update Form to handle GET method (#507) Previously passing a GET method would have worked for Rails, but it wouldn't put the params in the URL which is the expected behavior. This makes it so we properly pass GET directly to the form method parameter. One other thing this does is remove the CSRF params if GET is passed. These are ignored in GET and thus aren't necessary and would add extra params to the URL. One potential upgrade that was left on the cutting room floor was passing any extra props directly to the form component. * CHORE Fix node version in deploy action (#510) * CHORE Fix yaml spacing on deploy action (#512) * feature/UIDS-312 add Dropdown to DS (#502) * adds Dropdown and subcomponents * adds DropdownIconToggle * creates shared button mixins * remove children proptype, consolidate shared proptypes * add Percy snapshots for Dropdowns * Prepare release 1.26.0 Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Bob Saris <bob@userinterviews.com>

* allows Tooltip to open on hover (#487) * Prepare hotfix 1.24.1 (#492) * Merge release/1.25.0 into main branch (#494) * HOTFIX update tooltip primary variant to ux-emerald (#415) * Feature RS-8352 Tabs (#477) Add Tabs and Tabs with react-bootstrap and styled-components * feature/UIDS-442 add Button to DS (#450) Adds react-bootstrap and Button component to the Design System * Bug/UIDS-484 Set node version on nightly visual tests (#485) * chore/UIDS-476 documentation updates (#486) * Chore/ Add Percy snapshots for buttons (#488) * Chore/ Delete old sample file for cypress tests (#482) * Merge hotfix/1.24.1 into develop branch (#493) * allows Tooltip to open on hover (#487) * Prepare release 1.25.0 Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * update relative bootstrap imports (#497) * Prepare hotfix 1.25.1 (#498) * Prepare release 1.26.0 Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com>

* allows Tooltip to open on hover (#487) * Prepare hotfix 1.24.1 (#492) * Merge release/1.25.0 into main branch (#494) * HOTFIX update tooltip primary variant to ux-emerald (#415) * Feature RS-8352 Tabs (#477) Add Tabs and Tabs with react-bootstrap and styled-components * feature/UIDS-442 add Button to DS (#450) Adds react-bootstrap and Button component to the Design System * Bug/UIDS-484 Set node version on nightly visual tests (#485) * chore/UIDS-476 documentation updates (#486) * Chore/ Add Percy snapshots for buttons (#488) * Chore/ Delete old sample file for cypress tests (#482) * Merge hotfix/1.24.1 into develop branch (#493) * allows Tooltip to open on hover (#487) * Prepare release 1.25.0 Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * update relative bootstrap imports (#497) * Prepare hotfix 1.25.1 (#498) * Merge release/1.26.0 into main branch (#513) * HOTFIX update tooltip primary variant to ux-emerald (#415) * Feature RS-8352 Tabs (#477) Add Tabs and Tabs with react-bootstrap and styled-components * feature/UIDS-442 add Button to DS (#450) Adds react-bootstrap and Button component to the Design System * Bug/UIDS-484 Set node version on nightly visual tests (#485) * chore/UIDS-476 documentation updates (#486) * Chore/ Add Percy snapshots for buttons (#488) * Chore/ Delete old sample file for cypress tests (#482) * Merge hotfix/1.24.1 into develop branch (#493) * allows Tooltip to open on hover (#487) * Merge release/1.25.0 into develop branch (#495) * allows Tooltip to open on hover (#487) * Prepare hotfix 1.24.1 (#492) * Prepare release 1.25.0 Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Merge hotfix/1.25.1 into develop branch (#499) * allows Tooltip to open on hover (#487) * Prepare hotfix 1.24.1 (#492) * Merge release/1.25.0 into main branch (#494) * HOTFIX update tooltip primary variant to ux-emerald (#415) * Feature RS-8352 Tabs (#477) Add Tabs and Tabs with react-bootstrap and styled-components * feature/UIDS-442 add Button to DS (#450) Adds react-bootstrap and Button component to the Design System * Bug/UIDS-484 Set node version on nightly visual tests (#485) * chore/UIDS-476 documentation updates (#486) * Chore/ Add Percy snapshots for buttons (#488) * Chore/ Delete old sample file for cypress tests (#482) * Merge hotfix/1.24.1 into develop branch (#493) * allows Tooltip to open on hover (#487) * Prepare release 1.25.0 Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * update relative bootstrap imports (#497) * Prepare hotfix 1.25.1 Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> * Chore/wait a bit longer for things to render on some percy snapshots (#503) * UIDS-438 Add AsyncCreatableSelect (#500) * UIDS-506 Update Form to handle GET method (#507) Previously passing a GET method would have worked for Rails, but it wouldn't put the params in the URL which is the expected behavior. This makes it so we properly pass GET directly to the form method parameter. One other thing this does is remove the CSRF params if GET is passed. These are ignored in GET and thus aren't necessary and would add extra params to the URL. One potential upgrade that was left on the cutting room floor was passing any extra props directly to the form component. * CHORE Fix node version in deploy action (#510) * CHORE Fix yaml spacing on deploy action (#512) * feature/UIDS-312 add Dropdown to DS (#502) * adds Dropdown and subcomponents * adds DropdownIconToggle * creates shared button mixins * remove children proptype, consolidate shared proptypes * add Percy snapshots for Dropdowns * Prepare release 1.26.0 Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Bob Saris <bob@userinterviews.com> * Prepare release 1.26.1 Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: Bob Saris <bob@userinterviews.com>

* allows Tooltip to open on hover (#487) * Prepare hotfix 1.24.1 (#492) * Merge release/1.25.0 into main branch (#494) * HOTFIX update tooltip primary variant to ux-emerald (#415) * Feature RS-8352 Tabs (#477) Add Tabs and Tabs with react-bootstrap and styled-components * feature/UIDS-442 add Button to DS (#450) Adds react-bootstrap and Button component to the Design System * Bug/UIDS-484 Set node version on nightly visual tests (#485) * chore/UIDS-476 documentation updates (#486) * Chore/ Add Percy snapshots for buttons (#488) * Chore/ Delete old sample file for cypress tests (#482) * Merge hotfix/1.24.1 into develop branch (#493) * allows Tooltip to open on hover (#487) * Prepare release 1.25.0 Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * update relative bootstrap imports (#497) * Prepare hotfix 1.25.1 (#498) * Merge release/1.26.0 into main branch (#513) * HOTFIX update tooltip primary variant to ux-emerald (#415) * Feature RS-8352 Tabs (#477) Add Tabs and Tabs with react-bootstrap and styled-components * feature/UIDS-442 add Button to DS (#450) Adds react-bootstrap and Button component to the Design System * Bug/UIDS-484 Set node version on nightly visual tests (#485) * chore/UIDS-476 documentation updates (#486) * Chore/ Add Percy snapshots for buttons (#488) * Chore/ Delete old sample file for cypress tests (#482) * Merge hotfix/1.24.1 into develop branch (#493) * allows Tooltip to open on hover (#487) * Merge release/1.25.0 into develop branch (#495) * allows Tooltip to open on hover (#487) * Prepare hotfix 1.24.1 (#492) * Prepare release 1.25.0 Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Merge hotfix/1.25.1 into develop branch (#499) * allows Tooltip to open on hover (#487) * Prepare hotfix 1.24.1 (#492) * Merge release/1.25.0 into main branch (#494) * HOTFIX update tooltip primary variant to ux-emerald (#415) * Feature RS-8352 Tabs (#477) Add Tabs and Tabs with react-bootstrap and styled-components * feature/UIDS-442 add Button to DS (#450) Adds react-bootstrap and Button component to the Design System * Bug/UIDS-484 Set node version on nightly visual tests (#485) * chore/UIDS-476 documentation updates (#486) * Chore/ Add Percy snapshots for buttons (#488) * Chore/ Delete old sample file for cypress tests (#482) * Merge hotfix/1.24.1 into develop branch (#493) * allows Tooltip to open on hover (#487) * Prepare release 1.25.0 Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * update relative bootstrap imports (#497) * Prepare hotfix 1.25.1 Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> * Chore/wait a bit longer for things to render on some percy snapshots (#503) * UIDS-438 Add AsyncCreatableSelect (#500) * UIDS-506 Update Form to handle GET method (#507) Previously passing a GET method would have worked for Rails, but it wouldn't put the params in the URL which is the expected behavior. This makes it so we properly pass GET directly to the form method parameter. One other thing this does is remove the CSRF params if GET is passed. These are ignored in GET and thus aren't necessary and would add extra params to the URL. One potential upgrade that was left on the cutting room floor was passing any extra props directly to the form component. * CHORE Fix node version in deploy action (#510) * CHORE Fix yaml spacing on deploy action (#512) * feature/UIDS-312 add Dropdown to DS (#502) * adds Dropdown and subcomponents * adds DropdownIconToggle * creates shared button mixins * remove children proptype, consolidate shared proptypes * add Percy snapshots for Dropdowns * Prepare release 1.26.0 Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Bob Saris <bob@userinterviews.com> * Merge release/1.26.1 into main branch (#517) * UIDS-501 Export color variables for use in js (#504) * use font-type-30 on form-control (#516) * Prepare release 1.26.1 * Fix merge conflicts on 1.27.0 * Merge release/1.28.0 into main branch (#563) * updates Dropdown documentation, adds Figma addon for illustrations (#554) * add transparent Button variant & update DropdownIconToggle (#560) Adding the transparent and outline transparent variant to the Button component. Uses transparent button variant in ModalFooter actions for closing. Updates DropdownToggle to support icon-only dropdown. Removes DropdownIconToggle in favor of using DropdownToggle to better support flexible styling. * Prepare release 1.28.0 Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Merge release/1.29.0 into main branch (#569) * add CardList to DS (#567) Adds a CardList layout component to wrap around existing design system Cards. * update Pill color and border (#568) Updates Pills colors, removes Pill border, and introduces a Pills layout component to wrap around a collection of Pill components. * Prepare release 1.29.0 Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Merge release/1.29.1 into main branch (#578) * remove margin from Card (#572) * rename CardList to CardContainer (#574) Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Merge release/1.29.2 into main branch (#594) * Button and Link distinction documentation (#587) * add brand variants to Button (#593) Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * remove extra version in package.json * Merge release/1.30.0 into main branch (#611) * removing TrackedButton from export (#603) * add aria-live to Toast (#605) * handle setting title prop on Toast (#607) * update focus state to Button and Select (#601) Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Merge release/1.30.1 into main branch (#618) * fix styles on Select to allow for tabbing and proper focus (#617) * Merge release/1.30.2 into main branch (#624) * allow setting id on InputLabel (#621) * add id to FormGroup__invalid-feedback (#623) * Merge release/1.30.3 into main branch (#629) * update Input focus boder to ux-blue-500 for 3:1 contrast ratio (#628) * Merge release/1.31.0 into main branch (#633) * update FormGroup and InputLabel to support fieldset and legend (#632) * Merge release/1.31.1 into main branch (#642) * change FormControlLabel label and children to span (#638) * updating input scss variables (#641) * Prepare release 1.31.1 * Merge release/1.32.0 into main branch (#660) * remove required id from FormGroup (#645) * Fix cypress tests (#647) * Add data-testid to LoadingOverlay (#652) * add Link variant to Button component (#659) * upgrade react-select v5 (#658) * Add Accordion to DS (#656) * update snapshots * Prepare release 1.32.1 Co-authored-by: Jason Basuil <basuilj@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Rachel Roppolo <rachel@userinterviews.com> Co-authored-by: Jane Sebastian <jane@userinterviews.com> Co-authored-by: brianCollinsUI <84730553+brianCollinsUI@users.noreply.github.com> Co-authored-by: Bob Saris <bob@userinterviews.com> Co-authored-by: Rachel Roppolo <rroppolo@Rachels-MacBook-Pro.local>

careful-axe added 4 commits November 29, 2021 20:17

Add react-bootstrap and styled-components; spec_helper

976960d

Add Tabs and Tabs

78615dc

storyshot Tabs

8bfd9e6

spec_helper in spec directory

169c678

careful-axe requested review from rroppolo, jasonbasuil, jojolee1996 and frankhock November 30, 2021 04:45

Update Tab colors

b90c3b4

jojolee1996 approved these changes Dec 1, 2021

View reviewed changes

jasonbasuil reviewed Dec 2, 2021

View reviewed changes

careful-axe added 2 commits December 2, 2021 10:43

Use rem for border width

7e8c833

Add a TODO for the global border widths and fonts

058a64f

rroppolo approved these changes Dec 3, 2021

View reviewed changes

Tab title property is required

96e5eec

frankhock reviewed Dec 3, 2021

View reviewed changes

careful-axe added 2 commits December 3, 2021 13:11

Move node-sass to devDependencies

92dbaa3

Move styled-components to dev and peer dependencies

8bdda39

careful-axe merged commit 22b5d16 into develop Dec 3, 2021

careful-axe deleted the feature/RS-8352-Tabs branch December 3, 2021 23:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature RS-8352 Tabs #477

Feature RS-8352 Tabs #477

careful-axe commented Nov 30, 2021 •

edited

Loading

jojolee1996 commented Dec 1, 2021

careful-axe commented Dec 1, 2021 •

edited

Loading

jasonbasuil left a comment

jasonbasuil Dec 2, 2021

jasonbasuil Dec 2, 2021

careful-axe Dec 2, 2021

rroppolo Dec 3, 2021

careful-axe Dec 3, 2021

jasonbasuil Dec 2, 2021

rroppolo left a comment

rroppolo Dec 3, 2021

rroppolo Dec 3, 2021

frankhock left a comment

frankhock Dec 3, 2021

careful-axe Dec 3, 2021

rroppolo Dec 3, 2021

careful-axe Dec 3, 2021

Feature RS-8352 Tabs #477

Feature RS-8352 Tabs #477

Conversation

careful-axe commented Nov 30, 2021 • edited Loading

jojolee1996 commented Dec 1, 2021

careful-axe commented Dec 1, 2021 • edited Loading

jasonbasuil left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rroppolo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frankhock left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

careful-axe commented Nov 30, 2021 •

edited

Loading

careful-axe commented Dec 1, 2021 •

edited

Loading