github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-04-25 19:28:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #6547 from penpot/eva-remove-deprecated-props

Browse Source 
♻️ Update docs and remove deprecated props
This commit is contained in:
Andrey Antukh 2025-05-24 11:18:53 +02:00 committed by GitHub
commit 9638fd274f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
29 changed files with 26 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/technical-guide/developer/ui.md
View File

@ -36,7 +36,6 @@ We want to hold our UI code to the same quality standards of the rest of the cod
```clojure
(mf/defc primary-button*
{::mf/props :obj}
[{:keys [children] :rest props}]
[:> "button" props children])
```
@ -69,7 +68,6 @@ For instance, here the user would be in total control of the <code class="langua
```clojure
(mf/defc button*
{::mf/props :obj}
[{:keys [icon children] :rest props}]
[:> "button" props
icon
@ -80,7 +78,6 @@ However, we might want to control the aspect of the icons, or limit which icons
```clojure
(mf/defc button*
{::mf/props :obj}
[{:keys [icon children] :rest props}]
(assert (or (nil? icon) (contains? valid-icon-list icon) "expected valid icon id"))
[:> "button" props
@ -116,7 +113,6 @@ This is achieved by accepting a <code class="language-clojure">class</code> prop
```clojure
(mf/defc button*
{::mf/props :obj}
[{:keys [children class] :rest props}]
(let [class (dm/str class " " (stl/css :primary-button))
props (mf/spread-props props {:class class})]
@ -131,7 +127,6 @@ Nested styles for DOM elements that are not instantiated by our component should
```clojure
(mf/defc button*
{::mf/props :obj}
[{:keys [children] :rest props}]
(let [props (mf/spread-props props {:class (stl/css :primary-button)})]
;; note that we are NOT instantiating a <svg> here.
@ -156,7 +151,6 @@ Nested styles for DOM elements that are not instantiated by our component should
```clojure
(mf/defc button*
{::mf/props :obj}
[{:keys [icon children class] :rest props}]
(let [props (mf/spread-props props {:class (stl/css :button)})]
[:> "button" props
@ -404,7 +398,7 @@ Please refer to the [Rumext User Guide](https://funcool.github.io/rumext/latest/
Some things to have in mind:
- When you want to use JavaScript props, use the meta <code class="language-clojure">{::mf/props :obj}</code>. In this case, avoid using <code class="language-clojure">?</code> for boolean props, since they don't get a clean translation to JavaScript.
- Avoid using <code class="language-clojure">?</code> for boolean props, since they don't get a clean translation to JavaScript.
- You can use type hints such as <code class="language-clojure">^boolean</code> to get JS semantics.
- Split big components into smaller ones. You can mark components as private with the <code class="language-clojure">::mf/private true</code> meta.
@ -422,7 +416,6 @@ We just need to use `:rest ` when declaring the component props.
```clojure
(mf/defc button*
{::mf/props :obj}
[{:keys [children] :rest other}]
[:> "button" other children])
```
@ -431,7 +424,6 @@ If we need to augment this props object, we can use <code class="language-clojur
```clojure
(mf/defc button*
{::mf/props :obj}
[{:keys [children class] :rest props}]
(let [class (dm/str class " " (stl/css :button))
props (mf/spread-props props {:class class})]
@ -456,7 +448,6 @@ It's faster to use a JS Object for props instead of a native Clojure map, becaus
```clojure
(mf/defc icon*
{::mf/props :obj}
[props]
;; ...
)
@ -488,7 +479,6 @@ This creates a brand new function every render. Instead, create the function on
)
(mf/defc login-button
{::mf/props :obj}
[]
[:button {:on-click login} "Login"])
@ -502,7 +492,6 @@ When we do this inside of a component, a brand new function is created in every
```clojure
(mf/defc login-button
{::mf/props :obj}
[]
(let [click-handler (fn []
;; ...
@ -518,7 +507,6 @@ When we do this inside of a component, a brand new function is created in every
)
(mf/defc login-button
{::mf/props :obj}
[]
[:button {:on-click login} "Login"])
```
@ -585,7 +573,6 @@ Often we need to access values from props. It's best if we destructure them (bec
```clojure
(defc icon
{::mf/props :obj}
[{:keys [size img] :as props]
[:svg {:width size
:height size
@ -598,7 +585,6 @@ Often we need to access values from props. It's best if we destructure them (bec
```clojure
(defc icon
{::mf/props :obj}
[props]
[:svg {:width (unchecked-get props "size")
:height (unchecked-get props "size")
@ -615,7 +601,6 @@ We can avoid multiple calls to <code class="language-clojure">(deref)</code> if
```clojure
(defc accordion
{::mf/props :obj}
[{:keys [^boolean default-open title children] :as props]
(let [

3
frontend/src/app/main/ui/ds/buttons/button.cljs
View File

@ -22,8 +22,7 @@
[:maybe [:enum "primary" "secondary" "ghost" "destructive"]]]])
(mf/defc button*
{::mf/props :obj
::mf/schema schema:button}
{::mf/schema schema:button}
[{:keys [variant icon children class on-ref] :rest props}]
(let [variant (or variant "primary")
class (dm/str class " " (stl/css-case :button true

3
frontend/src/app/main/ui/ds/buttons/icon_button.cljs
View File

@ -24,8 +24,7 @@
[:maybe [:enum "primary" "secondary" "ghost" "destructive" "action"]]]])
(mf/defc icon-button*
{::mf/props :obj
::mf/schema schema:icon-button}
{::mf/schema schema:icon-button}
[{:keys [class icon icon-class variant aria-label children tooltip-id] :rest props}]
(let [variant (or variant "primary")
class (dm/str class " " (stl/css-case :icon-button true

3
frontend/src/app/main/ui/ds/controls/combobox.cljs
View File

@ -62,8 +62,7 @@
[:has-error {:optional true} :boolean]])
(mf/defc combobox*
{::mf/props :obj
::mf/schema schema:combobox}
{::mf/schema schema:combobox}
[{:keys [id options class placeholder disabled has-error default-selected max-length on-change] :rest props}]
(let [is-open* (mf/use-state false)
is-open (deref is-open*)

3
frontend/src/app/main/ui/ds/controls/input.cljs
View File

@ -33,8 +33,7 @@
[:hint-type {:optional true} [:maybe [:enum "hint" "error" "warning"]]]])
(mf/defc input*
{::mf/props :obj
::mf/forward-ref true
{::mf/forward-ref true
::mf/schema schema:input}
[{:keys [id class label is-optional type max-length variant hint-message hint-type] :rest props} ref]
(let [id (or id (mf/use-id))

3
frontend/src/app/main/ui/ds/controls/select.cljs
View File

@ -69,8 +69,7 @@
[:on-change {:optional true} fn?]])
(mf/defc select*
{::mf/props :obj
::mf/schema schema:select}
{::mf/schema schema:select}
[{:keys [options class disabled default-selected on-change] :rest props}]
(let [open* (mf/use-state false)
open (deref open*)

3
frontend/src/app/main/ui/ds/controls/shared/options_dropdown.cljs
View File

@ -13,8 +13,7 @@
[rumext.v2 :as mf]))
(mf/defc option*
{::mf/props :obj
::mf/private true}
{::mf/private true}
[{:keys [id label icon aria-label on-click selected set-ref focused] :rest props}]
[:> :li {:value id

3
frontend/src/app/main/ui/ds/controls/utilities/hint_message.cljs
View File

@ -19,8 +19,7 @@
[:class {:optional true} :string]])
(mf/defc hint-message*
{::mf/props :obj
::mf/schema schema::hint-message}
{::mf/schema schema::hint-message}
[{:keys [id class message type] :rest props}]
(let [type (d/nilv type :hint)]
[:> "div" {:class (dm/str class " " (stl/css-case

3
frontend/src/app/main/ui/ds/controls/utilities/input_field.cljs
View File

@ -30,8 +30,7 @@
[:slot-end {:optional true} [:maybe some?]]])
(mf/defc input-field*
{::mf/props :obj
::mf/forward-ref true
{::mf/forward-ref true
::mf/schema schema:input-field}
[{:keys [id icon has-hint hint-type class type max-length variant slot-start slot-end] :rest props} ref]
(let [input-ref (mf/use-ref)

3
frontend/src/app/main/ui/ds/controls/utilities/label.cljs
View File

@ -17,8 +17,7 @@
[:class {:optional true} :string]])
(mf/defc label*
{::mf/props :obj
::mf/schema schema::label}
{::mf/schema schema::label}
[{:keys [class for is-optional children] :rest props}]
(let [is-optional (or is-optional false)
props (mf/spread-props props {:class (dm/str class " " (stl/css :label))

3
frontend/src/app/main/ui/ds/foundations/assets/icon.cljs
View File

@ -300,8 +300,7 @@
[:maybe [:enum "s" "m"]]]])
(mf/defc icon*
{::mf/props :obj
::mf/schema schema:icon}
{::mf/schema schema:icon}
[{: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})

1
frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs
View File

@ -33,7 +33,6 @@
(def raw-svg-list "A collection of all raw SVG assets" (collect-raw-svgs))
(mf/defc raw-svg*
{::mf/props :obj}
[{:keys [id] :rest props}]
(assert (contains? raw-svg-list id) "invalid raw svg id")
[:> "svg" props

3
frontend/src/app/main/ui/ds/foundations/typography/heading.cljs
View File

@ -26,8 +26,7 @@
[:typography [:and :string [:fn #(valid-typography? (dm/str %))]]]])
(mf/defc heading*
{::mf/props :obj
::mf/schema schema:heading}
{::mf/schema schema:heading}
[{:keys [level typography class children] :rest props}]
(let [level (or level "1")

3
frontend/src/app/main/ui/ds/foundations/typography/text.cljs
View File

@ -22,8 +22,7 @@
[:typography [:and :string [:fn #(valid-typography? (dm/str %))]]]])
(mf/defc text*
{::mf/props :obj
::mf/schema schema:text}
{::mf/schema schema:text}
[{:keys [as typography children class] :rest props}]
(let [as (if (or (empty? as) (nil? as)) "p" as)

3
frontend/src/app/main/ui/ds/foundations/utilities/token/token_status.cljs
View File

@ -18,8 +18,7 @@
[:icon-id [:and :string [:fn #(contains? token-status-list %)]]]])
(mf/defc token-status-icon*
{::mf/props :obj
::mf/schema schema:token-status-icon}
{::mf/schema schema:token-status-icon}
[{:keys [icon-id class] :rest props}]
(let [class (dm/str (or class "") " " (stl/css :token-icon))
props (mf/spread-props props {:class class :width "14px" :height "14px"})

3
frontend/src/app/main/ui/ds/layout/tab_switcher.cljs
View File

@ -17,8 +17,7 @@
[rumext.v2 :as mf]))
(mf/defc tab*
{::mf/props :obj
::mf/private true}
{::mf/private true}
[{:keys [selected icon label aria-label id on-ref] :rest props}]
(let [class (stl/css-case :tab true
:selected selected)

3
frontend/src/app/main/ui/ds/notifications/context_notification.cljs
View File

@ -23,8 +23,7 @@
(mf/defc context-notification*
"Persistent notifications, they do not disappear.
These are contextual messages in specific areas of the tool, usually in modals and Dashboard area, and are mainly informative."
{::mf/props :obj
::mf/schema schema:context-notification}
{::mf/schema schema:context-notification}
[{:keys [class type appearance level is-html children] :rest props}]
(let [class (dm/str class " " (stl/css-case :contextual-notification true
:contain-html is-html

0
frontend/src/app/main/ui/ds/notifications/context_notification.css
View File

3
frontend/src/app/main/ui/ds/notifications/shared/notification_pill.cljs
View File

@ -34,8 +34,7 @@
[:on-toggle-detail {:optional true} [:maybe fn?]]])
(mf/defc notification-pill*
{::mf/props :obj
::mf/schema schema:notification-pill}
{::mf/schema schema:notification-pill}
[{:keys [level type is-html appearance detail children show-detail on-toggle-detail]}]
(let [class (stl/css-case :appearance-neutral (= appearance :neutral)
:appearance-ghost (= appearance :ghost)

3
frontend/src/app/main/ui/ds/notifications/toast.cljs
View File

@ -26,8 +26,7 @@
[:on-toggle-detail {:optional true} [:maybe fn?]]])
(mf/defc toast*
{::mf/props :obj
::mf/schema schema:toast}
{::mf/schema schema:toast}
[{:keys [class level appearance type is-html children detail show-detail on-close on-toggle-detail] :rest props}]
(let [class (dm/str class " " (stl/css :toast))
level (if (string? level)

3
frontend/src/app/main/ui/ds/product/autosaved_milestone.cljs
View File

@ -29,8 +29,7 @@
[:snapshots [:vector [:fn valid-date?]]]])
(mf/defc autosaved-milestone*
{::mf/props :obj
::mf/schema schema:milestone}
{::mf/schema schema:milestone}
[{:keys [class active versionToggled label autosavedMessage snapshots
onClickSnapshotMenu onToggleExpandSnapshots] :rest props}]
(let [class (d/append-class class (stl/css-case :milestone true :is-selected active))

3
frontend/src/app/main/ui/ds/product/avatar.cljs
View File

@ -24,8 +24,7 @@
[:maybe [:enum "S" "M" "L"]]]])
(mf/defc avatar*
{::mf/props :obj
::mf/schema schema:avatar}
{::mf/schema schema:avatar}
[{:keys [tag class name color url selected variant] :rest props}]
(let [variant (or variant "S")

3
frontend/src/app/main/ui/ds/product/cta.cljs
View File

@ -19,8 +19,7 @@
[:title :string]])
(mf/defc cta*
{::mf/props :obj
::mf/schema schema:cta}
{::mf/schema schema:cta}
[{:keys [class title children] :rest props}]
(let [class (d/append-class class (stl/css :cta))

3
frontend/src/app/main/ui/ds/product/empty_placeholder.cljs
View File

@ -22,8 +22,7 @@
[:type {:optional true} [:maybe [:enum 1 2]]]])
(mf/defc empty-placeholder*
{::mf/props :obj
::mf/schema schema:empty-placeholder}
{::mf/schema schema:empty-placeholder}
[{:keys [class title subtitle type children] :rest props}]
(let [class (dm/str class " " (stl/css :empty-placeholder))

3
frontend/src/app/main/ui/ds/product/input_with_meta.cljs
View File

@ -20,8 +20,7 @@
[:on-blur {:optional true} fn?]])
(mf/defc input-with-meta*
{::mf/props :obj
::mf/schema schema:input-with-meta}
{::mf/schema schema:input-with-meta}
[{:keys [value meta on-blur] :rest props}]
(let [editing* (mf/use-state false)
editing? (deref editing*)

3
frontend/src/app/main/ui/ds/product/user_milestone.cljs
View File

@ -38,8 +38,7 @@
[:onKeyDownInput {:optional true} [:maybe [:fn fn?]]]])
(mf/defc user-milestone*
{::mf/props :obj
::mf/schema schema:milestone}
{::mf/schema schema:milestone}
[{:keys [class active editing user label date
onOpenMenu onFocusInput onBlurInput onKeyDownInput] :rest props}]
(let [class (d/append-class class (stl/css-case :milestone true :is-selected active))

4
frontend/src/app/main/ui/ds/storybook.cljs
View File

@ -12,7 +12,6 @@
[rumext.v2 :as mf]))
(mf/defc story-grid*
{::mf/props :obj}
[{:keys [children size style] :rest other}]
(let [class (stl/css :story-grid)
size (or size 16)
@ -22,21 +21,18 @@
[:> "article" props children]))
(mf/defc story-grid-cell*
{::mf/props :obj}
[{:keys [children] :rest other}]
(let [class (stl/css :story-grid-cell)
props (mf/spread-props other {:class class})]
[:> "article" props children]))
(mf/defc story-header*
{::mf/props :obj}
[{:keys [children] :rest other}]
(let [class (stl/css :story-header)
props (mf/spread-props other {:class class})]
[:> "header" props children]))
(mf/defc story-grid-row*
{::mf/props :obj}
[{:keys [children] :rest other}]
(let [class (stl/css :story-grid-row)
props (mf/spread-props other {:class class})]

3
frontend/src/app/main/ui/ds/tooltip/tooltip.cljs
View File

@ -116,8 +116,7 @@
[:maybe [:enum "top" "bottom" "left" "right" "top-right" "bottom-right" "bottom-left" "top-left"]]]])
(mf/defc tooltip*
{::mf/props :obj
::mf/schema schema:tooltip}
{::mf/schema schema:tooltip}
[{:keys [class id children tooltip-content placement offset delay] :rest props}]
(let [placement* (mf/use-state #(d/nilv placement "top"))
placement (deref placement*)

3
frontend/src/app/main/ui/ds/utilities/date.cljs
View File

@ -28,8 +28,7 @@
[:typography {:optional true} :string]])
(mf/defc date*
{::mf/props :obj
::mf/schema schema:date}
{::mf/schema schema:date}
[{:keys [class date selected typography] :rest props}]
(let [class (d/append-class class (stl/css-case :date true :is-selected selected))
date (cond-> date (not (dt/datetime? date)) dt/datetime)