feat: Read-only states for form related components

[georgylobko]

Description

Introduced readOnly state for form related components.

The readonly attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, and number types and the form control elements. <a rel="noreferrer nofollow" target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly</a></p> <p>Therefore for most elements, the <code>readOnly</code> state is handled manually by adding the appropriate style rules and preventing events from being triggered.</p> <h3>How has this been tested?</h3> <!-- How did you test to verify your changes? --> <!-- How can reviewers test these changes efficiently? --> <details> <summary>Review checklist</summary> _The following items are to be evaluated by the author(s) and the reviewer(s)._ #### Correctness - _Changes include appropriate documentation updates._ - _Changes are backward-compatible if not indicated, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#public-apis)._ - _Changes do not include unsupported browser features, see [`CONTRIBUTING.md`](https://github.com/cloudscape-design/components/blob/main/CONTRIBUTING.md#browsers-support)._ - _Changes were manually tested for accessibility, see [accessibility guidelines](https://cloudscape.design/foundation/core-principles/accessibility/)._ #### Security - _If the code handles URLs: all URLs are validated through [the `checkSafeUrl` function](https://github.com/cloudscape-design/components/blob/main/src/internal/utils/check-safe-url.ts)._ #### Testing - _Changes are covered with new/existing unit tests?_ - _Changes are covered with new/existing integration tests?_ </details> <hr /> <p>By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/codecov[bot]"><img src="https://avatars.githubusercontent.com/in/254?v=4" />codecov[bot]</a> commented <strong> 1 month ago</strong> </div> <div class="markdown-body"> <h2><a href="https://app.codecov.io/gh/cloudscape-design/components/pull/2316?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=cloudscape-design">Codecov</a> Report</h2> <p>All modified and coverable lines are covered by tests :white_check_mark:</p> <blockquote> <p>Project coverage is 95.63%. Comparing base <a href="https://app.codecov.io/gh/cloudscape-design/components/commit/63eeffd566489b33c99e60e0e13d2bfad65f6a7d?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=cloudscape-design">(<code>63eeffd</code>)</a> to head <a href="https://app.codecov.io/gh/cloudscape-design/components/commit/b13e0a1cebc4c4e088660925a6878320e4794fdf?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=cloudscape-design">(<code>b13e0a1</code>)</a>.</p> </blockquote> <details><summary>Additional details and impacted files</summary> ```diff @@ Coverage Diff @@ ## main #2316 +/- ## ======================================== Coverage 95.62% 95.63% ======================================== Files 722 722 Lines 19237 19257 +20 Branches 6118 6474 +356 ======================================== + Hits 18395 18416 +21 + Misses 834 787 -47 - Partials 8 54 +46 ``` </details> <p><a href="https://app.codecov.io/gh/cloudscape-design/components/pull/2316?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=cloudscape-design">:umbrella: View full report in Codecov by Sentry</a>.<br /> :loudspeaker: Have feedback on the report? <a href="https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=cloudscape-design">Share it here</a>.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>