feat: add visual status indicators to the UIToggle component #2698
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add functionality to render a custom "SwitchOn" icon in the UIToggle's thumb element using ReactDOM. Updated styles and component structure to support this change and ensure compatibility.
Introduce on/off icons for the UIToggle component. Updated logic to dynamically render the correct icon based on toggle state and included new SCSS for styling.
Introduce theme-based colors for 'SwitchOn' and 'SwitchOff' icons using `COLORS.thumbOn` and `COLORS.thumbOff`. This allows the icons to adapt to the current theme, improving UI consistency and flexibility.
This removes the UIToggle.scss file and replaces its styles with inline styles in the component logic. The change simplifies style handling by consolidating them into the TypeScript file, reducing dependencies and ensuring better control over dynamic styling.
Updated UIToggle to include consistent default styles for the 'Standard' size, including dimensions and padding. Updated related tests to reflect these changes and ensure correctness. Added JSDoc comments to improve method documentation.
Updated UIToggleSizeInfo properties to be optional for flexibility. Improved documentation by adding JSDoc comments for key methods. Removed a leftover console.log statement for cleaner code.
Introduced SwitchOff and SwitchOn SVG icons. Updated the UIToggle component to include visual indicators for switch status, improving the user interface clarity.
🦋 Changeset detectedLatest commit: c158488 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Removed over 2000 lines of unused or outdated icon definitions from the Icons.tsx file to improve maintainability and reduce code bloat. These icons were no longer being used across the project, and their removal cleans up the codebase.
…buttons_no-onoff-text-is-provided' of https://github.com/SAP/open-ux-tools into feat/32111-bug-acc-2531level-aa_sap-fiori-tools_switch-buttons_no-onoff-text-is-provided
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The following changes were implemented:
SwitchOffandSwitchOnWhile we are at it, we should make toggle switches a bit bigger to better comply with "Target hit area" accessibility topic. They are too small now.