3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-17 03:06:11 +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

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}] [{:keys [icon children] :rest props}]
(assert (or (nil? icon) (contains? valid-icon-list icon) "expected valid icon id")) (assert (or (nil? icon) (contains? valid-icon-list icon) "expected valid icon id"))
[:> "button" props [:> "button" props
(when icon [:> icon* {:id icon :size "m"}]) (when icon [:> icon* {:icon-id icon :size "m"}])
children]) children])
``` ```
@ -160,7 +160,7 @@ Nested styles for DOM elements that are not instantiated by our component should
[{:keys [icon children class] :rest props}] [{:keys [icon children class] :rest props}]
(let [props (mf/spread-props props {:class (stl/css :button)})] (let [props (mf/spread-props props {:class (stl/css :button)})]
[:> "button" props [:> "button" props
(when icon [:> icon* {:id icon :size "m"}]) (when icon [:> icon* {:icon-id icon :size "m"}])
[:span {:class (stl/css :label-wrapper)} children]])) [:span {:class (stl/css :label-wrapper)} children]]))
;; later in code ;; later in code

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

@ -737,7 +737,7 @@
[:div {:class (stl/css :cover) [:div {:class (stl/css :cover)
:on-click on-click*} :on-click on-click*}
[:div {:class (stl/css :location)} [:div {:class (stl/css :location)}
[:> icon* {:id "comments" [:> icon* {:icon-id "comments"
:class (stl/css :location-icon)}] :class (stl/css :location-icon)}]
[:div {:class (stl/css :location-text)} [:div {:class (stl/css :location-text)}
(str "#" (:seqn item)) (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)} [:div {:ref ref :class (stl/css :reorder)}
[:> icon* [:> icon*
{:id ic/reorder {:icon-id ic/reorder
:class (stl/css :reorder-icon) :class (stl/css :reorder-icon)
:aria-hidden true}]] :aria-hidden true}]]
[:hr {:class (stl/css :reorder-separator-top)}] [: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") [:span {:title (tr "dashboard.webhooks.cant-edit")
:class (stl/css :menu-disabled)} :class (stl/css :menu-disabled)}
[:> icon* {:id "menu"}]]))) [:> icon* {:icon-id "menu"}]])))
(mf/defc webhook-item* (mf/defc webhook-item*
{::mf/wrap [mf/memo] {::mf/wrap [mf/memo]

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

@ -32,5 +32,5 @@
:button-destructive (= variant "destructive"))) :button-destructive (= variant "destructive")))
props (mf/spread-props props {:class class})] props (mf/spread-props props {:class class})]
[:> "button" props [:> "button" props
(when icon [:> icon* {:id icon :size "m"}]) (when icon [:> icon* {:icon-id icon :size "m"}])
[:span {:class (stl/css :label-wrapper)} children]])) [: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-action (= variant "action")
:icon-button-destructive (= variant "destructive"))) :icon-button-destructive (= variant "destructive")))
props (mf/spread-props props {:class class :title aria-label})] 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 [:span {:class (stl/css-case :combobox-header true
:header-icon (some? icon))} :header-icon (some? icon))}
(when icon (when icon
[:> icon* {:id icon [:> icon* {:icon-id icon
:size "s" :size "s"
:aria-hidden true}]) :aria-hidden true}])
[:input {:type "text" [:input {:type "text"
@ -236,7 +236,7 @@
:aria-controls listbox-id :aria-controls listbox-id
:class (stl/css :button-toggle-list) :class (stl/css :button-toggle-list)
:on-click on-click} :on-click on-click}
[:> icon* {:id i/arrow [:> icon* {:icon-id i/arrow
:class (stl/css :arrow) :class (stl/css :arrow)
:size "s" :size "s"
:aria-hidden true :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))} [:> :span {:class (dm/str class " " (stl/css :container))}
(when (some? icon) (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]])) [:> :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 [:span {:class (stl/css-case :select-header true
:header-icon (some? icon))} :header-icon (some? icon))}
(when icon (when icon
[:> icon* {:id icon [:> icon* {:icon-id icon
:size "s" :size "s"
:aria-hidden true}]) :aria-hidden true}])
[:span {:class (stl/css :header-label)} [:span {:class (stl/css :header-label)}
label]] label]]
[:> icon* {:id i/arrow [:> icon* {:icon-id i/arrow
:class (stl/css :arrow) :class (stl/css :arrow)
:size "s" :size "s"
:aria-hidden true}]] :aria-hidden true}]]

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

@ -31,7 +31,7 @@
(when (some? icon) (when (some? icon)
[:> icon* [:> icon*
{:id icon {:icon-id icon
:size "s" :size "s"
:class (stl/css :option-icon) :class (stl/css :option-icon)
:aria-hidden (when label true) :aria-hidden (when label true)
@ -40,7 +40,7 @@
[:span {:class (stl/css :option-text)} label] [:span {:class (stl/css :option-text)} label]
(when selected (when selected
[:> icon* [:> icon*
{:id i/tick {:icon-id i/tick
:size "s" :size "s"
:class (stl/css :option-check) :class (stl/css :option-check)
:aria-hidden (when label true)}])]) :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 (def ^:private schema:icon
[:map [:map
[:class {:optional true} [:maybe :string]] [:class {:optional true} [:maybe :string]]
[:id [:and :string [:fn #(contains? icon-list %)]]] [:icon-id [:and :string [:fn #(contains? icon-list %)]]]
[:size {:optional true} [:size {:optional true}
[:maybe [:enum "s" "m"]]]]) [:maybe [:enum "s" "m"]]]])
(mf/defc icon* (mf/defc icon*
{::mf/props :obj {::mf/props :obj
::mf/schema schema:icon} ::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)) (let [class (dm/str (or class "") " " (stl/css :icon))
props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m}) 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) size-px (cond (= size "s") icon-size-s :else icon-size-m)
offset (/ (- icon-size-m size-px) 2)] offset (/ (- icon-size-m size-px) 2)]
[:> "svg" props [:> "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: You can now use the icon IDs defined in the namespace:
```clj ```clj
[:> i/icon* {:id i/pin}] [:> i/icon* {:icon-id i/pin}]
``` ```
### Customizing colors ### 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: component and set `color` to whatever value you prefer:
```clj ```clj
[:> i/icon* {:id i/add :class (stl/css :toolbar-icon)}] [:> i/icon* {:icon-id i/add :class (stl/css :toolbar-icon)}]
``` ```
```scss ```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: add an `aria-label` attribute to set a proper text:
```clj ```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 ## Usage guidelines for design

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

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

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

@ -47,7 +47,8 @@
:on-click on-nav-root} :on-click on-nav-root}
[:> raw-svg* {:id "penpot-logo-icon" :class (stl/css :penpot-logo)}] [:> raw-svg* {:id "penpot-logo-icon" :class (stl/css :penpot-logo)}]
(when profile-id (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] [:div {:class (stl/css :deco-before)} i/logo-error-screen]
(when-not profile-id (when-not profile-id
[:button {:class (stl/css :login-header) [: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 ;; NOTE: This custom button may be replace by an action button when this variant is designed
[:button {:class (stl/css :collapse-sidebar-button) [:button {:class (stl/css :collapse-sidebar-button)
:on-click on-click} :on-click on-click}
[:& icon* {:id "arrow" [:> icon* {:icon-id "arrow"
:size "s" :size "s"
:aria-label (tr "workspace.sidebar.collapse")}]]) :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) (if (not radius-expanded)
[:div {:class (stl/css :radius-1) [:div {:class (stl/css :radius-1)
:title (tr "workspace.options.radius")} :title (tr "workspace.options.radius")}
[:> icon* {:id "corner-radius" [:> icon* {:icon-id "corner-radius"
:size "s" :size "s"
:class (stl/css :icon)}] :class (stl/css :icon)}]
[:> numeric-input* [:> 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) :class (stl/css :theme-group-label)
:typography "body-large"} :typography "body-large"}
[:span {:class (stl/css :group-title)} [:span {:class (stl/css :group-title)}
[:> icon* {:id "group"}] [:> icon* {:icon-id "group"}]
group]]) group]])
[:ul {:class (stl/css :theme-group-rows-wrapper)} [:ul {:class (stl/css :theme-group-rows-wrapper)}
(for [[_ {:keys [group name] :as theme}] themes (for [[_ {:keys [group name] :as theme}] themes
@ -131,7 +131,7 @@
[:div {:class (stl/css :label-wrapper)} [:div {:class (stl/css :label-wrapper)}
[:> text* {:as "span" :typography "body-medium"} [:> text* {:as "span" :typography "body-medium"}
(tr "workspace.token.num-sets" sets-count)] (tr "workspace.token.num-sets" sets-count)]
[:> icon* {:id "arrow-right"}]]] [:> icon* {:icon-id "arrow-right"}]]]
[:> button* {:class (stl/css :sets-count-empty-button) [:> button* {:class (stl/css :sets-count-empty-button)
:type "button" :type "button"
@ -140,7 +140,7 @@
[:div {:class (stl/css :label-wrapper)} [:div {:class (stl/css :label-wrapper)}
[:> text* {:as "span" :typography "body-medium"} [:> text* {:as "span" :typography "body-medium"}
(tr "workspace.token.no-sets")] (tr "workspace.token.no-sets")]
[:> icon* {:id "arrow-right"}]]]) [:> icon* {:icon-id "arrow-right"}]]])
[:> icon-button* {:on-click delete-theme [:> icon-button* {:on-click delete-theme
:variant "ghost" :variant "ghost"
@ -186,7 +186,7 @@
:on-click (fn [e] :on-click (fn [e]
(dom/stop-propagation e) (dom/stop-propagation e)
(on-toggle-dropdown))} (on-toggle-dropdown))}
[:> icon* {:id "arrow-down"}]]))}]] [:> icon* {:icon-id "arrow-down"}]]))}]]
[:div {:class (stl/css :group-input-wrapper)} [:div {:class (stl/css :group-input-wrapper)}
;; TODO: This span should be remove when labeled-input is updated ;; TODO: This span should be remove when labeled-input is updated
[:span {:class (stl/css :labeled-input-label)} "Theme"] [:span {:class (stl/css :labeled-input-label)} "Theme"]
@ -306,7 +306,7 @@
[:button {:on-click on-back [:button {:on-click on-back
:class (stl/css :back-btn) :class (stl/css :back-btn)
:type "button"} :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")] (tr "workspace.token.back-to-themes")]
[:& theme-inputs {:dropdown-open? dropdown-open? [:& 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") :aria-label (tr "labels.collapse")
:icon (if @collapsed? "arrow-right" "arrow-down") :icon (if @collapsed? "arrow-right" "arrow-down")
:variant "action"}] :variant "action"}]
[:> icon* [:> icon* {:icon-id "group"
{:id "group" :class (stl/css :icon)}]
:class (stl/css :icon)}]
(if editing?' (if editing?'
[:& editing-label [:& editing-label
{:default-value label {:default-value label
@ -139,10 +138,9 @@
:on-click on-click :on-click on-click
:on-double-click #(on-edit tree-path) :on-double-click #(on-edit tree-path)
:on-context-menu on-context-menu} :on-context-menu on-context-menu}
[:> icon* [:> icon* {:icon-id "document"
{:id "document" :class (stl/css-case :icon true
:class (stl/css-case :icon true :root-icon (not tree-depth))}]
:root-icon (not tree-depth))}]
(if editing?' (if editing?'
[:& editing-label [:& editing-label
{:default-value label {:default-value label
@ -160,7 +158,7 @@
[:> icon* {:aria-label (tr "workspace.token.select-set") [:> icon* {:aria-label (tr "workspace.token.select-set")
:class (stl/css :check-icon) :class (stl/css :check-icon)
:size "s" :size "s"
:id ic/tick}])]])])) :icon-id ic/tick}])]])]))
(mf/defc sets-tree (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] [{: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?) :is-selected selected?)
:on-click select-theme} :on-click select-theme}
[:> text* {:as "span" :typography "body-small" :class (stl/css :label)} name] [:> text* {:as "span" :typography "body-small" :class (stl/css :label)} name]
[:> icon* {:id i/tick [:> icon* {:icon-id i/tick
:aria-hidden true :aria-hidden true
:class (stl/css-case :check-icon true :class (stl/css-case :check-icon true
:check-icon-visible selected?)}]])])) :check-icon-visible selected?)}]])]))
@ -70,7 +70,7 @@
:role "option" :role "option"
:on-click on-edit-click} :on-click on-edit-click}
[:> text* {:as "span" :typography "body-small"} (tr "workspace.token.edit-themes")] [:> 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 (mf/defc theme-select
[{:keys []}] [{:keys []}]
@ -108,7 +108,7 @@
:class (stl/css :custom-select)} :class (stl/css :custom-select)}
[:> text* {:as "span" :typography "body-small" :class (stl/css :current-label)} [:> text* {:as "span" :typography "body-small" :class (stl/css :current-label)}
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? [:& dropdown {:show is-open?
:on-close on-close-dropdown :on-close on-close-dropdown
:ref dropdown-element*} :ref dropdown-element*}