Commit graph

2 commits

Author SHA1 Message Date
Ridhwana
ffa5e023bb
Implementing validation for the Multi Input Crayons Component (#18185)
* WIP: add the validation

* feat/WIP: set the color of the button to red

* feat: change color temporarily

* feat: add accessibility for validation

* feat: add the styling changes for the multi input

* feat: add focus visible styling as well

* fix: add comma to scss file to separate attributes

* chore: rename regex to inputRegex

* refactor: move out validation into a function

* chore: rename regex to inputRegex

* feat: add a validation Regex as a prop

* feat: update the text description

* chore: update spelling oops

* feat: remove comment

* remove comments

* rename error

* feat: add showLabel and labelText to the stories component

* cater for when we don't pass in a validationRegex

* some small tweaks

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
2022-07-22 12:51:06 +01:00
Ridhwana
abeff25ec0
BETA version 2 of the Storybook Multi Input (Editing and Accessibility) (#17894)
* 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>
2022-06-23 15:41:45 +02:00