fix(togglebutton component): fix togglebutton with long label in mobile #1199

nikitadubyk · 2023-12-23T09:35:53Z

Fixed display of component with large label on mobile devices

fix #884 and fix #587

I have followed the Your First Code Contribution section of the Contributing guide

Fixed the display of the component with a large label on mobile devices. Now it does not collapse and is displayed correctly

#587
#884

Summary by CodeRabbit

New Features
- Enhanced the ToggleSwitch component with a new story for testing long labels.
Style Updates
- Updated the ToggleSwitch component styles to improve layout and sizing across small, medium, and large sizes.

…le view Fixed display of component with large label on mobile devices fix themesberg#884

vercel · 2023-12-23T09:35:57Z

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

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	❌ Failed (Inspect)			Apr 28, 2024 4:43pm
flowbite-react-storybook	❌ Failed (Inspect)			Apr 28, 2024 4:43pm

codecov · 2023-12-23T09:38:26Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.36%. Comparing base (7461173) to head (3311292).
Report is 245 commits behind head on main.

❗ Current head 3311292 differs from pull request most recent head e67ddac. Consider uploading reports for the commit e67ddac to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1199      +/-   ##
==========================================
- Coverage   99.54%   97.36%   -2.18%     
==========================================
  Files         163      214      +51     
  Lines        6621     9077    +2456     
  Branches      401      530     +129     
==========================================
+ Hits         6591     8838    +2247     
- Misses         30      239     +209

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

nikitadubyk · 2024-01-22T15:38:30Z

@SutuSebastian can you please check my pr?

SutuSebastian · 2024-01-22T16:53:22Z

src/components/ToggleSwitch/theme.ts

-      sm: 'w-9 h-5 after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4',
-      md: 'w-11 h-6 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5',
-      lg: 'w-14 h-7 after:absolute after:top-0.5 after:left-[4px] after:h-6 after:w-6',
+      sm: 'w-9 h-5 after:absolute after:top-[1px] after:left-[2px] after:h-4 after:w-4',


modifying the offset values makes the toggle switch look off

SutuSebastian · 2024-01-22T16:53:52Z

src/components/ToggleSwitch/theme.ts

@@ -10,7 +10,7 @@ export const toggleSwitchTheme: FlowbiteToggleSwitchTheme = {
    label: 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300',
  },
  toggle: {
-    base: 'toggle-bg rounded-full border group-focus:ring-4 group-focus:ring-cyan-500/25',
+    base: 'relative shrink-0 toggle-bg rounded-full border group-focus:ring-4 group-focus:ring-cyan-500/25',


adding just a relative is enough

without flex-shrink it will be broken (even with min-width values)

SutuSebastian · 2024-01-22T16:54:50Z

src/components/ToggleSwitch/theme.ts

-      sm: 'w-9 h-5 after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4',
-      md: 'w-11 h-6 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5',
-      lg: 'w-14 h-7 after:absolute after:top-0.5 after:left-[4px] after:h-6 after:w-6',
+      sm: 'w-9 h-5 after:absolute after:top-[1px] after:left-[2px] after:h-4 after:w-4',


we also need min-w- values for all the sizes, this way it will never shrink below the size

changeset-bot · 2024-04-28T16:42:56Z

⚠️ No Changeset found

Latest commit: e67ddac

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2024-04-28T16:43:00Z

Walkthrough

The recent updates focus on enhancing the ToggleSwitch component by adding a new story for testing long labels and updating styling to handle multi-line labels effectively. These changes aim to improve the component's responsiveness and visual integrity across different devices and scenarios.

Changes

Files	Change Summary
`.../ToggleSwitch/ToggleSwitch.stories.tsx`	Added `ToggleSwitchWithLongLabel` story to test long labels.
`.../ToggleSwitch/theme.ts`	Updated `toggle` base style and `sizes` to better support long labels and prevent style collapsing.

Assessment against linked issues

Objective	Addressed	Explanation
Ensure ToggleSwitch styling remains intact on mobile with long labels (#884, #587)	✅
Prevent ToggleSwitch from collapsing when label spans multiple lines (#884, #587)	✅

Possibly related issues

ToggleSwitch simplified #925: This PR does not directly address making label parameters optional, but the focus on label handling could indirectly benefit from such flexibility. Consider linking if label optionality is explored further.

Poem

🐰🌟
In the realm of UI so bright,
A ToggleSwitch now holds the light.
Long labels stretch, but do not break,
Through screens small, a path they make.
CodeRabbit hops with joy, you see,
For styled toggles as they should be! 🌟🐰

Recent Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between ee3749f and e67ddac.

Files selected for processing (2)

src/components/ToggleSwitch/ToggleSwitch.stories.tsx (1 hunks)
src/components/ToggleSwitch/theme.ts (2 hunks)

Files skipped from review due to trivial changes (1)

src/components/ToggleSwitch/ToggleSwitch.stories.tsx

Additional comments not posted (2)

src/components/ToggleSwitch/theme.ts (2)

13-13: Ensure the relative shrink-0 classes are visually verified.

Nikitadubyk's comment suggests potential issues without shrink-0. Please confirm the component's appearance with these classes, possibly referencing the linked visual evidence.

38-40: Adjustments to the min-w- classes in sizes are appropriate.

These changes should help maintain the visual integrity of the ToggleSwitch across different device sizes, as intended.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

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 testing code 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 testing code 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 testing code.
- @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.
Please see the configuration documentation for more information.
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/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

nikitadubyk · 2024-04-28T16:45:46Z

@SutuSebastian sorry for late update) I fix comments now

SutuSebastian · 2024-06-20T08:44:48Z

deprecated by #1428

fix(togglebutton component): fix togglebutton with long label in mobi…

47a47a4

…le view Fixed display of component with large label on mobile devices fix themesberg#884

vercel bot temporarily deployed to Preview December 23, 2023 09:37 Inactive

Merge branch 'main' into fix/broken-style-in-toggle-switch

8caa088

vercel bot temporarily deployed to Preview December 23, 2023 09:49 Inactive

Merge branch 'main' into fix/broken-style-in-toggle-switch

3311292

vercel bot temporarily deployed to Preview January 14, 2024 10:11 Inactive

SutuSebastian reviewed Jan 22, 2024

View reviewed changes

alfreddagenais mentioned this pull request Apr 2, 2024

Docs : Toggle Switch #1321

Closed

2 tasks

vercel bot had a problem deploying to Preview – flowbite-react-storybook April 28, 2024 16:43 Failure

vercel bot had a problem deploying to Preview – flowbite-react April 28, 2024 16:43 Failure

fix: add min-width and rollback toggle width

e67ddac

SutuSebastian closed this Jun 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(togglebutton component): fix togglebutton with long label in mobile #1199

fix(togglebutton component): fix togglebutton with long label in mobile #1199

nikitadubyk commented Dec 23, 2023 •

edited by coderabbitai bot

vercel bot commented Dec 23, 2023 •

edited

codecov bot commented Dec 23, 2023 •

edited

nikitadubyk commented Jan 22, 2024

SutuSebastian Jan 22, 2024

SutuSebastian Jan 22, 2024

nikitadubyk Apr 28, 2024 •

edited

SutuSebastian Jan 22, 2024

changeset-bot bot commented Apr 28, 2024

coderabbitai bot commented Apr 28, 2024 •

edited

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

nikitadubyk commented Apr 28, 2024

SutuSebastian commented Jun 20, 2024

fix(togglebutton component): fix togglebutton with long label in mobile #1199

fix(togglebutton component): fix togglebutton with long label in mobile #1199

Conversation

nikitadubyk commented Dec 23, 2023 • edited by coderabbitai bot

Summary by CodeRabbit

vercel bot commented Dec 23, 2023 • edited

codecov bot commented Dec 23, 2023 • edited

Codecov Report

nikitadubyk commented Jan 22, 2024

SutuSebastian Jan 22, 2024

Choose a reason for hiding this comment

SutuSebastian Jan 22, 2024

Choose a reason for hiding this comment

nikitadubyk Apr 28, 2024 • edited

Choose a reason for hiding this comment

SutuSebastian Jan 22, 2024

Choose a reason for hiding this comment

changeset-bot bot commented Apr 28, 2024

⚠️ No Changeset found

coderabbitai bot commented Apr 28, 2024 • edited

Walkthrough

Changes

Assessment against linked issues

Possibly related issues

Poem

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

nikitadubyk commented Apr 28, 2024

SutuSebastian commented Jun 20, 2024

nikitadubyk commented Dec 23, 2023 •

edited by coderabbitai bot

vercel bot commented Dec 23, 2023 •

edited

codecov bot commented Dec 23, 2023 •

edited

nikitadubyk Apr 28, 2024 •

edited

coderabbitai bot commented Apr 28, 2024 •

edited

CodeRabbit Configration File (`.coderabbit.yaml`)