Skip to content

Commit eeb7752

Browse files
crishpeencrishpeen
committed
fix(web): make box variant default of Label component and update demos
1 parent 099d31d commit eeb7752

File tree

29 files changed

+4501
-1431
lines changed

29 files changed

+4501
-1431
lines changed

‎packages/web/src/scss/components/Drawer/index.html‎

Lines changed: 77 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -58,17 +58,38 @@ <h2 class="docs-Heading">Drawer</h2>
5858
<fieldset class="border-0">
5959
<legend>Drawer alignment:</legend>
6060
<div class="Radio mr-600">
61-
<input name="drawer-alignment" autocomplete="off" type="radio" id="drawer-alignment-left" class="Radio__input" value="left">
61+
<input
62+
name="drawer-alignment"
63+
autocomplete="off"
64+
type="radio"
65+
id="drawer-alignment-left"
66+
class="Radio__input"
67+
value="left"
68+
>
6269
<div class="Radio__text">
63-
<label class="Label Label--inline" for="drawer-alignment-left">
70+
<label
71+
class="Label Label--inline"
72+
for="drawer-alignment-left"
73+
>
6474
Left
6575
</label>
6676
</div>
6777
</div>
6878
<div class="Radio">
69-
<input name="drawer-alignment" autocomplete="off" type="radio" id="drawer-alignment-right" class="Radio__input" value="right" checked="">
79+
<input
80+
name="drawer-alignment"
81+
autocomplete="off"
82+
type="radio"
83+
id="drawer-alignment-right"
84+
class="Radio__input"
85+
value="right"
86+
checked=""
87+
>
7088
<div class="Radio__text">
71-
<label class="Label Label--inline" for="drawer-alignment-right">
89+
<label
90+
class="Label Label--inline"
91+
for="drawer-alignment-right"
92+
>
7293
Right
7394
</label>
7495
</div>
@@ -77,24 +98,51 @@ <h2 class="docs-Heading">Drawer</h2>
7798
<fieldset class="border-0">
7899
<div class="Stack Stack--hasSpacing">
79100
<div class="Checkbox">
80-
<input name="is-closable-on-backdrop-click" type="checkbox" id="drawer-is-closable-on-backdrop-click" class="Checkbox__input" value="" checked="">
101+
<input
102+
name="is-closable-on-backdrop-click"
103+
type="checkbox"
104+
id="drawer-is-closable-on-backdrop-click"
105+
class="Checkbox__input"
106+
value=""
107+
checked=""
108+
>
81109
<div class="Checkbox__text">
82-
<label class="Label Label--inline" for="drawer-is-closable-on-backdrop-click">
110+
<label
111+
class="Label Label--inline"
112+
for="drawer-is-closable-on-backdrop-click"
113+
>
83114
Closable on Backdrop Click
84115
</label>
85116
</div>
86117
</div>
87118
<div class="Checkbox">
88-
<input name="is-closable-on-escape-key" type="checkbox" id="drawer-is-closable-on-escape-key" class="Checkbox__input" value="" checked="">
119+
<input
120+
name="is-closable-on-escape-key"
121+
type="checkbox"
122+
id="drawer-is-closable-on-escape-key"
123+
class="Checkbox__input"
124+
value=""
125+
checked=""
126+
>
89127
<div class="Checkbox__text">
90-
<label class="Label Label--inline" for="drawer-is-closable-on-escape-key">
128+
<label
129+
class="Label Label--inline"
130+
for="drawer-is-closable-on-escape-key"
131+
>
91132
Closable on Escape Key Down
92133
</label>
93134
</div>
94135
</div>
95136
<div class="TextArea TextArea--medium">
96-
<label for="drawer-content" class="Label Label--box">Drawer content</label>
97-
<textarea name="content" class="TextArea__input" id="drawer-content">This is a Drawer content.</textarea>
137+
<label
138+
for="drawer-content"
139+
class="Label"
140+
>Drawer content</label>
141+
<textarea
142+
name="content"
143+
class="TextArea__input"
144+
id="drawer-content"
145+
>This is a Drawer content.</textarea>
98146
</div>
99147
</div>
100148
</fieldset>
@@ -113,8 +161,15 @@ <h2 class="docs-Heading">Drawer</h2>
113161
</button>
114162

115163
<!-- Drawer: start -->
116-
<dialog id="drawer-example" class="Drawer Drawer--right" aria-label="example-basic__title">
117-
<div class="DrawerPanel" data-testid="drawer-panel">
164+
<dialog
165+
id="drawer-example"
166+
class="Drawer Drawer--right"
167+
aria-label="example-basic__title"
168+
>
169+
<div
170+
class="DrawerPanel"
171+
data-testid="drawer-panel"
172+
>
118173
<div class="DrawerPanel__content">
119174
<button
120175
type="button"
@@ -124,12 +179,20 @@ <h2 class="docs-Heading">Drawer</h2>
124179
data-spirit-target="#drawer-example"
125180
aria-controls="drawer-example"
126181
>
127-
<svg class="Icon" width="24" height="24" aria-hidden="true">
182+
<svg
183+
class="Icon"
184+
width="24"
185+
height="24"
186+
aria-hidden="true"
187+
>
128188
<use xlink:href="/assets/icons/svg/sprite.svg#close" />
129189
</svg>
130190
<span class="accessibility-hidden">Close</span>
131191
</button>
132-
<div class="p-800" data-drawer-demo-content>This is a Drawer content.</div>
192+
<div
193+
class="p-800"
194+
data-drawer-demo-content
195+
>This is a Drawer content.</div>
133196
</div>
134197
</div>
135198
</dialog>

‎packages/web/src/scss/components/FieldGroup/README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ validation messages for all fields in the group.
88
```html
99
<fieldset class="FieldGroup">
1010
<legend class="accessibility-hidden">Label</legend>
11-
<div class="Label Label--box" aria-hidden="true">Label</div>
11+
<div class="Label" aria-hidden="true">Label</div>
1212
<div class="FieldGroup__fields">
1313
<!-- Form fields… -->
1414
</div>
@@ -37,7 +37,7 @@ element.
3737
```html
3838
<fieldset class="FieldGroup">
3939
<legend class="accessibility-hidden">Label</legend>
40-
<div class="Label Label--box Label--required" aria-hidden="true">Label</div>
40+
<div class="Label Label--required" aria-hidden="true">Label</div>
4141
<div class="FieldGroup__fields">
4242
<!-- Form fields… -->
4343
</div>
@@ -73,7 +73,7 @@ To render helper text, use the [HelperText][helper-text] component:
7373
```html
7474
<fieldset class="FieldGroup" aria-describedby="field-group-helper-text">
7575
<legend class="accessibility-hidden">Label</legend>
76-
<div class="Label Label--box" aria-hidden="true">Label</div>
76+
<div class="Label" aria-hidden="true">Label</div>
7777
<div class="FieldGroup__fields">
7878
<!-- Form fields… -->
7979
</div>
@@ -91,7 +91,7 @@ To make the FieldGroup component fluid, add the `FieldGroup--fluid` modifier cla
9191
```html
9292
<fieldset class="FieldGroup FieldGroup--fluid">
9393
<legend class="accessibility-hidden">Label</legend>
94-
<div class="Label Label--box" aria-hidden="true">Label</div>
94+
<div class="Label" aria-hidden="true">Label</div>
9595
<div class="FieldGroup__fields">
9696
<!-- Form fields… -->
9797
</div>
@@ -117,7 +117,7 @@ disabled styling on all elements.
117117
```html
118118
<fieldset class="FieldGroup" disabled>
119119
<legend class="accessibility-hidden">Label</legend>
120-
<div class="Label Label--box" aria-hidden="true">Label</div>
120+
<div class="Label" aria-hidden="true">Label</div>
121121
<div class="FieldGroup__fields">
122122
<div class="TextField TextField--medium TextField--disabled">
123123
<label for="text-field" class="TextField__label">Label</label>
@@ -136,7 +136,7 @@ Validation states can be presented either by adding a CSS modifier class (`Field
136136
```html
137137
<fieldset class="FieldGroup FieldGroup--success" aria-describedby="field-group-success-validation-text">
138138
<legend class="accessibility-hidden">Label</legend>
139-
<div class="Label Label--box" aria-hidden="true">Label</div>
139+
<div class="Label" aria-hidden="true">Label</div>
140140
<div class="FieldGroup__fields">
141141
<!-- Form fields… -->
142142
</div>

0 commit comments

Comments
 (0)