fix(Toggle): better dark and light modes

[aversini]

Summary by CodeRabbit

• New Features
  • Introduced a focusMode property for the Toggle component, allowing users to customize the focus ring color according to their preference or system settings.
• Documentation
  • Updated the Toggle component stories to showcase the new focusMode feature and other enhancements like labelHidden and label props.
• Tests
  • Enhanced Toggle component tests to include checks for classes based on toggle state and mode.
• Refactor
  • Improved Toggle component logic and utilities for handling focus styles and color classes more efficiently.

[github-actions]

Bundle Size (components)

Status	File	Size (Gzip)	Limits
✅	style.css	6.42 KB	8 KB
✅	index.js	7.8 KB (-4 B -0.05%)	20 KB
✅	vendor.js	65.07 KB	67 KB

Overall bundle size: 79.29 KB (-4 B 0.00%)
Overall status: ✅

Bundle Size (form components)

Status	File	Size (Gzip)	Limits
✅	index.js	4.73 KB (+71 B +1.49%)	20 KB
✅	vendor.js	44.49 KB	67 KB

Overall bundle size: 49.22 KB (+71 B +0.14%)
Overall status: ✅

Bundle Size (system)

Status	File	Size (Gzip)	Limits
✅	style.css	6.75 KB (+54 B +0.79%)	8 KB
✅	index.js	1.74 KB (+1 B +0.06%)	3 KB
✅	vendor.js	44.49 KB	46 KB

Overall bundle size: 52.98 KB (+55 B +0.10%)
Overall status: ✅

[coderabbitai]

Walkthrough

The update introduces a new focusMode property to the Toggle component, enhancing its visual customization capabilities. This addition allows for dynamic focus ring color adjustments, catering to different themes like dark, light, system, and an alternative system mode. The changes span across component logic, type definitions, and styling utilities, alongside adjustments in storybook configurations and test enhancements to support the new functionality. This comprehensive update aims to improve user interface flexibility and accessibility.

Changes

Files	Change Summary
packages/documentation/nodemon.json	Added new directory path to watched paths in nodemon.json.
.../src/Form/Toggle.stories.tsx	Initialized checked as true, and added focusMode, labelHidden, and label props.
.../ui-form/src/components/Toggle/Toggle.tsx	Added handling for new focusMode property.
.../ui-form/src/components/Toggle/ToggleTypes.d.ts	Included checked and new focusMode property in ToggleProps.
.../ui-form/src/components/Toggle/__tests__/Toggle.test.tsx	Added TOGGLE_CLASSNAME import and refactored test cases for new classes.
.../ui-form/src/components/Toggle/utilities.ts	Added and updated functions for focus styles and color variations based on focusMode.

---

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit-tests for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit tests for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit tests.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• The JSON schema for the configuration file is available here.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

CodeRabbit Discord Community

Join our Discord Community to get help, request features, and share feedback.

[coderabbitai]

Review Status

Actionable comments generated: 0

Configuration used: .coderabbit.yaml

Commits

Files that changed from the base of the PR and between 22ed3fe and 78c8627.

Files selected for processing (6)

• packages/documentation/nodemon.json (1 hunks)
• packages/documentation/src/Form/Toggle.stories.tsx (1 hunks)
• packages/ui-form/src/components/Toggle/Toggle.tsx (1 hunks)
• packages/ui-form/src/components/Toggle/ToggleTypes.d.ts (2 hunks)
• packages/ui-form/src/components/Toggle/tests/Toggle.test.tsx (3 hunks)
• packages/ui-form/src/components/Toggle/utilities.ts (4 hunks)

Additional comments: 9

packages/documentation/nodemon.json (1)

• 9-9: The addition of "../ui-form/src/**/*.*" to the nodemon.json configuration is a good enhancement for automatically restarting the server on changes within the ui-form package. This should improve the development experience for those working on the Toggle component and related functionalities.

Just a note: If the ui-form/src directory contains a large number of files or if files within it are frequently modified, this could potentially increase CPU usage during development. It might be beneficial to monitor this aspect if developers experience slower performance.

packages/ui-form/src/components/Toggle/Toggle.tsx (1)

• 11-11: The addition of the focusMode property with a default value of "system" is a thoughtful enhancement, allowing the Toggle component to better adapt to different UI themes by adjusting the focus ring color. This change aligns well with the PR's objectives.

It's important to test these changes across different browsers and devices to ensure consistent behavior, especially since focus styles can sometimes behave differently across environments.

packages/documentation/src/Form/Toggle.stories.tsx (2)

• 14-14: Initializing the checked state as true in the Basic story is a good practice, as it provides a clear example of the Toggle component's behavior when it's active.
• 24-26: Including focusMode, labelHidden, and label props in the Basic story is an excellent way to showcase the new functionalities of the Toggle component. This enhances the documentation and provides developers with clear examples of how to use these properties.

packages/ui-form/src/components/Toggle/ToggleTypes.d.ts (1)

• 17-26: The addition of the checked and focusMode properties to the ToggleProps type is well-implemented. These changes enhance the component's configurability and ensure type safety, which is crucial for maintaining code quality and improving the developer experience.

packages/ui-form/src/components/Toggle/utilities.ts (3)

• 11-29: The introduction of the getToggleKnobFocusClasses function is a significant enhancement, enabling dynamic adjustment of focus styles based on the focusMode. This is a thoughtful addition that contributes to the component's adaptability and user experience.
• 59-63: Adjusting the getToggleColorClasses function to accept the mode parameter is a good practice, as it allows for more flexible styling based on the component's mode. This contributes to the component's adaptability to different UI themes.
• 97-114: The update to the getToggleClasses function to incorporate the focusMode parameter and the refinements to other utility functions enhance the component's performance, appearance, and maintainability. These changes are well-aligned with the PR's objectives.

packages/ui-form/src/components/Toggle/__tests__/Toggle.test.tsx (1)

• 26-63: The updated test cases, including assertions for classes on toggle elements based on the toggle state and mode, are comprehensive and well-implemented. These changes are crucial for ensuring the component's reliability and consistency across different modes.

It's important to continue expanding test coverage as new features are added, to maintain high code quality and reliability.