Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-24 13:41:39 -05:00
Code Issues Activity

Merge pull request #5530 from penpot/eva-fix-icon-component

Browse source 
🐛  Fix icon* component prop
This commit is contained in:
Eva Marco 2025-01-09 12:22:41 +01:00 • committed by GitHub
commit 6874f5475c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 39 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/technical-guide/developer/ui.md
View file

@ -84,7 +84,7 @@ However, we might want to control the aspect of the icons, or limit which icons
[{:keys [icon children] :rest props}]
(assert (or (nil? icon) (contains? valid-icon-list icon) "expected valid icon id"))
[:> "button" props
(when icon [:> icon* {:id icon :size "m"}])
(when icon [:> icon* {:icon-id icon :size "m"}])
children])
```
@ -160,7 +160,7 @@ Nested styles for DOM elements that are not instantiated by our component should
[{:keys [icon children class] :rest props}]
(let [props (mf/spread-props props {:class (stl/css :button)})]
[:> "button" props
(when icon [:> icon* {:id icon :size "m"}])
(when icon [:> icon* {:icon-id icon :size "m"}])
[:span {:class (stl/css :label-wrapper)} children]]))
;; later in code

2
frontend/src/app/main/ui/comments.cljs
View file

@ -737,7 +737,7 @@
[:div {:class (stl/css :cover)
:on-click on-click*}
[:div {:class (stl/css :location)}
[:> icon* {:id "comments"
[:> icon* {:icon-id "comments"
:class (stl/css :location-icon)}]
[:div {:class (stl/css :location-text)}
(str "#" (:seqn item))

2
frontend/src/app/main/ui/components/reorder_handler.cljs
View file

@ -16,7 +16,7 @@
[:*
[:div {:ref ref :class (stl/css :reorder)}
[:> icon*
{:id ic/reorder
{:icon-id ic/reorder
:class (stl/css :reorder-icon)
:aria-hidden true}]]
[:hr {:class (stl/css :reorder-separator-top)}]

2
frontend/src/app/main/ui/dashboard/team.cljs
View file

@ -953,7 +953,7 @@
[:span {:title (tr "dashboard.webhooks.cant-edit")
:class (stl/css :menu-disabled)}
[:> icon* {:id "menu"}]])))
[:> icon* {:icon-id "menu"}]])))
(mf/defc webhook-item*
{::mf/wrap [mf/memo]

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)

3
frontend/src/app/main/ui/static.cljs
View file

@ -47,7 +47,8 @@
:on-click on-nav-root}
[:> raw-svg* {:id "penpot-logo-icon" :class (stl/css :penpot-logo)}]
(when profile-id
[:div {:class (stl/css :go-back-wrapper)} [:> icon* {:id "arrow" :class (stl/css :back-arrow)}] [:span (tr "not-found.no-permission.go-dashboard")]])]
[:div {:class (stl/css :go-back-wrapper)}
[:> icon* {:icon-id "arrow" :class (stl/css :back-arrow)}] [:span (tr "not-found.no-permission.go-dashboard")]])]
[:div {:class (stl/css :deco-before)} i/logo-error-screen]
(when-not profile-id
[:button {:class (stl/css :login-header)

2
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -44,7 +44,7 @@
;; NOTE: This custom button may be replace by an action button when this variant is designed
[:button {:class (stl/css :collapse-sidebar-button)
:on-click on-click}
[:& icon* {:id "arrow"
[:> icon* {:icon-id "arrow"
:size "s"
:aria-label (tr "workspace.sidebar.collapse")}]])

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/border_radius.cljs
View file

@ -64,7 +64,7 @@
(if (not radius-expanded)
[:div {:class (stl/css :radius-1)
:title (tr "workspace.options.radius")}
[:> icon* {:id "corner-radius"
[:> icon* {:icon-id "corner-radius"
:size "s"
:class (stl/css :icon)}]
[:> numeric-input*

10
frontend/src/app/main/ui/workspace/tokens/modals/themes.cljs
View file

@ -90,7 +90,7 @@
:class (stl/css :theme-group-label)
:typography "body-large"}
[:span {:class (stl/css :group-title)}
[:> icon* {:id "group"}]
[:> icon* {:icon-id "group"}]
group]])
[:ul {:class (stl/css :theme-group-rows-wrapper)}
(for [[_ {:keys [group name] :as theme}] themes
@ -131,7 +131,7 @@
[:div {:class (stl/css :label-wrapper)}
[:> text* {:as "span" :typography "body-medium"}
(tr "workspace.token.num-sets" sets-count)]
[:> icon* {:id "arrow-right"}]]]
[:> icon* {:icon-id "arrow-right"}]]]
[:> button* {:class (stl/css :sets-count-empty-button)
:type "button"
@ -140,7 +140,7 @@
[:div {:class (stl/css :label-wrapper)}
[:> text* {:as "span" :typography "body-medium"}
(tr "workspace.token.no-sets")]
[:> icon* {:id "arrow-right"}]]])
[:> icon* {:icon-id "arrow-right"}]]])
[:> icon-button* {:on-click delete-theme
:variant "ghost"
@ -186,7 +186,7 @@
:on-click (fn [e]
(dom/stop-propagation e)
(on-toggle-dropdown))}
[:> icon* {:id "arrow-down"}]]))}]]
[:> icon* {:icon-id "arrow-down"}]]))}]]
[:div {:class (stl/css :group-input-wrapper)}
;; TODO: This span should be remove when labeled-input is updated
[:span {:class (stl/css :labeled-input-label)} "Theme"]
@ -306,7 +306,7 @@
[:button {:on-click on-back
:class (stl/css :back-btn)
:type "button"}
[:> icon* {:id ic/arrow-left :aria-hidden true}]
[:> icon* {:icon-id ic/arrow-left :aria-hidden true}]
(tr "workspace.token.back-to-themes")]
[:& theme-inputs {:dropdown-open? dropdown-open?

14
frontend/src/app/main/ui/workspace/tokens/sets.cljs
View file

@ -96,9 +96,8 @@
:aria-label (tr "labels.collapse")
:icon (if @collapsed? "arrow-right" "arrow-down")
:variant "action"}]
[:> icon*
{:id "group"
:class (stl/css :icon)}]
[:> icon* {:icon-id "group"
:class (stl/css :icon)}]
(if editing?'
[:& editing-label
{:default-value label
@ -139,10 +138,9 @@
:on-click on-click
:on-double-click #(on-edit tree-path)
:on-context-menu on-context-menu}
[:> icon*
{:id "document"
:class (stl/css-case :icon true
:root-icon (not tree-depth))}]
[:> icon* {:icon-id "document"
:class (stl/css-case :icon true
:root-icon (not tree-depth))}]
(if editing?'
[:& editing-label
{:default-value label
@ -160,7 +158,7 @@
[:> icon* {:aria-label (tr "workspace.token.select-set")
:class (stl/css :check-icon)
:size "s"
:id ic/tick}])]])]))
:icon-id ic/tick}])]])]))
(mf/defc sets-tree
[{:keys [set-path set-node tree-depth tree-path on-select selected? on-toggle active? editing? on-edit on-edit-reset on-edit-submit]

6
frontend/src/app/main/ui/workspace/tokens/theme_select.cljs
View file

@ -42,7 +42,7 @@
:is-selected selected?)
:on-click select-theme}
[:> text* {:as "span" :typography "body-small" :class (stl/css :label)} name]
[:> icon* {:id i/tick
[:> icon* {:icon-id i/tick
:aria-hidden true
:class (stl/css-case :check-icon true
:check-icon-visible selected?)}]])]))
@ -70,7 +70,7 @@
:role "option"
:on-click on-edit-click}
[:> text* {:as "span" :typography "body-small"} (tr "workspace.token.edit-themes")]
[:> icon* {:id i/arrow-right :aria-hidden true}]]])))
[:> icon* {:icon-id i/arrow-right :aria-hidden true}]]])))
(mf/defc theme-select
[{:keys []}]
@ -108,7 +108,7 @@
:class (stl/css :custom-select)}
[:> text* {:as "span" :typography "body-small" :class (stl/css :current-label)}
current-label]
[:> icon* {:id i/arrow-down :class (stl/css :dropdown-button) :aria-hidden true}]
[:> icon* {:icon-id i/arrow-down :class (stl/css :dropdown-button) :aria-hidden true}]
[:& dropdown {:show is-open?
:on-close on-close-dropdown
:ref dropdown-element*}