tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Unify compact button size between variants (#39070)

Browse Source
This commit is contained in:
diondiondion 2026-05-18 16:33:23 +02:00 committed by GitHub
parent dcb6dbbc86
commit 28ae61f34d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/javascript/mastodon/components/button/button.stories.tsx
View File

@ -74,6 +74,24 @@ export const Compact: Story = {
play: buttonTest,
};
export const CompactSecondary: Story = {
args: {
compact: true,
secondary: true,
children: 'Compact secondary button',
},
play: buttonTest,
};
export const CompactPlain: Story = {
args: {
compact: true,
plain: true,
children: 'Compact plain button',
},
play: buttonTest,
};
export const Dangerous: Story = {
args: {
dangerous: true,

13
app/javascript/styles/mastodon/components.scss
View File

@ -84,7 +84,7 @@
.button {
background-color: var(--color-bg-brand-base);
border: 10px none;
border: 1px solid transparent;
border-radius: 4px;
box-sizing: border-box;
color: var(--color-text-on-brand-base);
@ -99,7 +99,7 @@
letter-spacing: 0;
line-height: 22px;
overflow: hidden;
padding: 7px 18px;
padding: 6px 17px;
position: relative;
text-align: center;
text-decoration: none;
@ -168,8 +168,7 @@
&.button-secondary {
color: var(--color-text-brand);
background: transparent;
padding: 6px 17px;
border: 1px solid var(--color-border-brand);
border-color: var(--color-border-brand);
&:active,
&:focus,
@ -212,7 +211,11 @@
// visually align its label with its surroundings while maintaining
// a generous click target
margin-inline: -6px;
border: 1px solid transparent;
&.button--compact {
padding: 5px;
margin-inline: -5px;
}
&:active,
&:focus,