2212 add read only state to where its missing redo

[limingz20]

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

A re-do of #2197

Description
The read-only state of following components is added:

• checkbox
• date picker
• radio button
• select
• slider
• switch
• text area

Also, update some design issues:

• checkbox partial state (background color and minus color)
• date picker disabled state (background color)
• select error state (placeholder font color)

Related Issue
Issue #2212

📦 Published PR as canary version: 39.16.0--canary.2222.22895486473.0

✨ Test out this PR locally via:

npm install example-generator@39.16.0--canary.2222.22895486473.0
npm install angular-module-example@39.16.0--canary.2222.22895486473.0
npm install angular-standalone-example@39.16.0--canary.2222.22895486473.0
npm install html-cdn-example@39.16.0--canary.2222.22895486473.0
npm install html-vite-example@39.16.0--canary.2222.22895486473.0
npm install react-example@39.16.0--canary.2222.22895486473.0
npm install vue-example@39.16.0--canary.2222.22895486473.0
npm install @infineon/infineon-design-system-stencil@39.16.0--canary.2222.22895486473.0
npm install @infineon/infineon-design-system-angular@39.16.0--canary.2222.22895486473.0
npm install @infineon/infineon-design-system-react@39.16.0--canary.2222.22895486473.0
npm install @infineon/infineon-design-system-vue@39.16.0--canary.2222.22895486473.0
# or 
yarn add example-generator@39.16.0--canary.2222.22895486473.0
yarn add angular-module-example@39.16.0--canary.2222.22895486473.0
yarn add angular-standalone-example@39.16.0--canary.2222.22895486473.0
yarn add html-cdn-example@39.16.0--canary.2222.22895486473.0
yarn add html-vite-example@39.16.0--canary.2222.22895486473.0
yarn add react-example@39.16.0--canary.2222.22895486473.0
yarn add vue-example@39.16.0--canary.2222.22895486473.0
yarn add @infineon/infineon-design-system-stencil@39.16.0--canary.2222.22895486473.0
yarn add @infineon/infineon-design-system-angular@39.16.0--canary.2222.22895486473.0
yarn add @infineon/infineon-design-system-react@39.16.0--canary.2222.22895486473.0
yarn add @infineon/infineon-design-system-vue@39.16.0--canary.2222.22895486473.0

[github-actions]

Storybook Preview

• Storybook

Preview Links for Deployed Examples

• HTML CDN Example
• HTML Vite Example
• Angular Example (Module)
• Angular Example (Standalone)
• React Example
• Vue Example

Version: 39.16.0--canary.2222.22895486473.0

[tishoyanchev]

@limingz20

• checkbox

  • Confusing usage of isDisabled get Func. It's used in contradictory conditions. Please double check the logic, and if isDisabled is needed, or can it be replaced with the disabled prop.
  • browser warnings related to aria-hidden incorrect usage (check if still relevant)
  • when hover over error state, should the checkbox become green? (double check if correct)

• date picker

  • on read-only state, dates are still focusable

• radio button

  • when read-only is true, radio input is focused on click. There should be no focus.
  • unnecessary isReadOnly() get function. Same for isDisabled.

• select

  • on read-only, both arrows left/down appear
  • when disabled/error are both true
  • even when read-only is false, left/down arrows still appear
  • on error=true, styles are incorrect
  • please do a complete review of this component. There are likely other issues too

I did not review the remaining 3 components - slider, switch and text-area because I assume same or similar issues would be found there too.

Recommendation:
revert back your changes, and re-implement them following the text-field example.