Skip to content

Commit 51296c9

Browse files
pat270pat270
authored
Merge pull request #6196 from MarioLeandro/LPD-69586
docs(clayui.com): LPD-69586 Add correct class properties to HTML/CSS examples
2 parents 6197cba + c4d4e76 commit 51296c9

File tree

61 files changed

+8397
-9107
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

61 files changed

+8397
-9107
lines changed

‎packages/clay-alert/docs/alert/markup.mdx‎

Lines changed: 357 additions & 486 deletions
Large diffs are not rendered by default.

‎packages/clay-autocomplete/docs/autocomplete/markup.mdx‎

Lines changed: 37 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -64,42 +64,42 @@ Add the class `.autocomplete-dropdown-menu` to `dropdown-menu` to size the Dropd
6464
</div>
6565

6666
```html
67-
<div className="form-group">
67+
<div class="form-group">
6868
<label for="autocompleteName1">Name</label>
69-
<div className="input-group">
70-
<div className="input-group-item">
71-
<div className="dropdown">
69+
<div class="input-group">
70+
<div class="input-group-item">
71+
<div class="dropdown">
7272
<input
73-
className="form-control"
73+
class="form-control"
7474
id="autocompleteName1"
7575
type="text"
7676
value="Rob"
7777
/>
78-
<ul className="autocomplete-dropdown-menu dropdown-menu show">
78+
<ul class="autocomplete-dropdown-menu dropdown-menu show">
7979
<li>
80-
<a className="dropdown-item" href="#1"
80+
<a class="dropdown-item" href="#1"
8181
>Rob<strong>ert Downey Jr.</strong></a
8282
>
8383
</li>
8484
<li>
85-
<a className="dropdown-item" href="#1"
85+
<a class="dropdown-item" href="#1"
8686
>Rob<strong>ert Plant</strong></a
8787
>
8888
</li>
8989
<li>
90-
<a className="dropdown-item" href="#1"
90+
<a class="dropdown-item" href="#1"
9191
>Rob<strong>ert Baratheon</strong></a
9292
>
9393
</li>
9494
<li>
95-
<a className="dropdown-item" href="#1"
95+
<a class="dropdown-item" href="#1"
9696
>Rob<strong>ert De Niro</strong></a
9797
>
9898
</li>
9999
</ul>
100100
</div>
101-
<div className="form-feedback-group">
102-
<div className="form-text">
101+
<div class="form-feedback-group">
102+
<div class="form-text">
103103
You can use a comma to enter tags.
104104
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.
105105
</div>
@@ -173,58 +173,58 @@ Add the class `.autocomplete-dropdown-menu` to `dropdown-menu` to size the Dropd
173173
</div>
174174

175175
```html
176-
<div className="form-group">
176+
<div class="form-group">
177177
<label for="autocompleteMarketplace1">Marketplace</label>
178-
<div className="input-group">
179-
<div className="input-group-item">
180-
<div className="dropdown">
178+
<div class="input-group">
179+
<div class="input-group-item">
180+
<div class="dropdown">
181181
<input
182-
className="form-control input-group-inset input-group-inset-after"
182+
class="form-control input-group-inset input-group-inset-after"
183183
id="autocompleteMarketplace1"
184184
placeholder="Search for..."
185185
type="text"
186186
value="ele"
187187
/>
188188
<span
189-
className="input-group-inset-item input-group-inset-item-after"
189+
class="input-group-inset-item input-group-inset-item-after"
190190
>
191-
<button className="btn btn-unstyled" type="submit">
191+
<button class="btn btn-unstyled" type="submit">
192192
<svg
193-
className="lexicon-icon lexicon-icon-search"
193+
class="lexicon-icon lexicon-icon-search"
194194
focusable="false"
195195
role="presentation"
196196
>
197197
<use href="/images/icons/icons.svg#search" />
198198
</svg>
199199
</button>
200-
<button className="btn btn-unstyled" type="button">
200+
<button class="btn btn-unstyled" type="button">
201201
<svg
202-
className="lexicon-icon lexicon-icon-times"
202+
class="lexicon-icon lexicon-icon-times"
203203
focusable="false"
204204
role="presentation"
205205
>
206206
<use href="/images/icons/icons.svg#times" />
207207
</svg>
208208
</button>
209209
</span>
210-
<ul className="autocomplete-dropdown-menu dropdown-menu show">
210+
<ul class="autocomplete-dropdown-menu dropdown-menu show">
211211
<li>
212-
<a className="dropdown-item" href="#1"
212+
<a class="dropdown-item" href="#1"
213213
>ele<strong>ctric toothbrush</strong></a
214214
>
215215
</li>
216216
<li>
217-
<a className="dropdown-item" href="#1"
217+
<a class="dropdown-item" href="#1"
218218
>ele<strong>ctric kettle</strong></a
219219
>
220220
</li>
221221
<li>
222-
<a className="dropdown-item" href="#1"
222+
<a class="dropdown-item" href="#1"
223223
>ele<strong>ctric razor</strong></a
224224
>
225225
</li>
226226
<li>
227-
<a className="dropdown-item" href="#1"
227+
<a class="dropdown-item" href="#1"
228228
>ele<strong>ctrodes for tents</strong></a
229229
>
230230
</li>
@@ -271,32 +271,30 @@ Add the class `.autocomplete-dropdown-menu` to `dropdown-menu` to size the Dropd
271271
</div>
272272

273273
```html
274-
<div className="form-group">
274+
<div class="form-group">
275275
<label for="autocompleteMarketplace2">Marketplace</label>
276-
<div className="input-group">
277-
<div className="input-group-item">
278-
<div className="dropdown">
276+
<div class="input-group">
277+
<div class="input-group-item">
278+
<div class="dropdown">
279279
<input
280-
className="form-control input-group-inset input-group-inset-after"
280+
class="form-control input-group-inset input-group-inset-after"
281281
id="autocompleteMarketplace2"
282282
type="text"
283283
value="H"
284284
/>
285285
<span
286-
className="input-group-inset-item input-group-inset-item-after"
286+
class="input-group-inset-item input-group-inset-item-after"
287287
>
288-
<span className="inline-item inline-item-middle">
288+
<span class="inline-item inline-item-middle">
289289
<span
290-
className="loading-animation"
290+
class="loading-animation"
291291
role="presentation"
292292
></span>
293293
</span>
294294
</span>
295-
<ul className="autocomplete-dropdown-menu dropdown-menu show">
295+
<ul class="autocomplete-dropdown-menu dropdown-menu show">
296296
<li>
297-
<span className="disabled dropdown-item"
298-
>Loading...</span
299-
>
297+
<span class="disabled dropdown-item">Loading...</span>
300298
</li>
301299
</ul>
302300
</div>

‎packages/clay-badge/docs/badge/markup.mdx‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -46,36 +46,36 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
4646
</div>
4747

4848
```html
49-
<span className="badge badge-primary">
50-
<span className="badge-item badge-item-expand">Primary</span>
49+
<span class="badge badge-primary">
50+
<span class="badge-item badge-item-expand">Primary</span>
5151
</span>
5252

53-
<span className="badge badge-secondary">
54-
<span className="badge-item badge-item-expand">Secondary</span>
53+
<span class="badge badge-secondary">
54+
<span class="badge-item badge-item-expand">Secondary</span>
5555
</span>
5656

57-
<span className="badge badge-success">
58-
<span className="badge-item badge-item-expand">Success</span>
57+
<span class="badge badge-success">
58+
<span class="badge-item badge-item-expand">Success</span>
5959
</span>
6060

61-
<span className="badge badge-info">
62-
<span className="badge-item badge-item-expand">Info</span>
61+
<span class="badge badge-info">
62+
<span class="badge-item badge-item-expand">Info</span>
6363
</span>
6464

65-
<span className="badge badge-warning">
66-
<span className="badge-item badge-item-expand">Warning</span>
65+
<span class="badge badge-warning">
66+
<span class="badge-item badge-item-expand">Warning</span>
6767
</span>
6868

69-
<span className="badge badge-danger">
70-
<span className="badge-item badge-item-expand">Danger</span>
69+
<span class="badge badge-danger">
70+
<span class="badge-item badge-item-expand">Danger</span>
7171
</span>
7272

73-
<span className="badge badge-ligth">
74-
<span className="badge-item badge-item-expand">Light</span>
73+
<span class="badge badge-ligth">
74+
<span class="badge-item badge-item-expand">Light</span>
7575
</span>
7676

77-
<span className="badge badge-dark">
78-
<span className="badge-item badge-item-expand">Dark</span>
77+
<span class="badge badge-dark">
78+
<span class="badge-item badge-item-expand">Dark</span>
7979
</span>
8080
```
8181

@@ -149,36 +149,36 @@ Use the `.badge-pill` modifier class to make badges more rounded.
149149
</div>
150150

151151
```html
152-
<span className="badge badge-primary badge-pill">
153-
<span className="badge-item badge-item-expand">Primary</span>
152+
<span class="badge badge-primary badge-pill">
153+
<span class="badge-item badge-item-expand">Primary</span>
154154
</span>
155155

156-
<span className="badge badge-secondary badge-pill">
157-
<span className="badge-item badge-item-expand">Secondary</span>
156+
<span class="badge badge-secondary badge-pill">
157+
<span class="badge-item badge-item-expand">Secondary</span>
158158
</span>
159159

160-
<span className="badge badge-success badge-pill">
161-
<span className="badge-item badge-item-expand">Success</span>
160+
<span class="badge badge-success badge-pill">
161+
<span class="badge-item badge-item-expand">Success</span>
162162
</span>
163163

164-
<span className="badge badge-info badge-pill">
165-
<span className="badge-item badge-item-expand">Info</span>
164+
<span class="badge badge-info badge-pill">
165+
<span class="badge-item badge-item-expand">Info</span>
166166
</span>
167167

168-
<span className="badge badge-warning badge-pill">
169-
<span className="badge-item badge-item-expand">Warning</span>
168+
<span class="badge badge-warning badge-pill">
169+
<span class="badge-item badge-item-expand">Warning</span>
170170
</span>
171171

172-
<span className="badge badge-danger badge-pill">
173-
<span className="badge-item badge-item-expand">Danger</span>
172+
<span class="badge badge-danger badge-pill">
173+
<span class="badge-item badge-item-expand">Danger</span>
174174
</span>
175175

176-
<span className="badge badge-ligth badge-pill">
177-
<span className="badge-item badge-item-expand">Light</span>
176+
<span class="badge badge-ligth badge-pill">
177+
<span class="badge-item badge-item-expand">Light</span>
178178
</span>
179179

180-
<span className="badge badge-dark badge-pill">
181-
<span className="badge-item badge-item-expand">Dark</span>
180+
<span class="badge badge-dark badge-pill">
181+
<span class="badge-item badge-item-expand">Dark</span>
182182
</span>
183183
```
184184

@@ -191,8 +191,8 @@ Use the `.badge-pill` modifier class to make badges more rounded.
191191
</div>
192192

193193
```html
194-
<a className="badge badge-primary" href="#1">
195-
<span className="badge-item badge-item-expand">Primary</span>
194+
<a class="badge badge-primary" href="#1">
195+
<span class="badge-item badge-item-expand">Primary</span>
196196
</a>
197197
```
198198

@@ -229,25 +229,25 @@ Use the `.badge-pill` modifier class to make badges more rounded.
229229
</div>
230230

231231
```html
232-
<span className="badge badge-secondary badge-pill">
233-
<span className="badge-item badge-item-before">
232+
<span class="badge badge-secondary badge-pill">
233+
<span class="badge-item badge-item-before">
234234
<a href="#1">
235235
<svg
236-
className="lexicon-icon lexicon-icon-times-circle"
236+
class="lexicon-icon lexicon-icon-times-circle"
237237
focusable="false"
238238
role="presentation"
239239
>
240240
<use href="/images/icons/icons.svg#times-circle"></use>
241241
</svg>
242242
</a>
243243
</span>
244-
<span className="badge-item badge-item-expand">
244+
<span class="badge-item badge-item-expand">
245245
<a href="#1">Primary</a>
246246
</span>
247-
<span className="badge-item badge-item-after">
248-
<button aria-label="Close" className="close" type="button">
247+
<span class="badge-item badge-item-after">
248+
<button aria-label="Close" class="close" type="button">
249249
<svg
250-
className="lexicon-icon lexicon-icon-times"
250+
class="lexicon-icon lexicon-icon-times"
251251
focusable="false"
252252
role="presentation"
253253
>
@@ -275,10 +275,10 @@ Wrap the text inside the `.text-truncate-inline` and `.text-truncate` modifier c
275275
</div>
276276

277277
```html
278-
<span className="badge badge-secondary">
279-
<span className="badge-item badge-item-expand">
280-
<span className="text-truncate-inline">
281-
<span className="text-truncate">
278+
<span class="badge badge-secondary">
279+
<span class="badge-item badge-item-expand">
280+
<span class="text-truncate-inline">
281+
<span class="text-truncate">
282282
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
283283
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
284284
</span>

0 commit comments

Comments
 (0)