fix(Dropdown): default padding should be `py-2` #1088

V-ed · 2023-09-25T18:44:39Z

📑 Description

This PR fixes a visual issue with how Dropdowns render their hovered items : with the default py-1, the hovered item exits the boundary of the rounded corners of the container.

Before	After

Switching from py-1 to py-2 aligns with how Flowbite sets by default in their doc :

Status

Not Completed (waiting for feedback on comment below)
Completed

✅ Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
I have checked the page with https://validator.unl.edu/
All the tests have passed
My pull request is based on the latest commit (not the npm version).

ℹ Additional Information

Currently, the workaround is to manually add <Dropdown class="py-2" [...]> to every Dropdown usage. I like the default style, and I'd like to use it easily without having to create my own custom wrapper for a simple class change which should be considered an issue to begin with.

Summary by CodeRabbit

Style
- Improved code readability in the dropdown component by adding spacing.

stackblitz · 2023-09-25T18:44:41Z

Run & review this pull request in StackBlitz Codeflow.

vercel · 2023-09-25T18:44:42Z

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

Name	Status	Preview	Comments	Updated (UTC)
flowbite-svelte	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 15, 2023 8:16pm
flowbite-svelte-update	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 15, 2023 8:16pm

V-ed · 2023-09-25T18:54:43Z

Looking at the preview website, I think one issue might come from this is that both the headerClass and the footerClass also define py-1, making weird inconsistent paddings :

Should these also be switched to this? :

-export let headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
-export let footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
+export let headerClass: string = 'pt-2 pb-1 overflow-hidden rounded-t-lg';
+export let footerClass: string = 'pt-1 pb-2 overflow-hidden rounded-b-lg';

... which would allow to keep the p-1 margin between elements, but p-2 for the top/bottom paddings of the container.

shinokada · 2024-02-25T18:21:14Z

Let me know if this PR is completed.

V-ed · 2024-02-25T21:37:43Z

Looking at the preview website, I think one issue might come from this is that both the headerClass and the footerClass also define py-1, making weird inconsistent paddings :

Should these also be switched to this? :
-export let headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
-export let footerClass: string = 'py-1 overflow-hidden rounded-b-lg';
+export let headerClass: string = 'pt-2 pb-1 overflow-hidden rounded-t-lg';
+export let footerClass: string = 'pt-1 pb-2 overflow-hidden rounded-b-lg';
... which would allow to keep the p-1 margin between elements, but p-2 for the top/bottom paddings of the container.

This was never answered...

shinokada · 2024-04-19T19:29:00Z

Yes, it is a good idea to add:

+export let headerClass: string = 'pt-2 pb-1 overflow-hidden rounded-t-lg';
+export let footerClass: string = 'pt-1 pb-2 overflow-hidden rounded-b-lg';

Can you fix the conflicting files to align with the latest?

vercel · 2024-04-25T19:00:30Z

@shinokada is attempting to deploy a commit to the Themesberg Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2024-04-25T19:00:33Z

Walkthrough

This update introduces a minor adjustment to the Dropdown.svelte file by adding a blank line, enhancing the readability and structure of the code without altering its functionality.

Changes

File	Change Summary
`src/lib/dropdown/.../Dropdown.svelte`	Added a blank line for improved readability before the reactive declaration block.

Possibly related issues

Customization of button content in Dropdown flowbite-react#1271: Although the changes in this PR are stylistic and do not directly impact functionality, ensuring code clarity and readability can indirectly support future enhancements like those requested in the issue, where detailed customization of component alignment is discussed.

🐇✨
A line so fine, it's nearly divine,
Space to breathe, in code we weave.
A hop, a skip in the script,
Neat and tidy, our code now sprightly!
🌟🐾

Recent Review Details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 31b7fb7 and 0d27346.

Files selected for processing (1)

src/lib/dropdown/Dropdown.svelte (1 hunks)

Files skipped from review due to trivial changes (1)

src/lib/dropdown/Dropdown.svelte

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.

V-ed · 2024-04-25T19:15:10Z

@shinokada , your merge overwrote mine and the padding is still py-1. Because of the merge, this PR now technically only adds a single empty line in the codebase.

V-ed · 2024-04-25T19:35:09Z

Like, not gonna lie this whole PR was not fun at all, waiting for 5 months for a lackluster review, waiting another 2 months for an actual feedback, then a merge that completely overrides what I did, dismisses the actual review of adding proper padding to the other elements, then (not dramatically) tarnish my committer status as an author of an empty commit in a public repo.

I'm not angry at all, simply disappointed.

Love the design, but I think the structural issues with this library is making me want to switch.

I know this message makes me seems entitled to having free support, but I hope I can make it clear that I don't, I just want to express how I felt with the usage of this library in general.

Anyhow, good luck with the rest!

fix(Dropdown): default padding should be py-2

2a04e8a

vercel bot deployed to Preview – flowbite-svelte-update September 25, 2023 18:46 View deployment

vercel bot deployed to Preview – flowbite-svelte September 25, 2023 18:49 View deployment

Merge branch 'themesberg:main' into patch-1

21e0af4

vercel bot deployed to Preview – flowbite-svelte November 15, 2023 20:14 View deployment

vercel bot deployed to Preview – flowbite-svelte-update November 15, 2023 20:16 View deployment

Merge branch 'main' into patch-1

0d27346

shinokada merged commit 262c2d0 into themesberg:main Apr 25, 2024
1 of 2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(Dropdown): default padding should be `py-2` #1088

fix(Dropdown): default padding should be `py-2` #1088

V-ed commented Sep 25, 2023 •

edited by coderabbitai bot

Loading

stackblitz bot commented Sep 25, 2023

vercel bot commented Sep 25, 2023 •

edited

Loading

V-ed commented Sep 25, 2023

shinokada commented Feb 25, 2024

V-ed commented Feb 25, 2024

shinokada commented Apr 19, 2024

vercel bot commented Apr 25, 2024

coderabbitai bot commented Apr 25, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

V-ed commented Apr 25, 2024

V-ed commented Apr 25, 2024

fix(Dropdown): default padding should be py-2 #1088

fix(Dropdown): default padding should be py-2 #1088

Conversation

V-ed commented Sep 25, 2023 • edited by coderabbitai bot Loading

📑 Description

Status

✅ Checks

ℹ Additional Information

Summary by CodeRabbit

stackblitz bot commented Sep 25, 2023

vercel bot commented Sep 25, 2023 • edited Loading

V-ed commented Sep 25, 2023

shinokada commented Feb 25, 2024

V-ed commented Feb 25, 2024

shinokada commented Apr 19, 2024

vercel bot commented Apr 25, 2024

coderabbitai bot commented Apr 25, 2024 • edited Loading

Walkthrough

Changes

Possibly related issues

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

V-ed commented Apr 25, 2024

V-ed commented Apr 25, 2024

fix(Dropdown): default padding should be `py-2` #1088

fix(Dropdown): default padding should be `py-2` #1088

V-ed commented Sep 25, 2023 •

edited by coderabbitai bot

Loading

vercel bot commented Sep 25, 2023 •

edited

Loading

coderabbitai bot commented Apr 25, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)