Feat/select element #34
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| export default { | ||
| title: 'Patterns', | ||
| parameters: { | ||
| html: { | ||
| root: '.cbp-form' | ||
| } | ||
| }, | ||
| argTypes: { | ||
| label: { | ||
| name: 'Label Element', | ||
| description: 'Represents a caption for the `<select>` element in the user interface.', | ||
| control: { type: 'text' } | ||
| }, | ||
| inputDescription: { | ||
| name: 'Input Description', | ||
| description: 'Instructions or supplementary information regarding the `<select>` element.', | ||
| control: { type: 'text' } | ||
| }, | ||
| labelFor: { | ||
| name: 'Label `for` Attribute', | ||
| description: 'Indicates the form element that this `<label>` describes and has the value which is the `id` of the `<select>` element it relates to.', | ||
| control: { type: 'text' } | ||
| }, | ||
| formControlName: { | ||
| name: 'Input `name` Attribute', | ||
| description: 'Name of the form control in the input element. Submitted with the form as part of a name/value pair.', | ||
| control: { type: 'text' } | ||
| }, | ||
| placeholderOption: { | ||
| name: 'Placeholder Option Text', | ||
| description: 'Text of the placeholder option.', | ||
| control: { type: 'text' } | ||
| }, | ||
| errorMessage: { | ||
| name: 'Error Message', | ||
| description: 'A message in the input description that a problem has occurred.', | ||
| control: { type: 'text' } | ||
| }, | ||
| optionsObj: { | ||
| name: 'Options Object', | ||
| description: 'Sets the label of the `<option>` and the `value` attribute.', | ||
| control: { type: 'object' } | ||
| }, | ||
| disabled: { | ||
| name: '`disabled` Attribute', | ||
| description: 'Attribute that indicates that the user cannot interact with the control.', | ||
| control: { type: 'boolean' } | ||
| } | ||
| }, | ||
| decorators: [ | ||
| (Story, context) => ` | ||
| <form class="cbp-form"> | ||
| <label for=${context.args.labelFor} class="cbp-input__label">${context.args.label}</label> | ||
| <p class="cbp-input__description" ${!context.args.required ? '' : 'hidden'}>${context.args.inputDescription}</p> | ||
| <p class="cbp-input__description ${context.args.required ? 'cbp-input__description--error': ''}" ${context.args.required ? '' : 'hidden'}><i class="fas fa-exclamation-triangle"></i>${context.args.errorMessage}</p> | ||
| ${Story().outerHTML || Story()} | ||
| </form> | ||
| ` | ||
| ] | ||
| } | ||
|
|
||
| const Template = ({ labelFor, formControlName, placeholderOption, disabled, optionsObj: { option1, option2, option3, option4, option5} }) => ( | ||
| ` | ||
| <select class="cbp-input__select" name=${formControlName} id=${labelFor} ${disabled ? 'disabled' : ''}> | ||
| <option value="" selected>${placeholderOption}</option> | ||
|
There was a problem hiding this comment. We don't need The presentation of this option looks like something is selected. I think we need to establish a best practice here rather than make it an editable control/option. At SSA we used "--" for the default/no selection because it cannot be mistaken for a selection. USWDS uses "- Select -" which is also common. Because the label says what the thing is being selected, we don't need to repeat it here though - either of the above options would be a better choice and we should not let the user customize it in Storybook to make bad decisions. There was a problem hiding this comment. Removed the control and replaced with |
||
| <option value=${option1.value}>${option1.label}</option> | ||
| <option value=${option2.value}>${option2.label}</option> | ||
| <option value=${option3.value}>${option3.label}</option> | ||
| <option value=${option4.value}>${option4.label}</option> | ||
| <option value=${option5.value}>${option5.label}</option> | ||
| </select> | ||
| ` | ||
| ) | ||
|
|
||
| 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' | ||
| }, | ||
| }, | ||
| disabled: false | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| .cbp-input__select { | ||
| appearance: none; | ||
| background-color: var(--cbp-color-white); | ||
| 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); | ||
| color: var(--cbp-color-text-darkest); | ||
| min-height: var(--cbp-space-9x); | ||
| outline: 0; | ||
| padding-left: 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 { | ||
| background-color: var(--cbp-color-interactive-disabled-light); | ||
| border-color: var(--cbp-color-interactive-disabled-dark); | ||
| font-style: italic; | ||
|
|
||
| &:hover { | ||
| border-color: var(--cbp-color-base-neutral-darker); | ||
| } | ||
| } | ||
|
|
||
| &:invalid { | ||
| background-color: var(--cbp-color-danger-lighter); | ||
| border-color: var(--cbp-color-danger-dark); | ||
| font-style: italic; | ||
| } | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 don't see a
requiredcontrol that would set this. See my higher-level comment about this though.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.
Forgot this control, should be added now along with the
aria-requiredattribute. Toggling this control will show the css of the:invalidpseudo-class but regarding your comment below, we should revisit/discuss and finalize how to implement this along with the error message class.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.
Yeah, I'm not sure why it would show the
:invalidstyling. Is this because you're still using therequiredattribute as well? This is certainly not desired behavior on an unfilled form and would be another reason not to userequired.