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
- 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]))
(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}}]

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

@ -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)]

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

@ -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))

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

@ -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}})

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

@ -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)])]

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

@ -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}]])

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

@ -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

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

@ -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)

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

@ -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"))))

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

@ -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

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

@ -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"))))

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

@ -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]

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

@ -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

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))))
(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]}]

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

@ -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

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

@ -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

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

@ -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]}]

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

@ -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

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

@ -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}

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

@ -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 []

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

@ -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])

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

@ -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}

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

@ -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