3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-27 23:46:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix icon* component prop

Browse source
This commit is contained in:
Eva Marco 2025-01-09 11:54:36 +01:00
parent 4bd1e32462
commit 5ee87018b9
19 changed files with 39 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/ds/buttons/button.cljs
View file

@ -32,5 +32,5 @@
:button-destructive (= variant "destructive")))
props (mf/spread-props props {:class class})]
[:> "button" props
(when icon [:> icon* {:id icon :size "m"}])
(when icon [:> icon* {:icon-id icon :size "m"}])
[:span {:class (stl/css :label-wrapper)} children]]))

2
frontend/src/app/main/ui/ds/buttons/icon_button.cljs
View file

@ -34,4 +34,4 @@
:icon-button-action (= variant "action")
:icon-button-destructive (= variant "destructive")))
props (mf/spread-props props {:class class :title aria-label})]
[:> "button" props [:> icon* {:id icon :aria-label aria-label :class icon-class}] children]))
[:> "button" props [:> icon* {:icon-id icon :aria-label aria-label :class icon-class}] children]))

4
frontend/src/app/main/ui/ds/controls/combobox.cljs
View file

@ -215,7 +215,7 @@
[:span {:class (stl/css-case :combobox-header true
:header-icon (some? icon))}
(when icon
[:> icon* {:id icon
[:> icon* {:icon-id icon
:size "s"
:aria-hidden true}])
[:input {:type "text"
@ -236,7 +236,7 @@
:aria-controls listbox-id
:class (stl/css :button-toggle-list)
:on-click on-click}
[:> icon* {:id i/arrow
[:> icon* {:icon-id i/arrow
:class (stl/css :arrow)
:size "s"
:aria-hidden true

2
frontend/src/app/main/ui/ds/controls/input.cljs
View file

@ -46,5 +46,5 @@
[:> :span {:class (dm/str class " " (stl/css :container))}
(when (some? icon)
[:> icon* {:id icon :class (stl/css :icon) :on-click on-icon-click}])
[:> icon* {:icon-id icon :class (stl/css :icon) :on-click on-icon-click}])
[:> :input props]]))

4
frontend/src/app/main/ui/ds/controls/select.cljs
View file

@ -171,12 +171,12 @@
[:span {:class (stl/css-case :select-header true
:header-icon (some? icon))}
(when icon
[:> icon* {:id icon
[:> icon* {:icon-id icon
:size "s"
:aria-hidden true}])
[:span {:class (stl/css :header-label)}
label]]
[:> icon* {:id i/arrow
[:> icon* {:icon-id i/arrow
:class (stl/css :arrow)
:size "s"
:aria-hidden true}]]

4
frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs
View file

@ -31,7 +31,7 @@
(when (some? icon)
[:> icon*
{:id icon
{:icon-id icon
:size "s"
:class (stl/css :option-icon)
:aria-hidden (when label true)
@ -40,7 +40,7 @@
[:span {:class (stl/css :option-text)} label]
(when selected
[:> icon*
{:id i/tick
{:icon-id i/tick
:size "s"
:class (stl/css :option-check)
:aria-hidden (when label true)}])])

6
frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
View file

@ -287,17 +287,17 @@
(def ^:private schema:icon
[:map
[:class {:optional true} [:maybe :string]]
[:id [:and :string [:fn #(contains? icon-list %)]]]
[:icon-id [:and :string [:fn #(contains? icon-list %)]]]
[:size {:optional true}
[:maybe [:enum "s" "m"]]]])
(mf/defc icon*
{::mf/props :obj
::mf/schema schema:icon}
[{:keys [id size class] :rest props}]
[{:keys [icon-id size class] :rest props}]
(let [class (dm/str (or class "") " " (stl/css :icon))
props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m})
size-px (cond (= size "s") icon-size-s :else icon-size-m)
offset (/ (- icon-size-m size-px) 2)]
[:> "svg" props
[:use {:href (dm/str "#icon-" id) :width size-px :height size-px :x offset :y offset}]]))
[:use {:href (dm/str "#icon-" icon-id) :width size-px :height size-px :x offset :y offset}]]))

6
frontend/src/app/main/ui/ds/foundations/assets/icon.mdx
View file

@ -47,7 +47,7 @@ Assuming the namespace is required as `i`:
You can now use the icon IDs defined in the namespace:
```clj
[:> i/icon* {:id i/pin}]
[:> i/icon* {:icon-id i/pin}]
```
### Customizing colors
@ -59,7 +59,7 @@ If you need to override this behavior, you can use a `class` in the `<Icon>`
component and set `color` to whatever value you prefer:
```clj
[:> i/icon* {:id i/add :class (stl/css :toolbar-icon)}]
[:> i/icon* {:icon-id i/add :class (stl/css :toolbar-icon)}]
```
```scss
@ -74,7 +74,7 @@ By default, icons do not have any accessible text attached to them. You should
add an `aria-label` attribute to set a proper text:
```clj
[:> i/icon* {:id i/add :aria-label (tr "foo.bar")}]
[:> i/icon* {:icon-id i/add :aria-label (tr "foo.bar")}]
```
## Usage guidelines for design

2
frontend/src/app/main/ui/ds/layout/tab_switcher.cljs
View file

@ -38,7 +38,7 @@
[:> :button props
(when (some? icon)
[:> icon*
{:id icon
{:icon-id icon
:aria-hidden (when label true)
:aria-label (when (not label) aria-label)}])
(when (string? label)