Component: Single-Select using ChoicesJs +Multiselect

[verena-ifx]

By creating this pull request you agree to the terms in CONTRIBUTING.md.
https://github.com/Infineon/.github/blob/master/CONTRIBUTING.md
--- DO NOT DELETE ANYTHING ABOVE THIS LINE ---

CONTRIBUTING.md also tells you what to expect in the PR process.

Description
Single Select using ChoicesJs library
Mult select (own development)

📦 Published PR as canary version: 20.9.0--canary.328.b992a154c134c1d23bb428d3d4ff957571709a74.0

✨ Test out this PR locally via:

npm install @infineon/infineon-design-system-stencil@20.9.0--canary.328.b992a154c134c1d23bb428d3d4ff957571709a74.0
# or 
yarn add @infineon/infineon-design-system-stencil@20.9.0--canary.328.b992a154c134c1d23bb428d3d4ff957571709a74.0

[github-actions]

PR Preview Action v1.4.4
Preview removed because the pull request was closed.
2023-08-25 13:15 UTC

[github-actions]

--STORYBOOK-PREVIEW--

• PR Preview URL for Storybook: https://Infineon.github.io/infineon-design-system-stencil/pr-preview/pr-328/

[github-actions]

--EXAMPLE-APPS-PREVIEW--
PR Preview URLs:

• Vue example: https://Infineon.github.io/infineon-design-system-stencil/pr-preview-vue-example/pr-328/
• React example: https://Infineon.github.io/infineon-design-system-stencil/pr-preview-react-example/pr-328/
• Angular example: https://Infineon.github.io/infineon-design-system-stencil/pr-preview-angular-example/pr-328/
• Vanilla example: https://Infineon.github.io/infineon-design-system-stencil/pr-preview-vanilla-example/pr-328/

[verena-ifx]

e2e tests missing

[tishoyanchev]

Select:

• why not group both single and multi into a single Select in Storybook? because they are separate components, one with library, one without. its not possible to have them in one story
• how should the multi-select work with the Chip component? that is not needed for milestone 1

Single Select:

• when click the select second time to close menu, the arrow remains up

• arrow is not vertically centered inside the field

• size value is incorrect. It should be 'm' or 's', not the full label 'small (36px)'. In Storybook, it should be 'm' and 's' but with the exact size with brackets. Eg: s (36px). But this is only the control label, the value is still 's'.
  Verena: we discussed this with Sergej and he said we should use that in the future
  Tisho: To me this makes no sense. It is inconsistent with literally every other component we have, and it's difficult to set. This is also not a Designer's decision. The idea we talked about before was to have the pixels in brackets in Storybook, not to have size value be renamed to literally 'small' and 'large' with the pixels included in the naming too. How would users know what's the pixel size anyway? They just know small, medium or large.

• error message and label value overflow will check this
  Use this for the overflow:
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;

• value property is missing in storybook
  Verena: thats the pre-selected value you can set if you dont want a placeholder to show, the value needs to exist in the provided options of course
  Tisho: then why not make one take preference over the other? For instance, if 'value' is set, it replaces the placeholder even if it's set. Currently if you have a placeholder, and you write something to 'value' other than 'undefined', you get an error, and the entire component is not showing without explanation for what's happening. There should be no error. One should just take preference.

• what do I have to pass in value? If I write a string, I get an error, and component not showing.

• There's a lot of commented out code. will remove this

Multi Select:

• still have the weird symbols that escape single quotes.
• arrow is not vertically centralized
• should the selected option not be wrapped in a chip-like wrapper just like type multi of single-select?
• label and error message overflow
• same issue with the size as single-select

[verena-ifx]

• arrow position fixed
• label+error msg overflow fixed
• options array in story now beautified

[verena-ifx]

e2e tests added

[github-actions]

🚀 PR was released in v20.9.0 🚀