UNPKG

@combine-labs/combine-polaris

Version:

Combine Lab's product component library. Forked from Shopify's Polaris.

github.com/Combine-Labs/combine-polaris

Combine-Labs/combine-polaris

139 lines (91 loc) • 2.6 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
--- name: List category: Lists and tables platforms: - android - ios - web keywords: - bulleted lists - numbered lists - icon lists - list items - text lists - text-only lists - ios - android --- # List Lists display a set of related text-only content. Each list item begins with a bullet or a number. --- ## Best practices Lists should: - Break up chunks of related content to make the information easier for merchants to scan - Be phrased consistently (e.g. try to start each item with a noun or a verb and be consistent with each item) - Not be used for lists where the entire item represents an action --- ## Content guidelines ### List items Every item in a list should: - Start with a capital letter - Not use commas or semicolons at the end of each line <!-- usagelist --> #### Do - Red - Yellow - Blue #### Don’t - Red; - Yellow; - Blue. <!-- end --> - Be written in sentence case <!-- usagelist --> #### Do - Item one - Item two - Item three #### Don’t - Item One - Item Two - Item Three <!-- end --> --- ## Examples ### Bulleted list Use for a text-only list of related items that don’t need to be in a specific order and don’t require an icon or other indicator. ```jsx <List type="bullet"> <List.Item>Yellow shirt</List.Item> <List.Item>Red shirt</List.Item> <List.Item>Green shirt</List.Item> </List> ``` <!-- content-for: android --> ![Bulleted list on Android](components/List/android/bullets.png) <!-- /content-for --> <!-- content-for: ios --> ![Bulleted list on iOS](components/List/ios/bullets.png) <!-- /content-for --> ### Numbered list Use for a text-only list of related items when an inherent order, priority, or sequence needs to be communicated. ```jsx <List type="number"> <List.Item>First item</List.Item> <List.Item>Second item</List.Item> <List.Item>Third Item</List.Item> </List> ``` <!-- content-for: android --> ![Numbered list on Android](components/List/android/numbered.png) <!-- /content-for --> <!-- content-for: ios --> ![Numbered list on iOS](components/List/ios/numbered.png) <!-- /content-for --> --- ## Related components - To create a list of checkboxes or radio buttons, [use the choice list component](/components/forms/choice-list) - To present a collection of objects of the same type such as customers, products, or orders, [use the resource list component](/components/lists-and-tables/resource-list) - When text labels for each item are useful for describing the content, [use the Description List component](/components/lists-and-tables/description-list)