Align Radio-Button, Checkbox and Switch to web standards

[pfafffabian-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

• Rename the value property of Checkbox, Switch, Radio-Button to checked
• Implement Radio Button group behaviour

Related Issue
Closes #1479
Fixes #1476 for the Radio Button

📦 Published PR as canary version: 26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0

✨ Test out this PR locally via:

npm install @infineon/infineon-design-system-stencil@26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0
# or 
yarn add @infineon/infineon-design-system-stencil@26.0.0--canary.1485.8162da32f9fc366646a6da72bbed42526db2b8ee.0

[github-actions]

PR Preview Action v1.4.8
Preview removed because the pull request was closed.
2024-11-14 08:24 UTC

[github-actions]

--STORYBOOK-PREVIEW--

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

[github-actions]

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

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

[tishoyanchev]

@pfafffabian-ifx

• when radio-button is disabled, event is still emitted on click.
• Radio-button warning message: "inputElement" State changed during rendering. This can potentially lead to infinite-loops and other bugs. In short, the inputElement State should not be mutated during rendering time.
• remove disabled attribute from the storybook snippet of Switch and Checkbox.
• value prop is missing from Radio-button, Checkbox and Switch. The value of the value prop is submitted in a form.
• Remove name="search_terms" from single-select. Name prop can be set by the users.
• Selected options are not submitted for the multi-select. Should they?

[verena-ifx]

The checkbox doesnt have the "disabled" arg in the story anymore. Not sure why this got removed, but the checkbox should be "disable-able"

[verena-ifx]

@pfafffabian-ifx

• when radio-button is disabled, event is still emitted on click.
• Radio-button warning message: "inputElement" State changed during rendering. This can potentially lead to infinite-loops and other bugs. In short, the inputElement State should not be mutated during rendering time.
• remove disabled attribute from the storybook snippet of Switch and Checkbox.
• value prop is missing from Radio-button, Checkbox and Switch. The value of the value prop is submitted in a form.
• Remove name="search_terms" from single-select. Name prop can be set by the users.
• Selected options are not submitted for the multi-select. Should they?

@pfafffabian-ifx you renamed value to checked, as I could see. Fine with me, if this is in accordance with the web standard. But yes, @tishoyanchev is right, value is still used in the code as well. What do you mean by the select options not being submitted?

[tishoyanchev]

The checkbox doesnt have the "disabled" arg in the story anymore. Not sure why this got removed, but the checkbox should be "disable-able"

@verena-ifx

I told Fabian to remove it from the snippet to avoid confusion because when the disabled attribute is present, even if set to true, the value attribute doesn't work, and no value is submitted. This might confuse users, so I told him to just remove it from the snippet.

[tishoyanchev]

What do you mean by the select options not being submitted?

@verena-ifx

When you put the multi-select component inside a

, and select multiple options, and then submit it, the options were not getting submitted, but his is already resolved.