From f47a4a18e89e1b01277f88aeedd8f92c12ffadb8 Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Mon, 25 Sep 2023 13:22:07 +0200 Subject: [PATCH] chore: add docs with size (#17279) * chore: update guidelines for sizes * chore: update to size uses in codebase to follow new convention --------- Co-authored-by: Ulises M --- src/quo2/README.md | 29 +++++++ .../components/avatars/group_avatar/view.cljs | 22 ++--- src/quo2/components/avatars/icon_avatar.cljs | 18 ++--- .../dropdowns/network_dropdown/view.cljs | 2 +- .../list_items/preview_list/properties.cljs | 80 +++++++++---------- .../list_items/preview_list/view.cljs | 4 +- .../components/messages/system_message.cljs | 2 +- .../components/settings/data_item/view.cljs | 2 +- .../components/tags/context_tag/view.cljs | 2 +- .../tags/network_tags/component_spec.cljs | 2 +- .../components/tags/network_tags/view.cljs | 2 +- .../tags/number_tag/component_spec.cljs | 4 +- .../components/tags/number_tag/style.cljs | 40 +++++----- src/quo2/components/tags/number_tag/view.cljs | 2 +- src/quo2/components/wallet/keypair/view.cljs | 25 +++--- .../common/confirmation_drawer/view.cljs | 2 +- .../contexts/chat/group_details/view.cljs | 2 +- .../chat/home/chat_list_item/view.cljs | 2 +- .../contexts/communities/overview/view.cljs | 2 +- .../quo_preview/avatars/group_avatar.cljs | 12 +-- .../quo_preview/avatars/icon_avatar.cljs | 10 +-- .../quo_preview/list_items/preview_lists.cljs | 12 +-- .../contexts/quo_preview/tags/number_tag.cljs | 12 +-- .../components/switcher_cards/view.cljs | 4 +- 24 files changed, 162 insertions(+), 132 deletions(-) diff --git a/src/quo2/README.md b/src/quo2/README.md index 32a955eaa5..dac79a9067 100644 --- a/src/quo2/README.md +++ b/src/quo2/README.md @@ -69,6 +69,35 @@ In the image above we can see the properties are `Type`, `State`, `Size`, ...) ``` +### Handling Sizes +In the designs, sizes are referred to as integers. To avoid having the codebase littered with magic numbers we instead have a keyword convention to use in components to map these keywords with their sizes. + +The convention is `:size-`, e.g size `20` is `:size-20` + +```clojure +;; bad +(defn button + [{:keys [size]}] + [rn/view + {:style {:height (case size + 20 20 + 40 40 + 0)}}] + ...) +``` + +```clojure +;; good +(defn button + [{:keys [size]}] + [rn/view + {:style {:height (case size + :size-20 20 + :size-40 40 + 0)}}] + ...) +``` + ## Clojure var conventions - Due to the fact that every `view` namespace should export only one component diff --git a/src/quo2/components/avatars/group_avatar/view.cljs b/src/quo2/components/avatars/group_avatar/view.cljs index 7d7608624e..1620c0eefc 100644 --- a/src/quo2/components/avatars/group_avatar/view.cljs +++ b/src/quo2/components/avatars/group_avatar/view.cljs @@ -7,21 +7,21 @@ [quo2.components.avatars.group-avatar.style :as style])) (def sizes - {:size/s-20 {:icon 12 - :container 20} - :size/s-28 {:icon 16 - :container 28} - :size/s-32 {:icon 16 - :container 32} - :size/s-48 {:icon 20 - :container 48} - :size/s-80 {:icon 32 - :container 80}}) + {:size-20 {:icon 12 + :container 20} + :size-28 {:icon 16 + :container 28} + :size-32 {:icon 16 + :container 32} + :size-48 {:icon 20 + :container 48} + :size-80 {:icon 32 + :container 80}}) (defn- view-internal [_] (fn [{:keys [size theme customization-color picture icon-name] - :or {size :size/s-20 + :or {size :size-20 customization-color :blue picture nil icon-name :i/group}}] diff --git a/src/quo2/components/avatars/icon_avatar.cljs b/src/quo2/components/avatars/icon_avatar.cljs index 9f62a8975e..bf8f6c2d9a 100644 --- a/src/quo2/components/avatars/icon_avatar.cljs +++ b/src/quo2/components/avatars/icon_avatar.cljs @@ -5,19 +5,19 @@ [react-native.core :as rn])) (def ^:private sizes - {:size/s-48 {:component 48 - :icon 20} - :size/s-32 {:component 32 - :icon 20} - :size/s-24 {:component 24 - :icon 16} - :size/s-20 {:component 20 - :icon 12}}) + {:size-48 {:component 48 + :icon 20} + :size-32 {:component 32 + :icon 20} + :size-24 {:component 24 + :icon 16} + :size-20 {:component 20 + :icon 12}}) (defn icon-avatar-internal [{:keys [size icon color opacity border? theme] :or {opacity 20 - size :size/s-32}}] + size :size-32}}] (let [{component-size :component icon-size :icon} (get sizes size) circle-color (colors/custom-color color 50 opacity) icon-color (colors/custom-color-by-theme color 50 60)] diff --git a/src/quo2/components/dropdowns/network_dropdown/view.cljs b/src/quo2/components/dropdowns/network_dropdown/view.cljs index b368bec772..d14548fcf2 100644 --- a/src/quo2/components/dropdowns/network_dropdown/view.cljs +++ b/src/quo2/components/dropdowns/network_dropdown/view.cljs @@ -20,7 +20,7 @@ [preview-list/view {:type :network :list-size (count networks) - :size :size/s-20} + :size :size-20} networks]]))) (def view (quo.theme/with-theme internal-view)) diff --git a/src/quo2/components/list_items/preview_list/properties.cljs b/src/quo2/components/list_items/preview_list/properties.cljs index b8a2f09cf4..21945efe88 100644 --- a/src/quo2/components/list_items/preview_list/properties.cljs +++ b/src/quo2/components/list_items/preview_list/properties.cljs @@ -7,43 +7,43 @@ (if (types-for-squared-border type) :squared :rounded)) (def sizes - {:size/s-32 {:size 32 - :user-avatar-size :small - :border-radius {:rounded 16 :squared 10} - :hole-radius {:rounded 18 :squared 12} - :margin-left -8 - :hole-size 36 - :hole-x 22 - :hole-y -2} - :size/s-24 {:size 24 - :user-avatar-size :xs - :border-radius {:rounded 12 :squared 8} - :hole-radius {:rounded 13 :squared 9} - :margin-left -4 - :hole-size 26 - :hole-x 19 - :hole-y -1} - :size/s-20 {:size 20 - :user-avatar-size :xxs - :border-radius {:rounded 10 :squared 8} - :hole-radius {:rounded 11 :squared 9} - :margin-left -4 - :hole-size 22 - :hole-x 15 - :hole-y -1} - :size/s-16 {:size 16 - :user-avatar-size :xxxs - :border-radius {:rounded 8 :squared 8} - :hole-radius {:rounded 9 :squared 9} - :margin-left -4 - :hole-size 18 - :hole-x 11 - :hole-y -1} - :size/s-14 {:size 14 - :user-avatar-size :xxxs - :border-radius {:rounded 7 :squared 7} - :hole-radius {:rounded 8 :squared 8} - :margin-left -2 - :hole-size 16 - :hole-x 11 - :hole-y -1}}) + {:size-32 {:size 32 + :user-avatar-size :small + :border-radius {:rounded 16 :squared 10} + :hole-radius {:rounded 18 :squared 12} + :margin-left -8 + :hole-size 36 + :hole-x 22 + :hole-y -2} + :size-24 {:size 24 + :user-avatar-size :xs + :border-radius {:rounded 12 :squared 8} + :hole-radius {:rounded 13 :squared 9} + :margin-left -4 + :hole-size 26 + :hole-x 19 + :hole-y -1} + :size-20 {:size 20 + :user-avatar-size :xxs + :border-radius {:rounded 10 :squared 8} + :hole-radius {:rounded 11 :squared 9} + :margin-left -4 + :hole-size 22 + :hole-x 15 + :hole-y -1} + :size-16 {:size 16 + :user-avatar-size :xxxs + :border-radius {:rounded 8 :squared 8} + :hole-radius {:rounded 9 :squared 9} + :margin-left -4 + :hole-size 18 + :hole-x 11 + :hole-y -1} + :size-14 {:size 14 + :user-avatar-size :xxxs + :border-radius {:rounded 7 :squared 7} + :hole-radius {:rounded 8 :squared 8} + :margin-left -2 + :hole-size 16 + :hole-x 11 + :hole-y -1}}) diff --git a/src/quo2/components/list_items/preview_list/view.cljs b/src/quo2/components/list_items/preview_list/view.cljs index 3ec739ebef..768df73e7b 100644 --- a/src/quo2/components/list_items/preview_list/view.cljs +++ b/src/quo2/components/list_items/preview_list/view.cljs @@ -118,13 +118,13 @@ "[preview-list opts items] opts {:type :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network - :size :size/s-32 | :size/s-24 | :size/s-20 | :size/s-16 | :size/s-14 + :size :size-32 | :size-24 | :size-20 | :size-16 | :size-14 :number number of items in the list (optional) :blur? overflow-label blur?} items preview list items (only 4 items is required for preview) " [{:keys [type size number blur? theme more-than-99-label]} items] - (let [size-key (if (contains? properties/sizes size) size :size/s-24) + (let [size-key (if (contains? properties/sizes size) size :size-24) number (or number (count items)) margin-left (get-in properties/sizes [size-key :margin-left]) border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])] diff --git a/src/quo2/components/messages/system_message.cljs b/src/quo2/components/messages/system_message.cljs index b965e15d24..71c6e4419b 100644 --- a/src/quo2/components/messages/system_message.cljs +++ b/src/quo2/components/messages/system_message.cljs @@ -21,7 +21,7 @@ [rn/view {:margin-right 8} [icon-avatar/icon-avatar - {:size :size/s-32 + {:size :size-32 :icon icon :color color :opacity opacity}]]) diff --git a/src/quo2/components/settings/data_item/view.cljs b/src/quo2/components/settings/data_item/view.cljs index 5a9c80e05d..18cdaf2252 100644 --- a/src/quo2/components/settings/data_item/view.cljs +++ b/src/quo2/components/settings/data_item/view.cljs @@ -88,7 +88,7 @@ :preview [preview-list/view {:type :communities :number 3 - :size :size/s-24} + :size :size-24} communities-list] :graph [text/text "graph"] :none nil diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs index 645f821efa..16ecf428b2 100644 --- a/src/quo2/components/tags/context_tag/view.cljs +++ b/src/quo2/components/tags/context_tag/view.cljs @@ -114,7 +114,7 @@ [tag-skeleton {:theme theme :size size :text group-name} [group-avatar/view {:icon-name :i/members - :size (if (= size 24) :size/s-20 :size/s-28) + :size (if (= size 24) :size-20 :size-28) :customization-color (colors/custom-color customization-color 50)}]] (:channel :community) diff --git a/src/quo2/components/tags/network_tags/component_spec.cljs b/src/quo2/components/tags/network_tags/component_spec.cljs index e249ded342..51a3b05d04 100644 --- a/src/quo2/components/tags/network_tags/component_spec.cljs +++ b/src/quo2/components/tags/network_tags/component_spec.cljs @@ -15,5 +15,5 @@ :networks [{:source "network-icon1.png"} {:source "network-icon2.png"} {:source "network-icon3.png"}] - :size :size/s-32}]) + :size :size-32}]) (h/is-truthy (h/get-by-text "Multiple Networks")))) diff --git a/src/quo2/components/tags/network_tags/view.cljs b/src/quo2/components/tags/network_tags/view.cljs index 64620d61aa..6e0df20324 100644 --- a/src/quo2/components/tags/network_tags/view.cljs +++ b/src/quo2/components/tags/network_tags/view.cljs @@ -14,7 +14,7 @@ [preview-list/view {:type :network :number (count networks) - :size :size/s-16} networks] + :size :size-16} networks] [text/text {:weight :medium :size :paragraph-2 diff --git a/src/quo2/components/tags/number_tag/component_spec.cljs b/src/quo2/components/tags/number_tag/component_spec.cljs index 44de6e69ea..7543d52678 100644 --- a/src/quo2/components/tags/number_tag/component_spec.cljs +++ b/src/quo2/components/tags/number_tag/component_spec.cljs @@ -8,13 +8,13 @@ (h/render [number-tag/view {:type :rounded :number "3" - :size :size/s-32 + :size :size-32 :blur? false}]) (h/is-truthy (h/get-by-text "+3"))) (h/test "+48 render" (h/render [number-tag/view {:type :squared :number "48" - :size :size/s-24 + :size :size-24 :blur? true}]) (h/is-truthy (h/get-by-text "+48")))) diff --git a/src/quo2/components/tags/number_tag/style.cljs b/src/quo2/components/tags/number_tag/style.cljs index b8ea4303bd..9a653fd8b6 100644 --- a/src/quo2/components/tags/number_tag/style.cljs +++ b/src/quo2/components/tags/number_tag/style.cljs @@ -2,26 +2,26 @@ (:require [quo2.foundations.colors :as colors])) (def sizes - {:size/s-32 {:size 32 - :width-extra 40 - :border-radius {:rounded 16 :squared 10} - :icon-size 20} - :size/s-24 {:size 24 - :width-extra 32 - :border-radius {:rounded 12 :squared 8} - :icon-size 16} - :size/s-20 {:size 20 - :width-extra 24 - :border-radius {:rounded 10 :squared 8} - :icon-size 12} - :size/s-16 {:size 16 - :width-extra 20 - :border-radius {:rounded 8 :squared 8} - :icon-size 12} - :size/s-14 {:size 14 - :width-extra 16 - :border-radius {:rounded 7 :squared 7} - :icon-size 12}}) + {:size-32 {:size 32 + :width-extra 40 + :border-radius {:rounded 16 :squared 10} + :icon-size 20} + :size-24 {:size 24 + :width-extra 32 + :border-radius {:rounded 12 :squared 8} + :icon-size 16} + :size-20 {:size 20 + :width-extra 24 + :border-radius {:rounded 10 :squared 8} + :icon-size 12} + :size-16 {:size 16 + :width-extra 20 + :border-radius {:rounded 8 :squared 8} + :icon-size 12} + :size-14 {:size 14 + :width-extra 16 + :border-radius {:rounded 7 :squared 7} + :icon-size 12}}) (defn get-color [blur? theme] diff --git a/src/quo2/components/tags/number_tag/view.cljs b/src/quo2/components/tags/number_tag/view.cljs index a3b06f0192..61ef93dec8 100644 --- a/src/quo2/components/tags/number_tag/view.cljs +++ b/src/quo2/components/tags/number_tag/view.cljs @@ -12,7 +12,7 @@ [rn/view (style/container props) (if (and (> size-value 20) (< (count number) 3)) [text/text - {:size (if (= size :size/s-32) + {:size (if (= size :size-32) :paragraph-2 :label) :weight :medium diff --git a/src/quo2/components/wallet/keypair/view.cljs b/src/quo2/components/wallet/keypair/view.cljs index 0d8795ca36..dcc27af942 100644 --- a/src/quo2/components/wallet/keypair/view.cljs +++ b/src/quo2/components/wallet/keypair/view.cljs @@ -25,18 +25,19 @@ (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard)))) (defn avatar - [{:keys [type details customization-color]}] - (let [{:keys [full-name]} details] - (if (= type :default-keypair) - [user-avatar/user-avatar - {:full-name full-name - :ring? true - :size :small - :customization-color customization-color}] - [icon-avatar/icon-avatar - {:size :size-32 - :icon :i/placeholder - :border? true}]))) + [{{:keys [full-name]} :details + avatar-type :type + customization-color :customization-color}] + (if (= avatar-type :default-keypair) + [user-avatar/user-avatar + {:full-name full-name + :ring? true + :size :small + :customization-color customization-color}] + [icon-avatar/icon-avatar + {:size :size-32 + :icon :i/placeholder + :border? true}])) (defn title-view [{:keys [details action selected? type blur? customization-color on-options-press theme]}] diff --git a/src/status_im2/common/confirmation_drawer/view.cljs b/src/status_im2/common/confirmation_drawer/view.cljs index cfbba52dc1..1e5f3758fb 100644 --- a/src/status_im2/common/confirmation_drawer/view.cljs +++ b/src/status_im2/common/confirmation_drawer/view.cljs @@ -11,7 +11,7 @@ (if group-chat [quo/group-avatar {:customization-color color - :size :size/s-20}] + :size :size-20}] [quo/user-avatar {:full-name display-name :profile-picture photo-path diff --git a/src/status_im2/contexts/chat/group_details/view.cljs b/src/status_im2/contexts/chat/group_details/view.cljs index 1f4b711741..0105a66b35 100644 --- a/src/status_im2/contexts/chat/group_details/view.cljs +++ b/src/status_im2/contexts/chat/group_details/view.cljs @@ -169,7 +169,7 @@ :padding-horizontal 20}} [quo/group-avatar {:customization-color color - :size :size/s-32}] + :size :size-32}] [quo/text {:weight :semi-bold :size :heading-1 diff --git a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs index 3636da13c5..ddefe234bb 100644 --- a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs +++ b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs @@ -181,7 +181,7 @@ (assoc :ring? false))]) [quo/group-avatar {:customization-color color - :size :size/s-32}])) + :size :size-32}])) (defn notification [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}] diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 7286fa1026..0b50ccca4f 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -24,7 +24,7 @@ [quo/preview-list {:type :user :number (count user-list) - :size :size/s-24} + :size :size-24} user-list] [quo/text {:accessibility-label :communities-screen-title diff --git a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs index 335721201d..9f1a0b0c05 100644 --- a/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs @@ -7,15 +7,15 @@ (def descriptor [{:key :size :type :select - :options [{:key :size/s-20 + :options [{:key :size-20 :value "20"} - {:key :size/s-28 + {:key :size-28 :value "28"} - {:key :size/s-32 + {:key :size-32 :value "32"} - {:key :size/s-48 + {:key :size-48 :value "48"} - {:key :size/s-80 + {:key :size-80 :value "80"}]} {:label "Avatar:" :key :picture? @@ -27,7 +27,7 @@ (defn view [] (let [state (reagent/atom {:customization-color :blue - :size :size/s-20 + :size :size-20 :picture? false})] (fn [] [preview/preview-container {:state state :descriptor descriptor} diff --git a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs index e2caa1b90e..a39438b08a 100644 --- a/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs @@ -6,10 +6,10 @@ (def descriptor [{:key :size :type :select - :options [{:key :size/s-20} - {:key :size/s-24} - {:key :size/s-32} - {:key :size/s-48}]} + :options [{:key :size-20} + {:key :size-24} + {:key :size-32} + {:key :size-48}]} {:key :icon :type :select :options [{:key :i/placeholder20 @@ -20,7 +20,7 @@ (defn view [] - (let [state (reagent/atom {:size :size/s-48 + (let [state (reagent/atom {:size :size-48 :icon :i/placeholder20 :color :primary})] (fn [] diff --git a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs index 529da6f661..20c2de7779 100644 --- a/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs +++ b/src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs @@ -24,15 +24,15 @@ :value "Network"}]} {:key :size :type :select - :options [{:key :size/s-32 + :options [{:key :size-32 :value "32"} - {:key :size/s-24 + {:key :size-24 :value "24"} - {:key :size/s-20 + {:key :size-20 :value "20"} - {:key :size/s-16 + {:key :size-16 :value "16"} - {:key :size/s-14 + {:key :size-14 :value "14"}]} {:key :number :type :text} @@ -105,7 +105,7 @@ (defn view [] (let [state (reagent/atom {:type :accounts - :size :size/s-32 + :size :size-32 :number 4 :more-than-99-label "99+"}) type (reagent/cursor state [:type]) diff --git a/src/status_im2/contexts/quo_preview/tags/number_tag.cljs b/src/status_im2/contexts/quo_preview/tags/number_tag.cljs index 2634c8006a..9a881e0128 100644 --- a/src/status_im2/contexts/quo_preview/tags/number_tag.cljs +++ b/src/status_im2/contexts/quo_preview/tags/number_tag.cljs @@ -13,15 +13,15 @@ :type :text} {:key :size :type :select - :options [{:key :size/s-32 + :options [{:key :size-32 :value "32"} - {:key :size/s-24 + {:key :size-24 :value "24"} - {:key :size/s-20 + {:key :size-20 :value "20"} - {:key :size/s-16 + {:key :size-16 :value "16"} - {:key :size/s-14 + {:key :size-14 :value "14"}]} {:key :blur? :type :boolean}]) @@ -30,7 +30,7 @@ [] (let [state (reagent/atom {:type :squared :number "148" - :size :size/s-32 + :size :size-32 :blur? false})] (fn [] [preview/preview-container {:state state :descriptor descriptor} diff --git a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs index d67b36d4fb..0eb3971b79 100644 --- a/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs +++ b/src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs @@ -68,7 +68,7 @@ [quo/preview-list {:type :collectibles :more-than-99-label (i18n/label :counter-99-plus) - :size :size/s-24} + :size :size-24} data] constants/content-type-sticker @@ -125,7 +125,7 @@ shell.constants/private-group-chat-card [quo/group-avatar {:customization-color customization-color - :size :size/s-48 + :size :size-48 :override-theme :dark}] (shell.constants/community-card