From 49e60941fe1fbeb23e5a97a0853ab793222b3542 Mon Sep 17 00:00:00 2001 From: Danny Kim Date: Wed, 31 May 2023 15:12:12 -0400 Subject: [PATCH 1/5] fix: select element with base story --- .../images/angle-arrow-down-gray-90.svg | 1 + .../src/components/select/select.stories.js | 64 ++++++++ packages/vanilla/src/sass/base/_core.scss | 3 +- .../vanilla/src/sass/components/_select.scss | 152 ------------------ .../src/sass/components/select/_index.scss | 38 +++++ 5 files changed, 104 insertions(+), 154 deletions(-) create mode 100644 packages/vanilla/assets/images/angle-arrow-down-gray-90.svg create mode 100644 packages/vanilla/src/components/select/select.stories.js delete mode 100644 packages/vanilla/src/sass/components/_select.scss create mode 100644 packages/vanilla/src/sass/components/select/_index.scss diff --git a/packages/vanilla/assets/images/angle-arrow-down-gray-90.svg b/packages/vanilla/assets/images/angle-arrow-down-gray-90.svg new file mode 100644 index 00000000..1a5d2442 --- /dev/null +++ b/packages/vanilla/assets/images/angle-arrow-down-gray-90.svg @@ -0,0 +1 @@ +angle-arrow-down-gray-90 \ No newline at end of file diff --git a/packages/vanilla/src/components/select/select.stories.js b/packages/vanilla/src/components/select/select.stories.js new file mode 100644 index 00000000..1e1bdd56 --- /dev/null +++ b/packages/vanilla/src/components/select/select.stories.js @@ -0,0 +1,64 @@ +export default { + title: 'Patterns', + parameters: { + html: { + root: '.cbp-form' + } + }, + decorators: [ + (Story, context) => ` +
+ +

${context.args.inputDescription}

+

${context.args.errorMessage}

+ ${Story().outerHTML || Story()} +
+ ` + ] +} + +const Template = ({ labelFor, formControlName, placeholderOption, optionsObj: { option1, option2, option3, option4, option5} }) => ( + ` + + ` +) + +export const Select = Template.bind({}); +Select.args = { + label: 'Port of Departure', + labelFor: 'port', + inputDescription: 'Required.', + formControlName: 'departurePort', + placeholderOption: 'Choose Port', + errorMessage: 'This field is required.', + optionsObj: { + option1: { + value: 'baltimore', + label: 'Port of Baltimore' + }, + option2: { + value: 'boston', + label: 'Port of Boston' + }, + option3: { + value: 'philadelphia', + label: 'Port of Philadelphia' + }, + option4: { + value: 'washington', + label: 'Port of Washington' + }, + option5: { + value: 'zoolily', + label: 'Port of Zoolily' + }, + }, + required: false, +}; \ No newline at end of file diff --git a/packages/vanilla/src/sass/base/_core.scss b/packages/vanilla/src/sass/base/_core.scss index 92aa6b88..82dcfc82 100644 --- a/packages/vanilla/src/sass/base/_core.scss +++ b/packages/vanilla/src/sass/base/_core.scss @@ -28,8 +28,7 @@ button { [aria-disabled=true], :disabled, input:read-only:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]), -textarea:read-only, -select:read-only { +textarea:read-only { cursor: not-allowed; } diff --git a/packages/vanilla/src/sass/components/_select.scss b/packages/vanilla/src/sass/components/_select.scss deleted file mode 100644 index 64b44905..00000000 --- a/packages/vanilla/src/sass/components/_select.scss +++ /dev/null @@ -1,152 +0,0 @@ -//@use '../base/colors' as *; - -/* Select (Form Input) */ -.select-wrapper { - display: flex; -} - -select { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - background-color: transparent; - border-radius: 3px; - cursor: inherit; - font-family: inherit; - font-size: inherit; - height: 36px; - line-height: inherit; - padding-left: 8px; - padding-right: 8px; - width: 100%; - z-index: 2; - - &:focus:not([disabled]) { - outline: 0; - } - - &:invalid { - color: var(--cbp-color-text-dark); - font-style: italic; - } -} - -/* Down Caret "Button */ -.select-wrapper::after { - align-items: center; - background-color: var(--cbp-color-interactive-neutral-base); - border: 2px solid var(--cbp-color-interactive-neutral-base); - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - content: "\f107"; - color: var(--cbp-color-white); - display: flex; - font-family: "Font Awesome 5 Free"; - font-size: 20px; - font-weight: 900; - justify-content: center; - text-align: center; - height: 36px; - position: absolute; - right: 0; - width: 36px; - z-index: 1; -} - -.cbp-form__single-select { - border: 1px solid var(--cbp-color-interactive-neutral-base); - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - border-right: none; - cursor: pointer; -} - -/* Hover State */ -.cbp-form__single-select:hover { - border: 2px solid var(--cbp-color-interactive-neutral-darker); - border-right: 0; -} - -/* Hover Caret State */ -.select-wrapper:hover::after { - background-color: var(--cbp-color-interactive-neutral-darker); - border: 2px solid var(--cbp-color-interactive-neutral-darker); -} - -/* Focus State */ -.cbp-form__single-select:focus { - border: 2px solid var(--cbp-color-interactive-focus-dark); - border-right: 0; - outline: 0; -} - -/* Focus Caret State */ -.select-wrapper:focus-within::after { - background-color: var(--cbp-color-interactive-focus-dark); - border: 2px solid var(--cbp-color-interactive-focus-dark); -} - -/* Error State */ -.select-wrapper--error { - & > select { - background: linear-gradient(to right, var(--cbp-color-danger-lighter) calc(100% - 34px), transparent 0); - border: 2px solid var(--cbp-color-danger-base); - - &:hover { - border: 2px solid var(--cbp-color-danger-dark); - } - - &:focus { - background: linear-gradient(to right, var(--cbp-color-danger-lighter) calc(100% - 34px), transparent 0); - border: 2px solid var(--cbp-color-interactive-focus-dark); - } - } - - &::after { - background-color: var(--cbp-color-danger-base); - border: 2px solid var(--cbp-color-danger-base); - } - - &:hover::after { - background-color: var(--cbp-color-danger-dark); - border: 2px solid var(--cbp-color-danger-dark); - } - - &:focus-within::after { - background-color: var(--cbp-color-interactive-focus-dark); - border: 2px solid var(--cbp-color-interactive-focus-dark); - } -} - -.select-wrapper--disabled { - & > select { - background: linear-gradient(to right, var(--cbp-color-interactive-disabled-light) calc(100% - 34px), transparent 0); - border: 1px solid var(--cbp-color-interactive-disabled-dark); - color: var(--cbp-color-interactive-disabled-dark); - font-style: italic; - - &:hover { - border: 2px solid var(--cbp-color-interactive-neutral-darker); - } - - &:focus { - background: linear-gradient(to right, var(--cbp-color-interactive-disabled-light) calc(100% - 34px), transparent 0); - border: 2px solid var(--cbp-color-interactive-focus-dark); - } - - &::placeholder { - color: var(--cbp-color-interactive-disabled-light); - font-style: italic; - } - } - - &::after { - background-color: var(--cbp-color-interactive-disabled-dark); - border: 2px solid var(--cbp-color-interactive-disabled-dark); - } - - &:hover::after { - background-color: var(--cbp-color-interactive-neutral-darker); - border: 2px solid var(--cbp-color-interactive-neutral-darker); - } -} \ No newline at end of file diff --git a/packages/vanilla/src/sass/components/select/_index.scss b/packages/vanilla/src/sass/components/select/_index.scss new file mode 100644 index 00000000..2347f959 --- /dev/null +++ b/packages/vanilla/src/sass/components/select/_index.scss @@ -0,0 +1,38 @@ +select { + appearance: none; + background-color: transparent; + background-image: url('/assets/images/angle-arrow-down-gray-90.svg'); + background-repeat: no-repeat; + background-position: right var(--cbp-space-2x) center; + background-size: var(--cbp-space-3x) var(--cbp-space-3x); + border-color: var(--cbp-color-interactive-neutral-base); + border-radius: var(--cbp-border-radius-soft); + border-width: var(--cbp-border-size-md); + display: block; + font-family: inherit; + font-size: inherit; + min-height: var(--cbp-space-9x); + line-height: inherit; + outline: 0; + padding-left: var(--cbp-space-2x); + padding-top: var(--cbp-space-2x); + padding-bottom: var(--cbp-space-2x); + width: 100%; + + &:hover { + border-color: var(--cbp-color-base-neutral-darker); + } + + &:focus { + border-color: var(--cbp-color-interactive-focus-dark); + } + + &:disabled { + cursor: not-allowed; + } + + &:invalid { + color: var(--cbp-color-text-dark); + font-style: italic; + } +} From a12ea4c0afd3f43f8cdfcb972a987d0d92f349e9 Mon Sep 17 00:00:00 2001 From: Danny Kim Date: Wed, 31 May 2023 16:49:15 -0400 Subject: [PATCH 2/5] chore: clean up css and story controls --- .../src/components/select/select.stories.js | 48 +++++++++++++++++-- .../src/sass/components/select/_index.scss | 22 +++++---- 2 files changed, 57 insertions(+), 13 deletions(-) diff --git a/packages/vanilla/src/components/select/select.stories.js b/packages/vanilla/src/components/select/select.stories.js index 1e1bdd56..9fe2c4b3 100644 --- a/packages/vanilla/src/components/select/select.stories.js +++ b/packages/vanilla/src/components/select/select.stories.js @@ -5,6 +5,48 @@ export default { root: '.cbp-form' } }, + argTypes: { + label: { + name: 'Label Element', + description: 'Represents a caption for the `` element.', + control: { type: 'text' } + }, + labelFor: { + name: 'Label `for` Attribute', + description: 'Indicates the form element that this `