Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Panel: Icon stroke and size inconsistency #6663

Closed
nilshoerrmann opened this issue Sep 11, 2024 · 2 comments · Fixed by #6673
Closed

Panel: Icon stroke and size inconsistency #6663

nilshoerrmann opened this issue Sep 11, 2024 · 2 comments · Fixed by #6673
Milestone

Comments

@nilshoerrmann
Copy link
Contributor

Description

We are working on a panel plugin and a section with the following button group:

            <k-button-group layout="collapsed" class="k-tracker-date">
                <k-button
                    icon="calendar"
                    variant="filled"
                    :dropdown="true"
                    size="xs"
                    @click="$refs.statsRange.toggle()"
                >
                    {{ labelRange }}
                </k-button>

                <k-dropdown-content
                    ref="statsRange"
                    :options="dropdown"
                    theme="light"
                    align-x="end"
                />

                <k-button icon="angle-left" size="xs" variant="filled" />
                <k-button icon="angle-right" size="xs" variant="filled" />
            </k-button-group>

This creates inconsistent icon proportions and stroke widths:

grafik

Expected behavior
The chevrons should match in size and stroke. Judging other areas of the system, it looks as if the dropdowns icon is to small and thin. But maybe the middelground would be better for extra small sized buttons: stronger strokes for the dropdown but an icon size between the to existing.

Your setup

Kirby Version
Latest version.

@distantnative
Copy link
Member

I think this is a deliberate design choice to have the dropdown arrow rendered in a smaller, less dominant way compared to the main button icons (here: calendar, angle-left, angle-right).

@nilshoerrmann
Copy link
Contributor Author

nilshoerrmann commented Sep 11, 2024

Okay, this might boil down to personal preference but I think the down pointing chevron is even too thin compared to the font weight. Feel free to close this though, if you think this is just fine in context of your design system.

@distantnative distantnative linked a pull request Sep 14, 2024 that will close this issue
1 task
@bastianallgeier bastianallgeier added this to the 4.5.0 milestone Sep 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants