fix: #7630: Apply ToggleButton className prop to box element

[myigituzun]

This fixes #7630

This PR updates the ToggleButton component to apply the className prop directly to the box element (wrapper) instead of the parent container. This change allows developers to style the component's wrapper element more effectively and dynamically based on its checked state or other conditions.

Previously, the className prop was applied to the parent container that wraps the input and button elements, which made it difficult to style the component dynamically. For instance, changing the button's background color or other visual properties based on its checked state was unintuitive and required additional workarounds.

By applying the className to the box element, developers can now easily control the visual appearance of the ToggleButton without modifying the underlying DOM structure.

• Updated the className application logic in the ToggleButton component to target the box element.
• Ensured backward compatibility with existing behavior while enhancing flexibility for styling.
• Tested the changes for consistency across different states (checked and unchecked) and themes.

Example Usage

Here is an example showcasing how this fix enables more intuitive dynamic styling:

  <ToggleButton
    checked={checked}
    onChange={(e) => setChecked(e.value)}
    className={classNames('w-8rem', { 'bg-red-800': checked, 'bg-yellow-600': !checked })}
  />

Output After the Fix

After this change, the className correctly applies to the box element, enabling dynamic styling. Here is the updated output:

With this fix, the className dynamically applies the appropriate background color based on the checked state of the ToggleButton.

Notes
• Backward Compatibility: This change should not break any existing usage of the ToggleButton component.
• Testing: Verified with various custom className values, states, and themes.

Let me know if additional adjustments are needed!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Updated (UTC)
primereact	⬜️ Ignored (Inspect)	Visit Preview	Jan 21, 2025 3:06pm
primereact-v9	⬜️ Ignored (Inspect)	Visit Preview	Jan 21, 2025 3:06pm

[github-actions]

Thanks a lot for your contribution! But, PR does not seem to be linked to any issues. Please manually link to an issue or mention it in the description using #<issue_id>.