Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-23 23:35:58 -05:00
Code Issues Activity

🐛 Fix Action Buttons size and display, and add example to Storybook

Browse source
This commit is contained in:
elenatorro 2025-02-12 17:02:20 +01:00
parent 5c32ec8cfa
commit f812460158
3 changed files with 49 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/app/main/ui/ds/buttons/_buttons.scss
View file

@ -20,14 +20,18 @@
--button-focus-inner-ring-color: initial;
--button-focus-outer-ring-color: initial;
--button-width: initial;
--button-height: #{$sz-32};
appearance: none;
height: $sz-32;
border: none;
border-radius: $br-8;
width: var(--button-width);
height: var(--button-height);
background: var(--button-bg-color);
color: var(--button-fg-color);
border: $b-1 solid var(--button-border-color);
border-radius: $br-8;
&:hover {
--button-bg-color: var(--button-hover-bg-color);
@ -130,21 +134,3 @@
box-shadow: inset 0 0 #{px2rem(10)} #{px2rem(2)} rgba(0, 0, 0, 0.2);
}
}
%base-button-action {
--button-bg-color: transparent;
--button-fg-color: var(--color-foreground-secondary);
--button-hover-bg-color: transparent;
--button-hover-fg-color: var(--color-accent-primary);
--button-active-bg-color: var(--color-background-quaternary);
--button-disabled-bg-color: transparent;
--button-disabled-fg-color: var(--color-accent-primary-muted);
--button-focus-bg-color: transparent;
--button-focus-fg-color: var(--color-accent-primary);
--button-focus-inner-ring-color: transparent;
--button-focus-outer-ring-color: var(--color-accent-primary);
}

18
frontend/src/app/main/ui/ds/buttons/buttons.mdx
View file

@ -45,6 +45,24 @@ These are available in the `app.main.ds.foundations.assets.icon` namespace.
<Canvas of={ButtonStories.WithIcon} />
```clj
[:> icon-button* {:variant "primary"
:icon i/effects}]
```
<Canvas of={IconButtonStories.Primary} />
### Action Buttons
Action buttons are a variant of `icon-button*` (`"action"`) but smaller.
```clj
[:> icon-button* {:variant "action"
:icon i/effects}]
```
<Canvas of={IconButtonStories.Action} />
### Accessibility
Icon buttons require an `aria-label`. This is also shown in a tooltip on hovering the button.

29
frontend/src/app/main/ui/ds/buttons/icon_button.scss
View file

@ -10,10 +10,12 @@
.icon-button {
@extend %base-button;
width: #{$sz-32};
display: flex;
justify-content: center;
align-items: center;
--button-width: #{$sz-32};
--button-height: #{$sz-32};
display: grid;
place-content: center;
}
.icon-button-primary {
@ -33,5 +35,22 @@
}
.icon-button-action {
@extend %base-button-action;
--button-bg-color: transparent;
--button-fg-color: var(--color-foreground-secondary);
--button-hover-bg-color: transparent;
--button-hover-fg-color: var(--color-accent-primary);
--button-active-bg-color: var(--color-background-quaternary);
--button-disabled-bg-color: transparent;
--button-disabled-fg-color: var(--color-accent-primary-muted);
--button-focus-bg-color: transparent;
--button-focus-fg-color: var(--color-accent-primary);
--button-focus-inner-ring-color: transparent;
--button-focus-outer-ring-color: var(--color-accent-primary);
--button-width: #{$sz-24};
--button-height: #{$sz-24};
}