UNPKG

@shopify/polaris

Version:

Shopify’s product component library

github.com/Shopify/polaris

Shopify/polaris

117 lines (78 loc) • 2.29 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
--- name: List category: Lists and tables keywords: - bulleted lists - numbered lists - icon lists - list items - text lists - text-only lists --- # List Lists display a series of related content. Each list item begins with a bullet, a number, or less commonly, with an icon. --- ## 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 of actionable choices that the merchants needs to choose between --- ## 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 --> ### Icon list text When a line of text is placed next to an icon, it should: - Follow all the rules for list items - Elaborate on the meaning conveyed by the icon --- ## 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> ``` ### 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> ``` --- ## 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)