Skip to content

docs(clayui.com): LPD-69586 Add correct class properties to HTML/CSS examples #6196

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 24, 2025
Merged

docs(clayui.com): LPD-69586 Add correct class properties to HTML/CSS examples #6196

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e61fa1e
docs(clayui.com): LPD-69586 Add correct class properties to HTML/CSS …
MarioLeandro Oct 24, 2025
c4d4e76
docs(clayui.com): LPD-69586 format all files
MarioLeandro Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
843 changes: 357 additions & 486 deletions packages/clay-alert/docs/alert/markup.mdx
View file
Open in desktop

Large diffs are not rendered by default.

76 changes: 37 additions & 39 deletions packages/clay-autocomplete/docs/autocomplete/markup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,42 +64,42 @@ Add the class `.autocomplete-dropdown-menu` to `dropdown-menu` to size the Dropd
</div>

```html
<div className="form-group">
<div class="form-group">
<label for="autocompleteName1">Name</label>
<div className="input-group">
<div className="input-group-item">
<div className="dropdown">
<div class="input-group">
<div class="input-group-item">
<div class="dropdown">
<input
className="form-control"
class="form-control"
id="autocompleteName1"
type="text"
value="Rob"
/>
<ul className="autocomplete-dropdown-menu dropdown-menu show">
<ul class="autocomplete-dropdown-menu dropdown-menu show">
<li>
<a className="dropdown-item" href="#1"
<a class="dropdown-item" href="#1"
>Rob<strong>ert Downey Jr.</strong></a
>
</li>
<li>
<a className="dropdown-item" href="#1"
<a class="dropdown-item" href="#1"
>Rob<strong>ert Plant</strong></a
>
</li>
<li>
<a className="dropdown-item" href="#1"
<a class="dropdown-item" href="#1"
>Rob<strong>ert Baratheon</strong></a
>
</li>
<li>
<a className="dropdown-item" href="#1"
<a class="dropdown-item" href="#1"
>Rob<strong>ert De Niro</strong></a
>
</li>
</ul>
</div>
<div className="form-feedback-group">
<div className="form-text">
<div class="form-feedback-group">
<div class="form-text">
You can use a comma to enter tags.
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.
</div>
Expand Down Expand Up @@ -173,58 +173,58 @@ Add the class `.autocomplete-dropdown-menu` to `dropdown-menu` to size the Dropd
</div>

```html
<div className="form-group">
<div class="form-group">
<label for="autocompleteMarketplace1">Marketplace</label>
<div className="input-group">
<div className="input-group-item">
<div className="dropdown">
<div class="input-group">
<div class="input-group-item">
<div class="dropdown">
<input
className="form-control input-group-inset input-group-inset-after"
class="form-control input-group-inset input-group-inset-after"
id="autocompleteMarketplace1"
placeholder="Search for..."
type="text"
value="ele"
/>
<span
className="input-group-inset-item input-group-inset-item-after"
class="input-group-inset-item input-group-inset-item-after"
>
<button className="btn btn-unstyled" type="submit">
<button class="btn btn-unstyled" type="submit">
<svg
className="lexicon-icon lexicon-icon-search"
class="lexicon-icon lexicon-icon-search"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#search" />
</svg>
</button>
<button className="btn btn-unstyled" type="button">
<button class="btn btn-unstyled" type="button">
<svg
className="lexicon-icon lexicon-icon-times"
class="lexicon-icon lexicon-icon-times"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#times" />
</svg>
</button>
</span>
<ul className="autocomplete-dropdown-menu dropdown-menu show">
<ul class="autocomplete-dropdown-menu dropdown-menu show">
<li>
<a className="dropdown-item" href="#1"
<a class="dropdown-item" href="#1"
>ele<strong>ctric toothbrush</strong></a
>
</li>
<li>
<a className="dropdown-item" href="#1"
<a class="dropdown-item" href="#1"
>ele<strong>ctric kettle</strong></a
>
</li>
<li>
<a className="dropdown-item" href="#1"
<a class="dropdown-item" href="#1"
>ele<strong>ctric razor</strong></a
>
</li>
<li>
<a className="dropdown-item" href="#1"
<a class="dropdown-item" href="#1"
>ele<strong>ctrodes for tents</strong></a
>
</li>
Expand Down Expand Up @@ -271,32 +271,30 @@ Add the class `.autocomplete-dropdown-menu` to `dropdown-menu` to size the Dropd
</div>

```html
<div className="form-group">
<div class="form-group">
<label for="autocompleteMarketplace2">Marketplace</label>
<div className="input-group">
<div className="input-group-item">
<div className="dropdown">
<div class="input-group">
<div class="input-group-item">
<div class="dropdown">
<input
className="form-control input-group-inset input-group-inset-after"
class="form-control input-group-inset input-group-inset-after"
id="autocompleteMarketplace2"
type="text"
value="H"
/>
<span
className="input-group-inset-item input-group-inset-item-after"
class="input-group-inset-item input-group-inset-item-after"
>
<span className="inline-item inline-item-middle">
<span class="inline-item inline-item-middle">
<span
className="loading-animation"
class="loading-animation"
role="presentation"
></span>
</span>
</span>
<ul className="autocomplete-dropdown-menu dropdown-menu show">
<ul class="autocomplete-dropdown-menu dropdown-menu show">
<li>
<span className="disabled dropdown-item"
>Loading...</span
>
<span class="disabled dropdown-item">Loading...</span>
</li>
</ul>
</div>
Expand Down
90 changes: 45 additions & 45 deletions packages/clay-badge/docs/badge/markup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,36 +46,36 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
</div>

```html
<span className="badge badge-primary">
<span className="badge-item badge-item-expand">Primary</span>
<span class="badge badge-primary">
<span class="badge-item badge-item-expand">Primary</span>
</span>

<span className="badge badge-secondary">
<span className="badge-item badge-item-expand">Secondary</span>
<span class="badge badge-secondary">
<span class="badge-item badge-item-expand">Secondary</span>
</span>

<span className="badge badge-success">
<span className="badge-item badge-item-expand">Success</span>
<span class="badge badge-success">
<span class="badge-item badge-item-expand">Success</span>
</span>

<span className="badge badge-info">
<span className="badge-item badge-item-expand">Info</span>
<span class="badge badge-info">
<span class="badge-item badge-item-expand">Info</span>
</span>

<span className="badge badge-warning">
<span className="badge-item badge-item-expand">Warning</span>
<span class="badge badge-warning">
<span class="badge-item badge-item-expand">Warning</span>
</span>

<span className="badge badge-danger">
<span className="badge-item badge-item-expand">Danger</span>
<span class="badge badge-danger">
<span class="badge-item badge-item-expand">Danger</span>
</span>

<span className="badge badge-ligth">
<span className="badge-item badge-item-expand">Light</span>
<span class="badge badge-ligth">
<span class="badge-item badge-item-expand">Light</span>
</span>

<span className="badge badge-dark">
<span className="badge-item badge-item-expand">Dark</span>
<span class="badge badge-dark">
<span class="badge-item badge-item-expand">Dark</span>
</span>
```

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

```html
<span className="badge badge-primary badge-pill">
<span className="badge-item badge-item-expand">Primary</span>
<span class="badge badge-primary badge-pill">
<span class="badge-item badge-item-expand">Primary</span>
</span>

<span className="badge badge-secondary badge-pill">
<span className="badge-item badge-item-expand">Secondary</span>
<span class="badge badge-secondary badge-pill">
<span class="badge-item badge-item-expand">Secondary</span>
</span>

<span className="badge badge-success badge-pill">
<span className="badge-item badge-item-expand">Success</span>
<span class="badge badge-success badge-pill">
<span class="badge-item badge-item-expand">Success</span>
</span>

<span className="badge badge-info badge-pill">
<span className="badge-item badge-item-expand">Info</span>
<span class="badge badge-info badge-pill">
<span class="badge-item badge-item-expand">Info</span>
</span>

<span className="badge badge-warning badge-pill">
<span className="badge-item badge-item-expand">Warning</span>
<span class="badge badge-warning badge-pill">
<span class="badge-item badge-item-expand">Warning</span>
</span>

<span className="badge badge-danger badge-pill">
<span className="badge-item badge-item-expand">Danger</span>
<span class="badge badge-danger badge-pill">
<span class="badge-item badge-item-expand">Danger</span>
</span>

<span className="badge badge-ligth badge-pill">
<span className="badge-item badge-item-expand">Light</span>
<span class="badge badge-ligth badge-pill">
<span class="badge-item badge-item-expand">Light</span>
</span>

<span className="badge badge-dark badge-pill">
<span className="badge-item badge-item-expand">Dark</span>
<span class="badge badge-dark badge-pill">
<span class="badge-item badge-item-expand">Dark</span>
</span>
```

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

```html
<a className="badge badge-primary" href="#1">
<span className="badge-item badge-item-expand">Primary</span>
<a class="badge badge-primary" href="#1">
<span class="badge-item badge-item-expand">Primary</span>
</a>
```

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

```html
<span className="badge badge-secondary badge-pill">
<span className="badge-item badge-item-before">
<span class="badge badge-secondary badge-pill">
<span class="badge-item badge-item-before">
<a href="#1">
<svg
className="lexicon-icon lexicon-icon-times-circle"
class="lexicon-icon lexicon-icon-times-circle"
focusable="false"
role="presentation"
>
<use href="/images/icons/icons.svg#times-circle"></use>
</svg>
</a>
</span>
<span className="badge-item badge-item-expand">
<span class="badge-item badge-item-expand">
<a href="#1">Primary</a>
</span>
<span className="badge-item badge-item-after">
<button aria-label="Close" className="close" type="button">
<span class="badge-item badge-item-after">
<button aria-label="Close" class="close" type="button">
<svg
className="lexicon-icon lexicon-icon-times"
class="lexicon-icon lexicon-icon-times"
focusable="false"
role="presentation"
>
Expand Down Expand Up @@ -275,10 +275,10 @@ Wrap the text inside the `.text-truncate-inline` and `.text-truncate` modifier c
</div>

```html
<span className="badge badge-secondary">
<span className="badge-item badge-item-expand">
<span className="text-truncate-inline">
<span className="text-truncate">
<span class="badge badge-secondary">
<span class="badge-item badge-item-expand">
<span class="text-truncate-inline">
<span class="text-truncate">
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
</span>
Expand Down
Loading
Loading