mirror of
https://github.com/penpot/penpot.git
synced 2025-03-14 16:51:18 -05:00
Merge pull request #5530 from penpot/eva-fix-icon-component
🐛 Fix icon* component prop
This commit is contained in:
commit
6874f5475c
19 changed files with 39 additions and 40 deletions
|
@ -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
|
||||
|
|
|
@ -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))
|
||||
|
|
|
@ -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)}]
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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]]))
|
|
@ -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]))
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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]]))
|
||||
|
|
|
@ -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}]]
|
||||
|
|
|
@ -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)}])])
|
||||
|
|
|
@ -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}]]))
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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")}]])
|
||||
|
||||
|
|
|
@ -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*
|
||||
|
|
|
@ -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?
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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*}
|
||||
|
|
Loading…
Add table
Reference in a new issue