3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-25 22:47:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Update icon prop name

Browse source
This commit is contained in:
Belén Albeza 2024-07-10 15:56:32 +02:00
parent d7ca4d49dc
commit 7e61acc4da
3 changed files with 21 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -279,10 +279,10 @@
(mf/defc icon* (mf/defc icon*
{::mf/props :obj} {::mf/props :obj}
[{:keys [icon size class] :rest props}] [{:keys [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-" icon) :width size-px :height size-px :x offset :y offset}]])) [:use {:href (dm/str "#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* {:icon i/pin}] [:> i/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* {:icon i/add :class (stl/css :toolbar-icon)}] [:> i/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* {:icon i/add :aria-label (tr "foo.bar")}] [:> i/icon* {:id i/add :aria-label (tr "foo.bar")}]
``` ```
## Usage guidelines for design ## Usage guidelines for design

28
frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx
View file

@ -14,7 +14,7 @@ export default {
title: "Foundations/Assets/Icon", title: "Foundations/Assets/Icon",
component: Components.Icon, component: Components.Icon,
argTypes: { argTypes: {
icon: { id: {
options: iconList, options: iconList,
control: { type: "select" } control: { type: "select" }
}, },
@ -25,12 +25,12 @@ export default {
} }
}; };
export const AllIcons = { export const All = {
render: () => ( render: ({size}) => (
<StoryWrapper theme="default"> <StoryWrapper theme="default">
<StoryHeader> <StoryHeader>
<h1>All Icons</h1> <h1>All Icons</h1>
<p>Hover on an icon to see its ID</p> <p>Hover on an icon to see its ID.</p>
</StoryHeader> </StoryHeader>
<StoryGrid> <StoryGrid>
{iconList.map((iconId) => ( {iconList.map((iconId) => (
@ -39,39 +39,43 @@ export const AllIcons = {
key={iconId} key={iconId}
style={{ color: "var(--color-accent-primary)" }} style={{ color: "var(--color-accent-primary)" }}
> >
<Icon icon={iconId} /> <Icon id={iconId} size={size} />
</StoryGridCell> </StoryGridCell>
))} ))}
</StoryGrid> </StoryGrid>
</StoryWrapper> </StoryWrapper>
), ),
args: {
size: "m",
},
parameters: { parameters: {
controls: { exclude: ["id", "size"] },
backgrounds: { disable: true }, backgrounds: { disable: true },
}, },
}; };
export const Default = { export const Default = {
render: ({icon, ...args}) => ( render: ({id, ...args}) => (
<StoryWrapper theme="default"> <StoryWrapper theme="default">
<Icon icon={icon} /> <Icon id={id} {...args} />
</StoryWrapper> </StoryWrapper>
), ),
args: { args: {
icon: "pin", id: "pin",
}, },
parameters: { parameters: {
controls: { exclude: "size" } controls: { exclude: ["size"] }
} }
}; };
export const CustomSize = { export const CustomSize = {
render: ({icon, size, ...args}) => ( render: ({id, size, ...args}) => (
<StoryWrapper theme="default"> <StoryWrapper theme="default">
<Icon icon={icon} size={size} /> <Icon id={id} size={size} {...args} />
</StoryWrapper> </StoryWrapper>
), ),
args: { args: {
icon: "pin", id: "pin",
size: "m", size: "m",
} }
}; };