status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 <ulises.ssb@hotmail.com>
This commit is contained in:
Jamie Caprani 2023-09-25 13:22:07 +02:00 committed by GitHub
parent 723573833e
commit f47a4a18e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 162 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/quo2/README.md
View File

@ -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-<number>`, 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 ## Clojure var conventions
- Due to the fact that every `view` namespace should export only one component - Due to the fact that every `view` namespace should export only one component

22
src/quo2/components/avatars/group_avatar/view.cljs
View File

@ -7,21 +7,21 @@
[quo2.components.avatars.group-avatar.style :as style])) [quo2.components.avatars.group-avatar.style :as style]))
(def sizes (def sizes
{:size/s-20 {:icon 12 {:size-20 {:icon 12
:container 20} :container 20}
:size/s-28 {:icon 16 :size-28 {:icon 16
:container 28} :container 28}
:size/s-32 {:icon 16 :size-32 {:icon 16
:container 32} :container 32}
:size/s-48 {:icon 20 :size-48 {:icon 20
:container 48} :container 48}
:size/s-80 {:icon 32 :size-80 {:icon 32
:container 80}}) :container 80}})
(defn- view-internal (defn- view-internal
[_] [_]
(fn [{:keys [size theme customization-color picture icon-name] (fn [{:keys [size theme customization-color picture icon-name]
:or {size :size/s-20 :or {size :size-20
customization-color :blue customization-color :blue
picture nil picture nil
icon-name :i/group}}] icon-name :i/group}}]

18
src/quo2/components/avatars/icon_avatar.cljs
View File

@ -5,19 +5,19 @@
[react-native.core :as rn])) [react-native.core :as rn]))
(def ^:private sizes (def ^:private sizes
{:size/s-48 {:component 48 {:size-48 {:component 48
:icon 20} :icon 20}
:size/s-32 {:component 32 :size-32 {:component 32
:icon 20} :icon 20}
:size/s-24 {:component 24 :size-24 {:component 24
:icon 16} :icon 16}
:size/s-20 {:component 20 :size-20 {:component 20
:icon 12}}) :icon 12}})
(defn icon-avatar-internal (defn icon-avatar-internal
[{:keys [size icon color opacity border? theme] [{:keys [size icon color opacity border? theme]
:or {opacity 20 :or {opacity 20
size :size/s-32}}] size :size-32}}]
(let [{component-size :component icon-size :icon} (get sizes size) (let [{component-size :component icon-size :icon} (get sizes size)
circle-color (colors/custom-color color 50 opacity) circle-color (colors/custom-color color 50 opacity)
icon-color (colors/custom-color-by-theme color 50 60)] icon-color (colors/custom-color-by-theme color 50 60)]

2
src/quo2/components/dropdowns/network_dropdown/view.cljs
View File

@ -20,7 +20,7 @@
[preview-list/view [preview-list/view
{:type :network {:type :network
:list-size (count networks) :list-size (count networks)
:size :size/s-20} :size :size-20}
networks]]))) networks]])))
(def view (quo.theme/with-theme internal-view)) (def view (quo.theme/with-theme internal-view))

80
src/quo2/components/list_items/preview_list/properties.cljs
View File

@ -7,43 +7,43 @@
(if (types-for-squared-border type) :squared :rounded)) (if (types-for-squared-border type) :squared :rounded))
(def sizes (def sizes
{:size/s-32 {:size 32 {:size-32 {:size 32
:user-avatar-size :small :user-avatar-size :small
:border-radius {:rounded 16 :squared 10} :border-radius {:rounded 16 :squared 10}
:hole-radius {:rounded 18 :squared 12} :hole-radius {:rounded 18 :squared 12}
:margin-left -8 :margin-left -8
:hole-size 36 :hole-size 36
:hole-x 22 :hole-x 22
:hole-y -2} :hole-y -2}
:size/s-24 {:size 24 :size-24 {:size 24
:user-avatar-size :xs :user-avatar-size :xs
:border-radius {:rounded 12 :squared 8} :border-radius {:rounded 12 :squared 8}
:hole-radius {:rounded 13 :squared 9} :hole-radius {:rounded 13 :squared 9}
:margin-left -4 :margin-left -4
:hole-size 26 :hole-size 26
:hole-x 19 :hole-x 19
:hole-y -1} :hole-y -1}
:size/s-20 {:size 20 :size-20 {:size 20
:user-avatar-size :xxs :user-avatar-size :xxs
:border-radius {:rounded 10 :squared 8} :border-radius {:rounded 10 :squared 8}
:hole-radius {:rounded 11 :squared 9} :hole-radius {:rounded 11 :squared 9}
:margin-left -4 :margin-left -4
:hole-size 22 :hole-size 22
:hole-x 15 :hole-x 15
:hole-y -1} :hole-y -1}
:size/s-16 {:size 16 :size-16 {:size 16
:user-avatar-size :xxxs :user-avatar-size :xxxs
:border-radius {:rounded 8 :squared 8} :border-radius {:rounded 8 :squared 8}
:hole-radius {:rounded 9 :squared 9} :hole-radius {:rounded 9 :squared 9}
:margin-left -4 :margin-left -4
:hole-size 18 :hole-size 18
:hole-x 11 :hole-x 11
:hole-y -1} :hole-y -1}
:size/s-14 {:size 14 :size-14 {:size 14
:user-avatar-size :xxxs :user-avatar-size :xxxs
:border-radius {:rounded 7 :squared 7} :border-radius {:rounded 7 :squared 7}
:hole-radius {:rounded 8 :squared 8} :hole-radius {:rounded 8 :squared 8}
:margin-left -2 :margin-left -2
:hole-size 16 :hole-size 16
:hole-x 11 :hole-x 11
:hole-y -1}}) :hole-y -1}})

4
src/quo2/components/list_items/preview_list/view.cljs
View File

@ -118,13 +118,13 @@
"[preview-list opts items] "[preview-list opts items]
opts opts
{:type :user/:communities/:accounts/:tokens/:collectibles/:dapps/:network {: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) :number number of items in the list (optional)
:blur? overflow-label blur?} :blur? overflow-label blur?}
items preview list items (only 4 items is required for preview) items preview list items (only 4 items is required for preview)
" "
[{:keys [type size number blur? theme more-than-99-label]} items] [{: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)) number (or number (count items))
margin-left (get-in properties/sizes [size-key :margin-left]) margin-left (get-in properties/sizes [size-key :margin-left])
border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])] border-radius (get-in properties/sizes [size-key :border-radius (properties/border-type type)])]

2
src/quo2/components/messages/system_message.cljs
View File

@ -21,7 +21,7 @@
[rn/view [rn/view
{:margin-right 8} {:margin-right 8}
[icon-avatar/icon-avatar [icon-avatar/icon-avatar
{:size :size/s-32 {:size :size-32
:icon icon :icon icon
:color color :color color
:opacity opacity}]]) :opacity opacity}]])

2
src/quo2/components/settings/data_item/view.cljs
View File

@ -88,7 +88,7 @@
:preview [preview-list/view :preview [preview-list/view
{:type :communities {:type :communities
:number 3 :number 3
:size :size/s-24} :size :size-24}
communities-list] communities-list]
:graph [text/text "graph"] :graph [text/text "graph"]
:none nil :none nil

2
src/quo2/components/tags/context_tag/view.cljs
View File

@ -114,7 +114,7 @@
[tag-skeleton {:theme theme :size size :text group-name} [tag-skeleton {:theme theme :size size :text group-name}
[group-avatar/view [group-avatar/view
{:icon-name :i/members {: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)}]] :customization-color (colors/custom-color customization-color 50)}]]
(:channel :community) (:channel :community)

2
src/quo2/components/tags/network_tags/component_spec.cljs
View File

@ -15,5 +15,5 @@
:networks [{:source "network-icon1.png"} :networks [{:source "network-icon1.png"}
{:source "network-icon2.png"} {:source "network-icon2.png"}
{:source "network-icon3.png"}] {:source "network-icon3.png"}]
:size :size/s-32}]) :size :size-32}])
(h/is-truthy (h/get-by-text "Multiple Networks")))) (h/is-truthy (h/get-by-text "Multiple Networks"))))

2
src/quo2/components/tags/network_tags/view.cljs
View File

@ -14,7 +14,7 @@
[preview-list/view [preview-list/view
{:type :network {:type :network
:number (count networks) :number (count networks)
:size :size/s-16} networks] :size :size-16} networks]
[text/text [text/text
{:weight :medium {:weight :medium
:size :paragraph-2 :size :paragraph-2

4
src/quo2/components/tags/number_tag/component_spec.cljs
View File

@ -8,13 +8,13 @@
(h/render [number-tag/view (h/render [number-tag/view
{:type :rounded {:type :rounded
:number "3" :number "3"
:size :size/s-32 :size :size-32
:blur? false}]) :blur? false}])
(h/is-truthy (h/get-by-text "+3"))) (h/is-truthy (h/get-by-text "+3")))
(h/test "+48 render" (h/test "+48 render"
(h/render [number-tag/view (h/render [number-tag/view
{:type :squared {:type :squared
:number "48" :number "48"
:size :size/s-24 :size :size-24
:blur? true}]) :blur? true}])
(h/is-truthy (h/get-by-text "+48")))) (h/is-truthy (h/get-by-text "+48"))))

40
src/quo2/components/tags/number_tag/style.cljs
View File

@ -2,26 +2,26 @@
(:require [quo2.foundations.colors :as colors])) (:require [quo2.foundations.colors :as colors]))
(def sizes (def sizes
{:size/s-32 {:size 32 {:size-32 {:size 32
:width-extra 40 :width-extra 40
:border-radius {:rounded 16 :squared 10} :border-radius {:rounded 16 :squared 10}
:icon-size 20} :icon-size 20}
:size/s-24 {:size 24 :size-24 {:size 24
:width-extra 32 :width-extra 32
:border-radius {:rounded 12 :squared 8} :border-radius {:rounded 12 :squared 8}
:icon-size 16} :icon-size 16}
:size/s-20 {:size 20 :size-20 {:size 20
:width-extra 24 :width-extra 24
:border-radius {:rounded 10 :squared 8} :border-radius {:rounded 10 :squared 8}
:icon-size 12} :icon-size 12}
:size/s-16 {:size 16 :size-16 {:size 16
:width-extra 20 :width-extra 20
:border-radius {:rounded 8 :squared 8} :border-radius {:rounded 8 :squared 8}
:icon-size 12} :icon-size 12}
:size/s-14 {:size 14 :size-14 {:size 14
:width-extra 16 :width-extra 16
:border-radius {:rounded 7 :squared 7} :border-radius {:rounded 7 :squared 7}
:icon-size 12}}) :icon-size 12}})
(defn get-color (defn get-color
[blur? theme] [blur? theme]

2
src/quo2/components/tags/number_tag/view.cljs
View File

@ -12,7 +12,7 @@
[rn/view (style/container props) [rn/view (style/container props)
(if (and (> size-value 20) (< (count number) 3)) (if (and (> size-value 20) (< (count number) 3))
[text/text [text/text
{:size (if (= size :size/s-32) {:size (if (= size :size-32)
:paragraph-2 :paragraph-2
:label) :label)
:weight :medium :weight :medium

25
src/quo2/components/wallet/keypair/view.cljs
View File

@ -25,18 +25,19 @@
(if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard)))) (if (= stored :on-device) (i18n/label :t/on-device) (i18n/label :t/on-keycard))))
(defn avatar (defn avatar
[{:keys [type details customization-color]}] [{{:keys [full-name]} :details
(let [{:keys [full-name]} details] avatar-type :type
(if (= type :default-keypair) customization-color :customization-color}]
[user-avatar/user-avatar (if (= avatar-type :default-keypair)
{:full-name full-name [user-avatar/user-avatar
:ring? true {:full-name full-name
:size :small :ring? true
:customization-color customization-color}] :size :small
[icon-avatar/icon-avatar :customization-color customization-color}]
{:size :size-32 [icon-avatar/icon-avatar
:icon :i/placeholder {:size :size-32
:border? true}]))) :icon :i/placeholder
:border? true}]))
(defn title-view (defn title-view
[{:keys [details action selected? type blur? customization-color on-options-press theme]}] [{:keys [details action selected? type blur? customization-color on-options-press theme]}]

2
src/status_im2/common/confirmation_drawer/view.cljs
View File

@ -11,7 +11,7 @@
(if group-chat (if group-chat
[quo/group-avatar [quo/group-avatar
{:customization-color color {:customization-color color
:size :size/s-20}] :size :size-20}]
[quo/user-avatar [quo/user-avatar
{:full-name display-name {:full-name display-name
:profile-picture photo-path :profile-picture photo-path

2
src/status_im2/contexts/chat/group_details/view.cljs
View File

@ -169,7 +169,7 @@
:padding-horizontal 20}} :padding-horizontal 20}}
[quo/group-avatar [quo/group-avatar
{:customization-color color {:customization-color color
:size :size/s-32}] :size :size-32}]
[quo/text [quo/text
{:weight :semi-bold {:weight :semi-bold
:size :heading-1 :size :heading-1

2
src/status_im2/contexts/chat/home/chat_list_item/view.cljs
View File

@ -181,7 +181,7 @@
(assoc :ring? false))]) (assoc :ring? false))])
[quo/group-avatar [quo/group-avatar
{:customization-color color {:customization-color color
:size :size/s-32}])) :size :size-32}]))
(defn notification (defn notification
[{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}] [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}]

2
src/status_im2/contexts/communities/overview/view.cljs
View File

@ -24,7 +24,7 @@
[quo/preview-list [quo/preview-list
{:type :user {:type :user
:number (count user-list) :number (count user-list)
:size :size/s-24} :size :size-24}
user-list] user-list]
[quo/text [quo/text
{:accessibility-label :communities-screen-title {:accessibility-label :communities-screen-title

12
src/status_im2/contexts/quo_preview/avatars/group_avatar.cljs
View File

@ -7,15 +7,15 @@
(def descriptor (def descriptor
[{:key :size [{:key :size
:type :select :type :select
:options [{:key :size/s-20 :options [{:key :size-20
:value "20"} :value "20"}
{:key :size/s-28 {:key :size-28
:value "28"} :value "28"}
{:key :size/s-32 {:key :size-32
:value "32"} :value "32"}
{:key :size/s-48 {:key :size-48
:value "48"} :value "48"}
{:key :size/s-80 {:key :size-80
:value "80"}]} :value "80"}]}
{:label "Avatar:" {:label "Avatar:"
:key :picture? :key :picture?
@ -27,7 +27,7 @@
(defn view (defn view
[] []
(let [state (reagent/atom {:customization-color :blue (let [state (reagent/atom {:customization-color :blue
:size :size/s-20 :size :size-20
:picture? false})] :picture? false})]
(fn [] (fn []
[preview/preview-container {:state state :descriptor descriptor} [preview/preview-container {:state state :descriptor descriptor}

10
src/status_im2/contexts/quo_preview/avatars/icon_avatar.cljs
View File

@ -6,10 +6,10 @@
(def descriptor (def descriptor
[{:key :size [{:key :size
:type :select :type :select
:options [{:key :size/s-20} :options [{:key :size-20}
{:key :size/s-24} {:key :size-24}
{:key :size/s-32} {:key :size-32}
{:key :size/s-48}]} {:key :size-48}]}
{:key :icon {:key :icon
:type :select :type :select
:options [{:key :i/placeholder20 :options [{:key :i/placeholder20
@ -20,7 +20,7 @@
(defn view (defn view
[] []
(let [state (reagent/atom {:size :size/s-48 (let [state (reagent/atom {:size :size-48
:icon :i/placeholder20 :icon :i/placeholder20
:color :primary})] :color :primary})]
(fn [] (fn []

12
src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
View File

@ -24,15 +24,15 @@
:value "Network"}]} :value "Network"}]}
{:key :size {:key :size
:type :select :type :select
:options [{:key :size/s-32 :options [{:key :size-32
:value "32"} :value "32"}
{:key :size/s-24 {:key :size-24
:value "24"} :value "24"}
{:key :size/s-20 {:key :size-20
:value "20"} :value "20"}
{:key :size/s-16 {:key :size-16
:value "16"} :value "16"}
{:key :size/s-14 {:key :size-14
:value "14"}]} :value "14"}]}
{:key :number {:key :number
:type :text} :type :text}
@ -105,7 +105,7 @@
(defn view (defn view
[] []
(let [state (reagent/atom {:type :accounts (let [state (reagent/atom {:type :accounts
:size :size/s-32 :size :size-32
:number 4 :number 4
:more-than-99-label "99+"}) :more-than-99-label "99+"})
type (reagent/cursor state [:type]) type (reagent/cursor state [:type])

12
src/status_im2/contexts/quo_preview/tags/number_tag.cljs
View File

@ -13,15 +13,15 @@
:type :text} :type :text}
{:key :size {:key :size
:type :select :type :select
:options [{:key :size/s-32 :options [{:key :size-32
:value "32"} :value "32"}
{:key :size/s-24 {:key :size-24
:value "24"} :value "24"}
{:key :size/s-20 {:key :size-20
:value "20"} :value "20"}
{:key :size/s-16 {:key :size-16
:value "16"} :value "16"}
{:key :size/s-14 {:key :size-14
:value "14"}]} :value "14"}]}
{:key :blur? {:key :blur?
:type :boolean}]) :type :boolean}])
@ -30,7 +30,7 @@
[] []
(let [state (reagent/atom {:type :squared (let [state (reagent/atom {:type :squared
:number "148" :number "148"
:size :size/s-32 :size :size-32
:blur? false})] :blur? false})]
(fn [] (fn []
[preview/preview-container {:state state :descriptor descriptor} [preview/preview-container {:state state :descriptor descriptor}

4
src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs
View File

@ -68,7 +68,7 @@
[quo/preview-list [quo/preview-list
{:type :collectibles {:type :collectibles
:more-than-99-label (i18n/label :counter-99-plus) :more-than-99-label (i18n/label :counter-99-plus)
:size :size/s-24} :size :size-24}
data] data]
constants/content-type-sticker constants/content-type-sticker
@ -125,7 +125,7 @@
shell.constants/private-group-chat-card shell.constants/private-group-chat-card
[quo/group-avatar [quo/group-avatar
{:customization-color customization-color {:customization-color customization-color
:size :size/s-48 :size :size-48
:override-theme :dark}] :override-theme :dark}]
(shell.constants/community-card (shell.constants/community-card