Skip to content

Commit ef5858f

Browse files
Netnixneolitec
Netnix
authored and
neolitec
committed
Fix/cx (#99)
* Add x-small and dark background. * No need for loaders on dark background. * Removing default message and borderless messages * Added confirmation and success modals * Add text to no icon modal * remove warning state * Cx-status : complete * CX-status complete * CX- Remove input warning * CX-status - complete * CX-status complete * CX-add guideline * Cx-status complete * CX-add content and groups * Update README.md * CX-status complete * CX-status : complete * Update README.md * CX-correct the description * update small width * Add guidelines * add labels/fields examples in no icon modal * add guidelines * CX-Status : complete * CX-status update : complete * Add examples * Update README.md * Add guidelines * Cx-status : complete * modifiy name of confirmation icon modal * cx update : merge formfield to field
1 parent 0718597 commit ef5858f

File tree

16 files changed

+305
-559
lines changed

16 files changed

+305
-559
lines changed

‎packages/oui-button-group/README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# oui-input-group
22

3-
<component-status cx-design="partial" ux="prototype"></component-status>
3+
<component-status cx-design="complete" ux="prototype"></component-status>
44

55
oui-button-group is a package which provide styles to group buttons together.
66

@@ -11,6 +11,10 @@ oui-button-group is a package which provide styles to group buttons together.
1111
```
1212

1313
## Usage
14+
Guidelines :
15+
* A button is selected by default.
16+
* The labels are short: 1 or 2 words.
17+
* On mobile, the button-group is on a line must remain on one line.
1418

1519
```html:preview
1620
<div>

‎packages/oui-button/README.md‎

Lines changed: 135 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# oui-button
22

3-
<component-status cx-design="partial" ux="rc"></component-status>
3+
<component-status cx-design="complete" ux="rc"></component-status>
44

55
oui-button is a package which provide styles for the button component.
66

@@ -12,156 +12,189 @@ oui-button is a package which provide styles for the button component.
1212

1313
## Usage
1414

15-
### Normal
15+
### Primary Action Button
16+
* This button represents the action that the user is waiting for. It must stand out visually, catching the eye and encourage the user to click. This button is equivalent to press on the “Enter” key on the keypad.
17+
* Normally, there’s only one primary action button per form.
18+
* The min-width is set to 195px and the max-width is set to 300px. If the translation is longer than that, find a another translation or the bouton will be transform in a link (without border).
1619

1720
```html:preview
1821
<div>
1922
<button class="oui-button oui-button_primary">
2023
Primary Button
2124
</button>
22-
<button class="oui-button oui-button_secondary">
23-
Secondary Button
24-
</button>
25-
<button class="oui-button oui-button_dropdown">
26-
Dropdown Button
27-
<i class="oui-icon oui-icon-chevron-down" aria-hidden="true"></i>
28-
</button>
2925
<button class="oui-button oui-button_primary oui-button_icon-right">
3026
Button Icon right
3127
<i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
3228
</button>
33-
<button class="oui-button oui-button_secondary oui-button_icon-left">
34-
<i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>
35-
Button Icon left
36-
</button>
37-
<button class="oui-button oui-button_link">
38-
Button link
39-
</button>
40-
<button class="oui-button oui-button_link oui-button_icon-left">
41-
<i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>Button link Icon left
42-
</button>
43-
<button class="oui-button oui-button_link oui-button_icon-right">
44-
Button link Icon right<i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
45-
</button>
29+
<div style="display: inline-block; width: 300px">
30+
<button class="oui-button oui-button_full-width oui-button_primary">
31+
Primary Button Full width
32+
</button>
33+
</div>
34+
<div style="display: inline-block; width: 300px">
35+
<button class="oui-button oui-button_full-width oui-button_icon-right oui-button_primary">
36+
Primary Full width Icon right
37+
<i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
38+
</button>
39+
</div>
4640
</div>
4741
```
4842

49-
### Disabled
43+
#### Disabled Primary Action Button
5044

5145
```html:preview
5246
<div>
5347
<button class="oui-button oui-button_primary" disabled>
5448
Primary Button
5549
</button>
56-
<button class="oui-button oui-button_secondary" disabled>
57-
Secondary Button
58-
</button>
59-
<button class="oui-button oui-button_dropdown" disabled>
60-
Dropdown Button
61-
<i class="oui-icon oui-icon-chevron-down" aria-hidden="true"></i>
62-
</button>
6350
<button class="oui-button oui-button_primary oui-button_icon-right" disabled>
6451
Button Icon right
6552
<i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
6653
</button>
67-
<button class="oui-button oui-button_secondary oui-button_icon-left" disabled>
68-
<i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>
69-
Button Icon left
70-
</button>
71-
<button class="oui-button oui-button_link" disabled>
72-
Button link
73-
</button>
74-
<button class="oui-button oui-button_link oui-button_icon-left" disabled>
75-
<i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>Button link Icon left
76-
</button>
77-
<button class="oui-button oui-button_link oui-button_icon-right" disabled>
78-
Button link Icon right<i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
79-
</button>
54+
<div style="display: inline-block; width: 300px">
55+
<button class="oui-button oui-button_full-width oui-button_primary" disabled>
56+
Primary Button Full width
57+
</button>
58+
</div>
59+
<div style="display: inline-block; width: 300px">
60+
<button class="oui-button oui-button_full-width oui-button_icon-right oui-button_primary" disabled>
61+
Primary Full width Icon right
62+
<i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
63+
</button>
64+
</div>
8065
</div>
8166
```
8267

83-
### Full width
68+
### Secondary Action Button
8469

70+
Multiple secondary action buttons can be found on a page.
71+
8572
```html:preview
8673
<div>
87-
<div style="display: inline-block; width: 300px">
88-
<button class="oui-button oui-button_full-width oui-button_link oui-button_icon-left">
89-
<i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>Button link Full width Icon left
90-
</button>
91-
</div>
92-
<div style="display: inline-block; width: 300px">
93-
<button class="oui-button oui-button_full-width oui-button_link oui-button_icon-right">
94-
Button link Full width Icon right<i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
95-
</button>
96-
</div>
97-
<div style="display: inline-block; width: 300px">
98-
<button class="oui-button oui-button_full-width oui-button_primary">
99-
Primary Button Full width
100-
</button>
101-
</div>
74+
<button class="oui-button oui-button_secondary">
75+
Secondary Button
76+
</button>
77+
<button class="oui-button oui-button_secondary oui-button_icon-left">
78+
<i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>
79+
Button Icon left
80+
</button>
10281
<div style="display: inline-block; width: 300px">
10382
<button class="oui-button oui-button_full-width oui-button_secondary">
10483
Secondary Button Full width
10584
</button>
10685
</div>
107-
<div style="display: inline-block; width: 300px">
108-
<button class="oui-button oui-button_full-width oui-button_icon-left oui-button_primary">
109-
<i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>Primary Full width Icon left
110-
</button>
111-
</div>
112-
<div style="display: inline-block; width: 300px">
113-
<button class="oui-button oui-button_full-width oui-button_icon-right oui-button_primary">
114-
Secondary Full width Icon right<i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
115-
</button>
116-
</div>
11786
<div style="display: inline-block; width: 300px">
11887
<button class="oui-button oui-button_full-width oui-button_icon-left oui-button_secondary">
119-
<i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>Secondary Full width Icon left
88+
<i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>
89+
Secondary Full width Icon left
12090
</button>
121-
</div>
122-
<div style="display: inline-block; width: 300px">
123-
<button class="oui-button oui-button_full-width oui-button_icon-right oui-button_secondary">
124-
Secondary Full width Icon right<i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
125-
</button>
126-
</div>
127-
<div style="display: inline-block; width: 300px">
128-
<button class="oui-button oui-button_link oui-button_full-width oui-button_icon-left" disabled>
129-
<i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>Button link Full width Icon left
130-
</button>
131-
</div>
132-
<div style="display: inline-block; width: 300px">
133-
<button class="oui-button oui-button_link oui-button_full-width oui-button_icon-right" disabled>
134-
Button link Full width Icon right<i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
135-
</button>
136-
</div>
137-
<div style="display: inline-block; width: 300px">
138-
<button class="oui-button oui-button_full-width oui-button_primary" disabled>
139-
Primary Button Full width
140-
</button>
141-
</div>
91+
</div>
92+
</div>
93+
```
94+
95+
#### Disabled Secondary Action Button
96+
97+
```html:preview
98+
<div>
99+
<button class="oui-button oui-button_secondary" disabled>
100+
Secondary Button
101+
</button>
102+
<button class="oui-button oui-button_secondary oui-button_icon-left" disabled>
103+
<i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>
104+
Button Icon left
105+
</button>
106+
142107
<div style="display: inline-block; width: 300px">
143108
<button class="oui-button oui-button_full-width oui-button_secondary" disabled>
144109
Secondary Button Full width
145110
</button>
146111
</div>
147112
<div style="display: inline-block; width: 300px">
148-
<button class="oui-button oui-button_full-width oui-button_icon-left oui-button_primary" disabled>
149-
<i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>Primary Full width Icon left
113+
<button class="oui-button oui-button_full-width oui-button_icon-left oui-button_secondary" disabled>
114+
<i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>
115+
Secondary Full width Icon left
150116
</button>
151117
</div>
118+
</div>
119+
```
120+
### Dropdown Button
121+
Actions grouped under a Dropdown button. On click, a panel slides down to display the actions list.
122+
* Chevron points down when the menu is open.
123+
124+
```html:preview
125+
<div>
126+
<button class="oui-button oui-button_dropdown">
127+
Dropdown Button
128+
<i class="oui-icon oui-icon-chevron-down" aria-hidden="true"></i>
129+
</button>
130+
</div>
131+
```
132+
#### Disabled Dropdown Button
133+
134+
```html:preview
135+
<div>
136+
<button class="oui-button oui-button_dropdown" disabled>
137+
Dropdown Button
138+
<i class="oui-icon oui-icon-chevron-down" aria-hidden="true"></i>
139+
</button>
140+
</div>
141+
```
142+
143+
### Link Button
144+
145+
```html:preview
146+
<div>
147+
<button class="oui-button oui-button_link">
148+
Button link
149+
</button>
150+
<button class="oui-button oui-button_link oui-button_icon-left">
151+
<i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>
152+
Button link Icon left
153+
</button>
154+
<button class="oui-button oui-button_link oui-button_icon-right">
155+
Button link Icon right
156+
<i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
157+
</button>
152158
<div style="display: inline-block; width: 300px">
153-
<button class="oui-button oui-button_full-width oui-button_icon-right oui-button_primary" disabled>
154-
Secondary Full width Icon right<i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
159+
<button class="oui-button oui-button_full-width oui-button_link oui-button_icon-left">
160+
<i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>
161+
Button link Full width Icon left
155162
</button>
156163
</div>
157-
<div style="display: inline-block; width: 300px">
158-
<button class="oui-button oui-button_full-width oui-button_icon-left oui-button_secondary" disabled>
159-
<i class="oui-icon oui-icon_circle oui-icon-chevron-left" aria-hidden="true"></i>Secondary Full width Icon left
164+
<div style="display: inline-block; width: 300px">
165+
<button class="oui-button oui-button_full-width oui-button_link oui-button_icon-right">
166+
Button link Full width Icon right
167+
<i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
168+
</button>
169+
</div>
170+
</div>
171+
```
172+
173+
#### Disabled Link Button
174+
175+
```html:preview
176+
<div>
177+
<button class="oui-button oui-button_link" disabled>
178+
Button link
179+
</button>
180+
<button class="oui-button oui-button_link oui-button_icon-left" disabled>
181+
<i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>
182+
Button link Icon left
183+
</button>
184+
<button class="oui-button oui-button_link oui-button_icon-right" disabled>
185+
Button link Icon right
186+
<i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
187+
</button>
188+
<div style="display: inline-block; width: 300px">
189+
<button class="oui-button oui-button_link oui-button_full-width oui-button_icon-left" disabled>
190+
<i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>
191+
Button link Full width Icon left
160192
</button>
161193
</div>
162194
<div style="display: inline-block; width: 300px">
163-
<button class="oui-button oui-button_full-width oui-button_icon-right oui-button_secondary" disabled>
164-
Secondary Full width Icon right<i class="oui-icon oui-icon_circle oui-icon-chevron-right" aria-hidden="true"></i>
195+
<button class="oui-button oui-button_link oui-button_full-width oui-button_icon-right" disabled>
196+
Button link Full width Icon right
197+
<i class="oui-icon oui-icon-chevron-right" aria-hidden="true"></i>
165198
</button>
166199
</div>
167200
</div>
@@ -172,10 +205,10 @@ oui-button is a package which provide styles for the button component.
172205
```html:preview
173206
<div>
174207
<button class="oui-button oui-button_primary oui-button_small-width">
175-
1
208+
OK
176209
</button>
177210
<button class="oui-button oui-button_secondary oui-button_small-width">
178-
1
211+
OK
179212
</button>
180213
<button class="oui-button oui-button_secondary oui-button_icon-only oui-button_small-width">
181214
<i class="oui-icon oui-icon-chevron-left" aria-hidden="true"></i>

0 commit comments

Comments
 (0)