abeff25ec0
* refactor: use the DefaultSelectionTemplate to list out the items * refactor: rename function so that we map it to the deselect item event * feat: first pass of adding edit functionality * feat: update the name of the function from clearSelection to clearInput * feat: setup the edit state by ensuring that we set the editValue and the inputPosition and then use useEffect to monitor changes * chore: remove the old method in favour of a shared component * feat: set the order of the items * refactor: rename handleBlur function name to handleInputBlur * feat: ensure that the edit field gets resized according to its current input * feat: oops add inputSizerRef * feat: when an item is being edited we need to ensure that it gets set back into the correct position and that we clear the previous state * feat: handle the actual resizing fo the field on an input edit * feat: use a shared DefaultSelectionTemplate for both the multiautocomplete and the multiinput component * feat: make the defaultSelectionTemplate customizable based on the variant adn the classname * feat: pressing backspace will start editing a previous selection if there is one * feat: read out the selected items as its removed or edited * feat: pass the regex through as a prop * feat: move the functions around * feat: add screen-reader only class * Update app/javascript/crayons/MultiInput/__stories__/MultiInput.stories.jsx Co-authored-by: Julianna Tetreault <32834804+juliannatetreault@users.noreply.github.com> * Update app/javascript/crayons/MultiInput/MultiInput.jsx Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * feat: add the props to JSDoc Co-authored-by: Julianna Tetreault <32834804+juliannatetreault@users.noreply.github.com> Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
53 lines
996 B
SCSS
53 lines
996 B
SCSS
@import './forms';
|
|
@import '../config/import';
|
|
|
|
.c-input--multi {
|
|
&__wrapper-border:focus-within {
|
|
@extend %form-styling-focus;
|
|
|
|
.c-input--multi__input {
|
|
background-color: var(--form-bg-focus);
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
background-color: var(--bg-color);
|
|
color: var(--body-color);
|
|
border: none;
|
|
}
|
|
|
|
&__wrapper-border {
|
|
.c-input--multi__input {
|
|
background-color: var(--form-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.c-btn.c-input--multi__selected {
|
|
&:first-child {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border: solid var(--base-10);
|
|
border-right: none;
|
|
color: var(--base-90);
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border: solid var(--base-10);
|
|
border-left: none;
|
|
}
|
|
|
|
&:first-child:hover,
|
|
&:first-child:focus-visible {
|
|
background: none;
|
|
color: none;
|
|
}
|
|
|
|
&:last-child:hover,
|
|
&:last-child:focus-visible {
|
|
background: none;
|
|
color: var(--accent-danger);
|
|
}
|
|
}
|