-
Notifications
You must be signed in to change notification settings - Fork 0
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
feature/UIDS-442 add Button to DS #450
feature/UIDS-442 add Button to DS #450
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So exciting! This looks good I just had a few questions for you!
src/Button/Button.scss
Outdated
} | ||
} | ||
|
||
.btn-danger { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is there a reason this needs to be top level and not scoped by &.
within .Button
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It definitely should be! Thanks for catching.
src/Button/Button.scss
Outdated
); | ||
|
||
/* import bootstrap to set changes */ | ||
@import "~bootstrap/scss/bootstrap"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What is this needed for? Do react-bootstrap components not import their own css? Is this just to get access to the button-variant
mixin?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I do believe that the mixins do come from this import and is needed. Was also referring to the docs that say it's needed to use Bootstraps source sass files.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks like in the docs they are putting that import in their App.scss file vs. in each individual scss per component.
What do you think about something like we do in rails-server, where we have a separate bootstrap.scss file and import it into theme.scss. Then theme.scss is already imported at the top of every design system component I believe. Similar to what we do on rails server in ui_imports.scss.
This can let us selectively choose what to import from bootstrap based on our usage. For example, I think the only thing we are using right now would be the three required modules:
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
which gives us the button-variant
mixin. But likely other bootstrap components will require other mixins, so ideally we would have one central import we add at the top of each component scss vs. having multiple.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I attempted to create a similar bootstraps.scss
file that imports into theme.scss
in the DS. Was running into a Webpack issue on the rails-server side. I ended up just importing the node modules directly into Button.scss
and had no issues. Not sure if that's okay for now since the button-variant mixins are all that is needed right now for this Button component unless there's a fix for the webpack issue I'm not seeing?
As far as tracking, I'm all for just keeping the tracking on the rails-server side. Quickly explored and we should just be able to modify the TrackedButton
component to wrap around the Button
component. Something where we remove styling from the TrackedButton
but keep all event logging responsibilities there and keep our Button
purely presentational:
<TrackedButton
onClick={this.handleTestClick}
type="button"
event={trackingEvents.WORKSPACE_PARTICIPANTS_FILTERS_CLICKED}
eventData={
{
foo: 'bar'
}
}
>
<Button variant='primary'>ButtonWrappedInTrackedButton</Button>
</TrackedButton>
Webpack error:
ERROR in ./app/javascript/common/layout/layout.scss
08:39:02 webpack.1 | Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
08:39:02 webpack.1 | ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
08:39:02 webpack.1 | SyntaxError
08:39:02 webpack.1 |
08:39:02 webpack.1 | (52:10) Unknown word
08:39:02 webpack.1 |
08:39:02 webpack.1 | 50 | .#{$property-class + $infix + $property-class-modifier} {
08:39:02 webpack.1 | 51 | @each $property in $properties {
08:39:02 webpack.1 | > 52 | #{$property}: $value if($enable-important-utilities, !important, null);
08:39:02 webpack.1 | | ^
08:39:02 webpack.1 | 53 | }
08:39:02 webpack.1 | 54 | }
08:39:02 webpack.1 |
08:39:02 webpack.1 | at /Users/jasonbasuil/UserInterviews/rails-server/node_modules/webpack/lib/NormalModule.js:316:20
08:39:02 webpack.1 | at /Users/jasonbasuil/UserInterviews/rails-server/node_modules/loader-runner/lib/LoaderRunner.js:367:11
08:39:02 webpack.1 | at /Users/jasonbasuil/UserInterviews/rails-server/node_modules/loader-runner/lib/LoaderRunner.js:233:18
08:39:02 webpack.1 | at context.callback (/Users/jasonbasuil/UserInterviews/rails-server/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
08:39:02 webpack.1 | at /Users/jasonbasuil/UserInterviews/rails-server/node_modules/postcss-loader/src/index.js:207:9
08:39:02 webpack.1 | Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--8-1!node_modules/postcss-loader/src/index.js??ref--8-2!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/javascript/common/layout/layout.scss:
08:39:02 webpack.1 |
08:39:02 webpack.1 | ERROR in ./app/javascript/common/layout/layout.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/javascript/common/layout/layout.scss)
08:39:02 webpack.1 | Module build failed (from ./node_modules/postcss-loader/src/index.js):
08:39:02 webpack.1 | SyntaxError
08:39:02 webpack.1 |
08:39:02 webpack.1 | (52:10) Unknown word
08:39:02 webpack.1 |
08:39:02 webpack.1 | 50 | .#{$property-class + $infix + $property-class-modifier} {
08:39:02 webpack.1 | 51 | @each $property in $properties {
08:39:02 webpack.1 | > 52 | #{$property}: $value if($enable-important-utilities, !important, null);
08:39:02 webpack.1 | | ^
08:39:02 webpack.1 | 53 | }
08:39:02 webpack.1 | 54 | }
08:39:02 webpack.1 |
08:39:02 webpack.1 | Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--8-1!node_modules/postcss-loader/src/index.js??ref--8-2!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/javascript/participant/messenger/message_sender.scss:
08:39:02 webpack.1 |
08:39:02 webpack.1 | WARNING in ./app/javascript/participant/messenger/message_sender.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/javascript/participant/messenger/message_sender.scss)
08:39:02 webpack.1 | Module Warning (from ./node_modules/postcss-loader/src/index.js):
08:39:02 webpack.1 | Warning
08:39:02 webpack.1 |
08:39:02 webpack.1 | (93:3) end value has mixed support, consider using flex-end instead
08:39:02 webpack.1 | Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--8-1!node_modules/postcss-loader/src/index.js??ref--8-2!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/javascript/participant/project_listings/project_listing.scss:
08:39:02 webpack.1 |
08:39:02 webpack.1 | WARNING in ./app/javascript/participant/project_listings/project_listing.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/javascript/participant/project_listings/project_listing.scss)
08:39:02 webpack.1 | Module Warning (from ./node_modules/postcss-loader/src/index.js):
08:39:02 webpack.1 | Warning
08:39:02 webpack.1 |
08:39:02 webpack.1 | (73:3) end value has mixed support, consider using flex-end instead
08:39:02 webpack.1 | Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--8-1!node_modules/postcss-loader/src/index.js??ref--8-2!node_modules/sass-loader/dist/cjs.js??ref--8-3!app/javascript/researcher/participant_search/profile/hub_participant_profile_header.scss:
08:39:02 webpack.1 |
08:39:02 webpack.1 | WARNING in ./app/javascript/researcher/participant_search/profile/hub_participant_profile_header.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/dist/cjs.js??ref--8-3!./app/javascript/researcher/participant_search/profile/hub_participant_profile_header.scss)
08:39:02 webpack.1 | Module Warning (from ./node_modules/postcss-loader/src/index.js):
08:39:02 webpack.1 | Warning
08:39:02 webpack.1 |
08:39:02 webpack.1 | (71:5) start value has mixed support, consider using flex-start instead
08:39:02 webpack.1 | ℹ 「wdm」: Failed to compile.
src/Button/Button.scss
Outdated
$danger: $ux-red; | ||
$warning: $ux-yellow-400; | ||
|
||
$theme-colors: ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this setting some global theme for bootstrap or only relevant to the button component? Does this need to live somewhere else?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it does set it globally so not scoped to the Button component, but we might not actually need this? I set this originally in the beginning when starting to build the component based on documentation, but since we're using the button-variant
mixins to basically set all the custom styles for the button, I'm not entirely sure that the $theme-colors
is necessary right now unless we have other components that may make use of the global theme?
It seems to me like the order of the Bootstrap import affects the different button variants. So for example, setting a $secondary
variable to pink creates a globally available pink btn-secondary
(tho not styled properly) as well as a pink <Button variant='secondary'>
(styled properly) without using the $theme-colors
variables to set it.
Correctly sets styling
$primary: $ux-emerald-600;
$secondary: pink;
/* import bootstrap to set changes */
@import "~bootstrap/scss/bootstrap";
Does not set styling
/* import bootstrap to set changes */
@import "~bootstrap/scss/bootstrap";
$primary: $ux-emerald-600;
$secondary: pink;
Let me know if that doesn't make sense 😅
So excited for this!! Just a couple notes for each variant: Primary
Danger
Warning
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks great!!
This turned out to be more of a local linking issue rather than an issue with this branch specifically. Will need to look into it further later. Tracking here: #481
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
YAY buttons! Sorry for the delay - I do think there's some things to work through with our css (scss vs. styled components, defining or accessing scss vars in javascript, how we globally define our bootstrap imports so we don't have to reimport) but I think these things are all worthy of a separate effort to resolve and don't necessarily need to hold up the awesomeness that is buttons :)
* 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>
closes #442
Button
componentButton
componentFor cutover into rails-server, I'm most likely going to start with the Warning or Danger variants and just ensure stability of the component and identify any extra cleanup that might need to occur. I assume the Primary variant will take a few passes to update on RS, so can iterate if additional changes need to be made (including other variants that haven't been included yet).
https://www.figma.com/file/471iS3QrpPtXZpS1xbsJ20/Components?version-id=1070608432&node-id=7330%3A39808