- Don't forget to check{' '}
- WAI-ARIA{' '}
- accessibility pratices for alerts when writting your markup.
+ Don't forget to check{' '}
+ WAI-ARIA{' '}
+ accessibility pratices for alerts when writting your markup.
## Colors
@@ -17,26 +17,26 @@ packageUse: "import Alert from '@clayui/alert';"
Lexicon adopts in its design system the following colors below:
-
-
- .alert.alert-success
-
-
-
-
- .alert.alert-info
-
-
-
-
- .alert.alert-warning
-
-
-
-
- .alert.alert-danger
-
-
+
+
+ .alert.alert-success
+
+
+
+
+ .alert.alert-info
+
+
+
+
+ .alert.alert-warning
+
+
+
+
+ .alert.alert-danger
+
+
### Non-standard Colors
@@ -44,26 +44,26 @@ Lexicon adopts in its design system the following colors below:
The colors below do not follow Lexicon standards but follow the idea of [satellite components](https://liferay.design/lexicon), Clay provides non-standard colors to give you more flexibility to build UI that belong to the product.
-
-
- .alert.alert-primary
-
-
-
-
- .alert.alert-secondary
-
-
-
-
- .alert.alert-dark
-
-
-
-
- .alert.alert-light
-
-
+
+
+ .alert.alert-primary
+
+
+
+
+ .alert.alert-secondary
+
+
+
+
+ .alert.alert-dark
+
+
+
+
+ .alert.alert-light
+
+
### Variant Sass API
@@ -72,18 +72,18 @@ The map `$alert-palette` allows generating any number of alert variants. If a ke
```css
$alert-palette: (
- primary: (
- background-color: $primary
- ),
- '%alert-tertiary': (
- background-color: green
- ),
- '.alert-tertiary': (
- extend: '%alert-tertiary'
- ),
- '.alert-quaternary': (
- extend: '%alert-tertiary'
- )
+ primary: (
+ background-color: $primary
+ ),
+ '%alert-tertiary': (
+ background-color: green
+ ),
+ '.alert-tertiary': (
+ extend: '%alert-tertiary'
+ ),
+ '.alert-quaternary': (
+ extend: '%alert-tertiary'
+ )
);
```
@@ -91,12 +91,12 @@ Outputs:
```css
.alert-primary {
- background-color: #0b5fff;
+ background-color: #0b5fff;
}
.alert-tertiary,
.alert-quaternary {
- background-color: green;
+ background-color: green;
}
```
@@ -107,179 +107,177 @@ Outputs:
This type of alert is specific for toast messages. These type of messages appear on the top right corner of the screen. The maximum width of a toast message is 360px, and the height can vary depending on the number of rows. It always has a close action.
-
-
-
-
-
-
-
- Error: This is an error message
-
-
-
-
-
-
-
-
- Info: This is an info message.
-
-
-
-
-
-
-
-
-
-
- Success: This is a success
- message
-
-
-
-
-
-
-
-
- Warning: This is a warning
- message.
-
-
-
-
-
+
+
+
+
+
+
+
+ Error: This is an error message
+
+
+
+
+
+
+
+
+ Info: This is an info message.
+
+
+
+
+
+
+
+
+
+
+ Success: This is a success message
+
+
+
+
+
+
+
+
+ Warning: This is a warning message.
+
+
+
+
+
```html
- ...
- Error: This is an error message
-
+ ...
+ Error: This is an error message
+
- ...
- Info: This is an info message.
-
+ ...
+ Info: This is an info message.
+
- ...
- Success: This is a success message
-
+ ...
+ Success: This is a success message
+
- ...
- Warning: This is a warning message.
-
+ ...
+ Warning: This is a warning message.
+
```
@@ -288,75 +286,75 @@ This type of alert is specific for toast messages. These type of messages appear
Embedded alerts are meant for use in forms. Usually you will only need to use the information once. Its width depends on the width of the container it is placed in, always respecting the container margins to the content. The close action is not required for embedded alerts.
-
-
-
-
- Error: This is an error message
-
-
-
-
-
- Error: This is a success message
-
-
-
-
-
- Error: This is an info message
-
-
-
-
-
- Error: This is a warning message
-
+
+
+
+
+ Error: This is an error message
+
+
+
+
+
+ Error: This is a success message
+
+
+
+
+
+ Error: This is an info message
+
+
+
+
+
+ Error: This is a warning message
+
```html
- ...
- Error:This is an error message
+ ...
+ Error:This is an error message
- ...
- Error:This is a success message
+ ...
+ Error:This is a success message
- ...
- Error:This is an info message
+ ...
+ Error:This is an info message
- ...
- Error:This is a warning message
+ ...
+ Error:This is a warning message
```
@@ -365,179 +363,179 @@ Embedded alerts are meant for use in forms. Usually you will only need to use th
Stripe alerts are always placed below the last navigation element, either the header or the navigation bar. This alert usually appears on "Save" action, communicating the status of the action once received from the server. The close action is mandatory in this alert type. Its width is always full container width and pushes all the content below it.
-
-
-
-
-
- Danger This is an error message
-
-
-
-
-
-
-
-
- Success This is a success message
-
-
-
-
-
-
-
-
- Info This is an info message
-
-
-
-
-
-
-
-
- Warning This is a warning message
-
-
-
+
+
+
+
+
+ Danger This is an error message
+
+
+
+
+
+
+
+
+ Success This is a success message
+
+
+
+
+
+
+
+
+ Info This is an info message
+
+
+
+
+
+
+
+
+ Warning This is a warning message
+
+
+
```html
-
- ...
- Danger This is an error message
-
-
+
+ ...
+ Danger This is an error message
+
+
-
- ...
- Success This is a success message
-
-
+
+ ...
+ Success This is a success message
+
+
-
- ...
- Info This is an info message
-
-
+
+ ...
+ Info This is an info message
+
+
-
- ...
- Warning This is a warning message
-
-
+
+ ...
+ Warning This is a warning message
+
+
```
@@ -546,695 +544,681 @@ Stripe alerts are always placed below the last navigation element, either the he
Add the modifier `alert-feedback` on the `alert` element to remove the `background`, `border`, and `padding`.
-
-
-
-
-
-
-
-
-
-
-
- Primary Indicator:
-
- with some additional text and a{' '}
-
- link
-
- .
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Autofit Primary Indicator
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Secondary Indicator:
-
- with some additional text and a{' '}
-
- link
-
- .
-
-
-
-
-
-
-
-
-
- Secondary Indicator
-
-
-
-
-
-
-
-
-
-
-
-
-
- Success Indicator:
-
- with some additional text and a{' '}
-
- link
-
- .
-
-
-
-
-
-
-
-
-
- Success Indicator
-
-
-
-
-
-
-
-
-
-
-
-
-
- Info Indicator:
-
- with some additional text and a{' '}
-
- link
-
- .
-
-
-
-
-
-
-
-
-
- Info Indicator
-
-
-
-
-
-
-
-
-
-
-
-
-
- Warning Indicator:
-
- with some additional text and a{' '}
-
- link
-
- .
-
-
-
-
-
-
-
-
-
- Warning Indicator
-
-
-
-
-
-
-
-
-
-
-
-
-
- Danger Indicator:
-
- with some additional text and a{' '}
-
- link
-
- .
-
-
-
-
-
-
-
-
-
- Danger Indicator
-
-
+
+
+
+
+
+
+
+
+
+
+
+ Primary Indicator:
+
+ with some additional text and a{' '}
+
+ link
+
+ .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Autofit Primary Indicator
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Secondary Indicator:
+
+ with some additional text and a{' '}
+
+ link
+
+ .
+
+
+
+
+
+
+
+
+
+ Secondary Indicator
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Success Indicator:
+
+ with some additional text and a{' '}
+
+ link
+
+ .
+
+
+
+
+
+
+
+
+
+ Success Indicator
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Info Indicator:
+
+ with some additional text and a{' '}
+
+ link
+
+ .
+
+
+
+
+
+
+
+
+
+ Info Indicator
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Warning Indicator:
+
+ with some additional text and a{' '}
+
+ link
+
+ .
+
+
+
+
+
+
+
+
+
+ Warning Indicator
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Danger Indicator:
+
+ with some additional text and a{' '}
+
+ link
+
+ .
+
+
+
+
+
+
+
+
+
+ Danger Indicator
+
+
```html
-
-
-
-
-
-
-
-
-
-
- Primary Indicator:
- with some additional text and a
- link.
-
-
-
+
+
+
+
+
+
+
+
+
+
+ Primary Indicator:
+ with some additional text and a
+ link.
+
+
+
-
-
-
-
-
-
-
-
-
-
- Autofit Primary Indicator
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ Autofit Primary Indicator
+
+
+
+
-
-
-
-
-
-
-
-
-
-
- Secondary Indicator:
- with some additional text and a
- link.
-
-
-
+
+
+
+
+
+
+
+
+
+
+ Secondary Indicator:
+ with some additional text and a
+ link.
+
```
@@ -1243,207 +1227,201 @@ Add the modifier `alert-feedback` on the `alert` element to remove the `backgrou
An alternative to using autofit utilities, this keeps the text after the indicator icon from flowing under the icon when it breaks to a new line.
-
alert-dismissible
-
-
-
-
-
-
-
- Success:
-
- Strong kopi-luwak half and half single origin single
- shot, half and half instant latte brewed latte. At,
- decaffeinated, blue mountain viennese barista, spoon
- carajillo shop viennese dark. And ristretto caffeine,
- plunger pot black, café au lait galão flavour foam
- strong. Macchiato roast, breve fair trade seasonal et
- cultivar.
-
-
-
-
-
-
-
alert-fluid
-
-
-
-
-
- Primary:
-
- Strong kopi-luwak half and half single origin single shot, half
- and half instant latte brewed latte. At, decaffeinated, blue
- mountain viennese barista, spoon carajillo shop viennese dark.
- And ristretto caffeine, plunger pot black, café au lait galão
- flavour foam strong. Macchiato roast, breve fair trade seasonal
- et cultivar.
-
-
-
-
alert-feedback
-
-
-
-
- Danger:
-
- Strong kopi-luwak half and half single origin single shot, half and
- half instant latte brewed latte. At, decaffeinated, blue mountain
- viennese barista, spoon carajillo shop viennese dark. And ristretto
- caffeine, plunger pot black, café au lait galão flavour foam strong.
- Macchiato roast, breve fair trade seasonal et cultivar.
-
-
-
+
alert-dismissible
+
+
+
+
+
+
+
+ Success:
+
+ Strong kopi-luwak half and half single origin single shot, half and
+ half instant latte brewed latte. At, decaffeinated, blue mountain
+ viennese barista, spoon carajillo shop viennese dark. And ristretto
+ caffeine, plunger pot black, café au lait galão flavour foam strong.
+ Macchiato roast, breve fair trade seasonal et cultivar.
+
+
+
+
+
+
+
alert-fluid
+
+
+
+
+
+ Primary:
+
+ Strong kopi-luwak half and half single origin single shot, half and half
+ instant latte brewed latte. At, decaffeinated, blue mountain viennese
+ barista, spoon carajillo shop viennese dark. And ristretto caffeine,
+ plunger pot black, café au lait galão flavour foam strong. Macchiato
+ roast, breve fair trade seasonal et cultivar.
+
+
+
+
alert-feedback
+
+
+
+
+ Danger:
+
+ Strong kopi-luwak half and half single origin single shot, half and half
+ instant latte brewed latte. At, decaffeinated, blue mountain viennese
+ barista, spoon carajillo shop viennese dark. And ristretto caffeine,
+ plunger pot black, café au lait galão flavour foam strong. Macchiato
+ roast, breve fair trade seasonal et cultivar.
+
+
+
```html
-
-
-
-
-
-
- Success:
- Strong kopi-luwak half and half single origin single shot,
- half and half instant latte brewed latte. At, decaffeinated,
- blue mountain viennese barista, spoon carajillo shop
- viennese dark. And ristretto caffeine, plunger pot black,
- café au lait galão flavour foam strong. Macchiato roast,
- breve fair trade seasonal et cultivar.
-
-
-
-
+
+
+
+
+
+
+ Success:
+ Strong kopi-luwak half and half single origin single shot, half and
+ half instant latte brewed latte. At, decaffeinated, blue mountain
+ viennese barista, spoon carajillo shop viennese dark. And ristretto
+ caffeine, plunger pot black, café au lait galão flavour foam strong.
+ Macchiato roast, breve fair trade seasonal et cultivar.
+
+
+
+
-
-
-
-
- Primary:
- Strong kopi-luwak half and half single origin single shot, half and
- half instant latte brewed latte. At, decaffeinated, blue mountain
- viennese barista, spoon carajillo shop viennese dark. And ristretto
- caffeine, plunger pot black, café au lait galão flavour foam strong.
- Macchiato roast, breve fair trade seasonal et cultivar.
-
+
+
+
+
+ Primary:
+ Strong kopi-luwak half and half single origin single shot, half and half
+ instant latte brewed latte. At, decaffeinated, blue mountain viennese
+ barista, spoon carajillo shop viennese dark. And ristretto caffeine,
+ plunger pot black, café au lait galão flavour foam strong. Macchiato
+ roast, breve fair trade seasonal et cultivar.
+
-
-
-
- Danger:
- Strong kopi-luwak half and half single origin single shot, half and
- half instant latte brewed latte. At, decaffeinated, blue mountain
- viennese barista, spoon carajillo shop viennese dark. And ristretto
- caffeine, plunger pot black, café au lait galão flavour foam strong.
- Macchiato roast, breve fair trade seasonal et cultivar.
-
+
+
+
+ Danger:
+ Strong kopi-luwak half and half single origin single shot, half and half
+ instant latte brewed latte. At, decaffeinated, blue mountain viennese
+ barista, spoon carajillo shop viennese dark. And ristretto caffeine, plunger
+ pot black, café au lait galão flavour foam strong. Macchiato roast, breve
+ fair trade seasonal et cultivar.
+
```
@@ -1452,522 +1430,480 @@ An alternative to using autofit utilities, this keeps the text after the indicat
This changes an alert to use `display: inline-block`. It will only expand to be as wide as its content and max out at the parent container's width.
-
-
-
-
-
-
-
- Success:
-
- File uploaded. Would you like to add categories
- automatically?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Alert:
- A file with this name already exists.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Info:
- Would you like to add categories automatically?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Info:
-
- Would you like to add categories automatically?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Error:
- The file wasn't uploaded.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Success:
+
+ File uploaded. Would you like to add categories automatically?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Alert:
+ A file with this name already exists.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Info:
+ Would you like to add categories automatically?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Info:
+ Would you like to add categories automatically?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Error:
+ The file wasn't uploaded.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```html
-
-
-
-
-
-
- Success:
- File uploaded. Would you like to add categories
- automatically?
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ Success:
+ File uploaded. Would you like to add categories automatically?
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
- Alert:
- A file with this name already exists.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ Alert:
+ A file with this name already exists.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
- Info:
- Would you like to add categories automatically?
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ Info:
+ Would you like to add categories automatically?
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
- Info:
- Would you like to add categories automatically?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Info:
+ Would you like to add categories automatically?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
- Error:
- The file wasn't uploaded.
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ Error:
+ The file wasn't uploaded.
+
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -1976,112 +1912,102 @@ This changes an alert to use `display: inline-block`. It will only expand to be
The class `alert-autofit-stacked` forces each `autofit-col` to stack on top of each other, apply it on the `alert` element.
-
-
-
-
-
-
-
- Success:
-
- File uploaded. Would you like to add categories
- automatically?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Success:
+
+ File uploaded. Would you like to add categories automatically?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```html
-
-
-
-
-
-
- Success:
- File uploaded. Would you like to add categories
- automatically?
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ Success:
+ File uploaded. Would you like to add categories automatically?
+
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -2090,112 +2016,102 @@ The class `alert-autofit-stacked` forces each `autofit-col` to stack on top of e
The class `alert-autofit-stacked-sm-down` forces each `autofit-col` to stack on top of each other at screen sizes 767px and below, apply it on the `alert` element.
-
-
-
-
-
-
-
- Success:
-
- File uploaded. Would you like to add categories
- automatically?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Success:
+
+ File uploaded. Would you like to add categories automatically?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```html
-
-
-
-
-
-
- Success:
- File uploaded. Would you like to add categories
- automatically?
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ Success:
+ File uploaded. Would you like to add categories automatically?
+
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -2204,112 +2120,102 @@ The class `alert-autofit-stacked-sm-down` forces each `autofit-col` to stack on
The class `alert-autofit-stacked-xs-down` forces each `autofit-col` to stack on top of each other at screen sizes 575px and below, apply it on the `alert` element.
-
-
-
-
-
-
-
- Success:
-
- File uploaded. Would you like to add categories
- automatically?
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Success:
+
+ File uploaded. Would you like to add categories automatically?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```html
-
-
-
-
-
-
- Success:
- File uploaded. Would you like to add categories
- automatically?
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ Success:
+ File uploaded. Would you like to add categories automatically?
+
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -2320,350 +2226,322 @@ These examples are not included in the Lexicon design system but they are built
### Alert Lists
-
-
-
-
-
-
-
-
-
- 1 Files couldn't upload.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- RTF
-
-
-
-
file-upload.RTF
-
-
-
- Error: couldn't
- upload.
-
-
-
-
-
-
-
-
-
-
-
-
-
- JPG
-
-
-
-
file-name.JPG
-
- Uploaded - 142.1KB
-
-
-
-
-
-
-
-
-
-
-
- RTF
-
-
-
-
ABC-file.RTF
-
-
-
-
-
-
-
- Size: 156.6 MB
-
-
-
-
- 34%
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ 1 Files couldn't upload.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RTF
+
+
+
+
file-upload.RTF
+
+
+
+ Error: couldn't upload.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ JPG
+
+
+
+
file-name.JPG
+
Uploaded - 142.1KB
+
+
+
+
+
+
+
+
+
+
+ RTF
+
+
+
+
ABC-file.RTF
+
+
+
+
+
+
+
Size: 156.6 MB
+
+
+
34%
+
+
+
+
+
+
+
+
+
+
```html
-
-
-
-
-
- ...
- 1 Files couldn't
- upload.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- RTF
-
-
-
-
file-upload.RTF
- ...
- Error: couldn't
- upload.
-
-
-
-
-
-
-
-
-
-
-
-
-
- JPG
-
-
-
-
file-name.JPG
-
- Uploaded - 142.1KB
-
-
-
-
-
-
-
-
-
-
-
- RTF
-
-
-
-
ABC-file.RTF
-
-
-
-
-
-
-
- Size: 156.6 MB
-
-
-
-
- 34%
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ ...
+ 1 Files couldn't upload.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RTF
+
+
+
+
file-upload.RTF
+ ...
+ Error: couldn't upload.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ JPG
+
+
+
+
file-name.JPG
+
Uploaded - 142.1KB
+
+
+
+
+
+
+
+
+
+
+ RTF
+
+
+
+
ABC-file.RTF
+
+
+
+
+
+
+
Size: 156.6 MB
+
+
+
34%
+
+
+
+
+
+
+
+
+
```
@@ -2673,79 +2551,79 @@ These examples are not included in the Lexicon design system but they are built
All alerts accept HTML as their content. You can use the following modifiers:
-- `.lead` inside of an alert to make the beginning of your message stand out
-- `.alert-link` to style a link inside your alert
+- `.lead` inside of an alert to make the beginning of your message stand out
+- `.alert-link` to style a link inside your alert
-
-
-
- Success: This is a success closeable alert
-
-
+
+
+
+
+ Success: This is a success closeable alert
+
+
```html
- ...
- Success: This is a success closeable alert
-
+ ...
+ Success: This is a success closeable alert
+
```
@@ -2755,7 +2633,7 @@ An absolute positioned container for placing alerts on the top right corner rela
```html
-
...
+
...
```
@@ -2765,8 +2643,8 @@ A fixed positioned container for placing alerts on the top right corner of the p
```html
-
- ...
-
+
+ ...
+
```
diff --git a/packages/clay-autocomplete/docs/autocomplete.mdx b/packages/clay-autocomplete/docs/autocomplete.mdx
index 36a3aa4aa5..dd25e7dd4d 100644
--- a/packages/clay-autocomplete/docs/autocomplete.mdx
+++ b/packages/clay-autocomplete/docs/autocomplete.mdx
@@ -5,10 +5,10 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/text-in
packageNpm: '@clayui/autocomplete'
packageUse: "import Autocomplete from '@clayui/autocomplete';"
packageTypes:
- [
- 'clay-autocomplete/src/LegacyAutocomplete.tsx',
- 'clay-autocomplete/src/Item.tsx',
- ]
+ [
+ 'clay-autocomplete/src/LegacyAutocomplete.tsx',
+ 'clay-autocomplete/src/Item.tsx',
+ ]
---
## Example
@@ -19,39 +19,30 @@ import Autocomplete from '@clayui/autocomplete';
import Form from '@clayui/form';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
-
-
- {(item) => (
-
- {item}
-
- )}
-
-
-
-
- );
+ return (
+
+
+
+
+
+ {(item) => {item}}
+
+
+
+
+ );
}
```
@@ -67,18 +58,18 @@ Autocomplete follows the Collection pattern, the same as TreeView and VerticalBa
```jsx
- Apples
- Bananas
- Cantaloupe
- Mangos
- Oranges
- Strawberries
+ Apples
+ Bananas
+ Cantaloupe
+ Mangos
+ Oranges
+ Strawberries
```
@@ -86,26 +77,26 @@ Autocomplete follows the Collection pattern, the same as TreeView and VerticalBa
Dynamic content works when the data comes from a service, there are two possible scenarios:
-- All data exists on the client and the filter is done on the client
-- The filter is done on the server
+- All data exists on the client and the filter is done on the client
+- The filter is done on the server
```jsx
- {(item) => {item}}
+ {(item) => {item}}
```
@@ -113,36 +104,34 @@ The most common scenario for a large list of data is the filter is done on the s
```jsx
function Example() {
- const [value, setValue] = useState('');
-
- const [networkStatus, setNetworkStatus] = useState(4);
- const {resource} = useResource({
- fetchPolicy: 'cache-first',
- link: 'https://api.clay.example/devs/',
- onNetworkStatusChange: setNetworkStatus,
- variables: {name: value},
- });
-
- return (
- {}}
- placeholder="Enter the name of a fruit"
- value={value}
- >
- {(item) => (
-
- {item.name}
-
- )}
-
- );
+ const [value, setValue] = useState('');
+
+ const [networkStatus, setNetworkStatus] = useState(4);
+ const {resource} = useResource({
+ fetchPolicy: 'cache-first',
+ link: 'https://api.clay.example/devs/',
+ onNetworkStatusChange: setNetworkStatus,
+ variables: {name: value},
+ });
+
+ return (
+ {}}
+ placeholder="Enter the name of a fruit"
+ value={value}
+ >
+ {(item) => (
+ {item.name}
+ )}
+
+ );
}
```
@@ -156,44 +145,40 @@ The value of Autocomplete by default is an empty value, but it can start with a
```jsx
function Example() {
- const [value, setValue] = useState('Apples');
-
- return (
- <>
-
- {(item) => (
- {item}
- )}
-
-
-
- {(item) => (
- {item}
- )}
-
-
- );
+ const [value, setValue] = useState('Apples');
+
+ return (
+ <>
+
+ {(item) => {item}}
+
+
+
+ {(item) => {item}}
+
+
+ );
}
```
@@ -203,37 +188,35 @@ Autocomplete supports loading data asynchronously, and displays the loading indi
```jsx
function Example() {
- const [value, setValue] = useState('');
-
- const [networkStatus, setNetworkStatus] = useState(4);
- const {resource} = useResource({
- fetchPolicy: 'cache-first',
- link: 'https://api.clay.example/devs/',
- onNetworkStatusChange: setNetworkStatus,
- variables: {name: value},
- });
-
- return (
- {}}
- placeholder="Enter a name"
- value={value}
- >
- {(item) => (
-
- {item.name}
-
- )}
-
- );
+ const [value, setValue] = useState('');
+
+ const [networkStatus, setNetworkStatus] = useState(4);
+ const {resource} = useResource({
+ fetchPolicy: 'cache-first',
+ link: 'https://api.clay.example/devs/',
+ onNetworkStatusChange: setNetworkStatus,
+ variables: {name: value},
+ });
+
+ return (
+ {}}
+ placeholder="Enter a name"
+ value={value}
+ >
+ {(item) => (
+ {item.name}
+ )}
+
+ );
}
```
@@ -241,47 +224,45 @@ Autocomplete also supports infinite scrolling to load more data on demand as the
```jsx
function Example() {
- const [value, setValue] = useState('');
-
- const [networkStatus, setNetworkStatus] = useState(4);
- const {loadMore, resource} = useResource({
- fetch: async (link, options) => {
- const result = await fetch(link, options);
- const json = await result.json();
-
- return {
- cursor: json.next,
- items: json.results,
- };
- },
- fetchPolicy: 'cache-first',
- link: 'https://api.clay.example/devs/',
- onNetworkStatusChange: setNetworkStatus,
- variables: {name: value},
- });
-
- return (
- {}}
- onLoadMore={loadMore}
- placeholder="Enter a name"
- value={value}
- >
- {(item) => (
-
- {item.name}
-
- )}
-
- );
+ const [value, setValue] = useState('');
+
+ const [networkStatus, setNetworkStatus] = useState(4);
+ const {loadMore, resource} = useResource({
+ fetch: async (link, options) => {
+ const result = await fetch(link, options);
+ const json = await result.json();
+
+ return {
+ cursor: json.next,
+ items: json.results,
+ };
+ },
+ fetchPolicy: 'cache-first',
+ link: 'https://api.clay.example/devs/',
+ onNetworkStatusChange: setNetworkStatus,
+ variables: {name: value},
+ });
+
+ return (
+ {}}
+ onLoadMore={loadMore}
+ placeholder="Enter a name"
+ value={value}
+ >
+ {(item) => (
+ {item.name}
+ )}
+
+ );
}
```
@@ -291,40 +272,38 @@ By default, Autocomplete uses the `contains` string filtering strategy to decide
```jsx
function Example() {
- const options = [
- 'Apples',
- 'Bananas',
- 'Cantaloupe',
- 'Mangos',
- 'Oranges',
- 'Strawberries',
- ];
-
- const [value, setValue] = useState('');
-
- const filteredItems = useMemo(
- () =>
- options.filter(
- (item) => value.match(new RegExp(value, 'i')) !== null
- ),
- [value]
- );
-
- return (
- {}}
- placeholder="Enter the name of a fruit"
- value={value}
- >
- {(item) => {item}}
-
- );
+ const options = [
+ 'Apples',
+ 'Bananas',
+ 'Cantaloupe',
+ 'Mangos',
+ 'Oranges',
+ 'Strawberries',
+ ];
+
+ const [value, setValue] = useState('');
+
+ const filteredItems = useMemo(
+ () =>
+ options.filter((item) => value.match(new RegExp(value, 'i')) !== null),
+ [value]
+ );
+
+ return (
+ {}}
+ placeholder="Enter the name of a fruit"
+ value={value}
+ >
+ {(item) => {item}}
+
+ );
}
```
@@ -338,46 +317,37 @@ import Autocomplete from '@clayui/autocomplete';
import Form from '@clayui/form';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
-
-
- {(item) => (
-
- {item}
-
- )}
-
-
-
-
- );
+ return (
+
+
+
+
+
+ {(item) => {item}}
+
+
+
+
+ );
}
```
diff --git a/packages/clay-autocomplete/docs/autocomplete/markup.mdx b/packages/clay-autocomplete/docs/autocomplete/markup.mdx
index 62ca1aa283..d11f1e3686 100644
--- a/packages/clay-autocomplete/docs/autocomplete/markup.mdx
+++ b/packages/clay-autocomplete/docs/autocomplete/markup.mdx
@@ -11,296 +11,282 @@ packageUse: "import Autocomplete from '@clayui/autocomplete';"
Add the class `.autocomplete-dropdown-menu` to `dropdown-menu` to size the Dropdown Menu according to Lexicon Design specifications.
- This requires external javascript to populate and show/hide the{' '}
- .dropdown-menu.
+ This requires external javascript to populate and show/hide the{' '}
+ .dropdown-menu.
- You can use a comma to enter tags.
- ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.
-
+ You can use a comma to enter tags.
+ ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.
+
- You can use a comma to enter tags.
- ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.
-
+ You can use a comma to enter tags.
+ ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.
+
```
diff --git a/packages/clay-badge/docs/badge.mdx b/packages/clay-badge/docs/badge.mdx
index 7d322fc809..0919f289f3 100644
--- a/packages/clay-badge/docs/badge.mdx
+++ b/packages/clay-badge/docs/badge.mdx
@@ -17,21 +17,19 @@ import {Provider} from '@clayui/core';
import Badge from '@clayui/badge';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
-
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
}
```
@@ -46,20 +44,18 @@ import {Provider} from '@clayui/core';
import Badge from '@clayui/badge';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+
+
+
+ );
}
```
@@ -72,29 +68,27 @@ import {Provider} from '@clayui/core';
import Badge from '@clayui/badge';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+
+
+
+ );
}
```
## Beta (Deprecated)
- The property displayType="beta" has been deprecated in favor of
- semantic attributes displayType="info" and{' '}
- translucent.
+ The property displayType="beta" has been deprecated in favor of
+ semantic attributes displayType="info" and{' '}
+ translucent.
A component to indicate beta features in DXP. The `badge-beta` variant doesn’t have any interaction. It just informs the user. It uses a Badge component with custom visual states.
@@ -104,25 +98,23 @@ import {Provider} from '@clayui/core';
import Badge from '@clayui/badge';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+ );
}
```
## Beta Dark (Deprecated)
- The property displayType="beta-dark" has been deprecated in
- favor of semantic attributes dark,{' '}
- displayType="info" and translucent.
+ The property displayType="beta-dark" has been deprecated in favor
+ of semantic attributes dark, displayType="info" and{' '}
+ translucent.
`badge-beta-dark` is a dark variant of `badge-beta` to be used with dark backgrounds.
@@ -132,15 +124,13 @@ import {Provider} from '@clayui/core';
import Badge from '@clayui/badge';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
## Variations
@@ -19,63 +19,63 @@ packageUse: "import Badge from '@clayui/badge';"
Add any of the below mentioned modifier classes to change the appearance of a badge.
```html
-
-
-
-
-
-
- Primary
-
-
-
-
+
+
+
+
+
+
+ Primary
+
+
+
+
```
@@ -263,26 +263,26 @@ Use the `.badge-pill` modifier class to make badges more rounded.
Wrap the text inside the `.text-truncate-inline` and `.text-truncate` modifier class.
+
+ );
}
```
diff --git a/packages/clay-breadcrumb/docs/breadcrumb/markup.mdx b/packages/clay-breadcrumb/docs/breadcrumb/markup.mdx
index d6956d89b7..a0cd56c6a0 100644
--- a/packages/clay-breadcrumb/docs/breadcrumb/markup.mdx
+++ b/packages/clay-breadcrumb/docs/breadcrumb/markup.mdx
@@ -11,222 +11,218 @@ A navigation aid for your site, provide a quick way to jump back to previously v
Use `` inside breadcrumb links to truncate text based on a max-width.
- Breadcrumb will use{' '}
- $breadcrumb-divider-svg-icon by
- default, set $breadcrumb-divider-svg-icon: none; if you wish to use the
- UTF-8 charset or third-party icon font.
+ Breadcrumb will use{' '}
+ $breadcrumb-divider-svg-icon by
+ default, set $breadcrumb-divider-svg-icon: none; if you wish to use the UTF-8
+ charset or third-party icon font.
- Don't forget to check{' '}
- WAI-ARIA{' '}
- accessibility pratices for alerts when writting your markup.
+ Don't forget to check{' '}
+ WAI-ARIA{' '}
+ accessibility pratices for alerts when writting your markup.
- Don't forget to check{' '}
- WAI-ARIA{' '}
- accessibility pratices for buttons when writting your markup.
+ Don't forget to check{' '}
+ WAI-ARIA{' '}
+ accessibility pratices for buttons when writting your markup.
```html
@@ -105,26 +105,26 @@ Outputs:
Create block level buttons—those that span the full width of a parent—by adding `.btn-block`.
-
-
-
+
+
+
```html
```
@@ -134,18 +134,18 @@ The map `$btn-sizes` allows generating any number of button size variants. If a
```css
$btn-sizes: (
- btn-sm: (
- font-size: 14px
- ),
- '.btn-xs': (
- extend: '%clay-btn-sm'
- ),
- '%btn-xxs': (
- font-size: 12px
- ),
- '.btn-xxs': (
- extend: '%btn-xxs'
- )
+ btn-sm: (
+ font-size: 14px
+ ),
+ '.btn-xs': (
+ extend: '%clay-btn-sm'
+ ),
+ '%btn-xxs': (
+ font-size: 12px
+ ),
+ '.btn-xxs': (
+ extend: '%btn-xxs'
+ )
);
```
@@ -154,11 +154,11 @@ Outputs:
```css
.btn-sm,
.btn-xs {
- font-size: 14px;
+ font-size: 14px;
}
.btn-xxs {
- font-size: 12px;
+ font-size: 12px;
}
```
@@ -167,12 +167,12 @@ Outputs:
Buttons will appear pressed when active. However, you can still force the same active appearance with `.active` (and include the `aria-pressed="true"` attribute) should you need to replicate the state programmatically.
-
-
+
+
```html
@@ -185,18 +185,18 @@ Buttons will appear pressed when active. However, you can still force the same a
Make buttons look inactive by adding the `disabled` boolean attribute to any `
@@ -452,85 +452,85 @@ packageUse: "import ColorPicker from '@clayui/color-picker';"
## Variations
- Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning
- inside Navbars. They align them manually via CSS classes. See [Dropdown
- Alignment](/docs/components/drop-down#alignment).
+ Bootstrap 4 doesn't support Dropdown Menu's with Popper.js positioning inside
+ Navbars. They align them manually via CSS classes. See [Dropdown
+ Alignment](/docs/components/drop-down#alignment).
## Dark
-
+
```html
```
## Using Buttons
-
+
```html
```
diff --git a/packages/clay-core/docs/aspect-ratio.mdx b/packages/clay-core/docs/aspect-ratio.mdx
index 5ca4ac8a22..547cf4e715 100644
--- a/packages/clay-core/docs/aspect-ratio.mdx
+++ b/packages/clay-core/docs/aspect-ratio.mdx
@@ -10,32 +10,32 @@ Sometimes you can't control the size of an image, you can constrain your images
Use `aspect-ratio-3-to-2`, `aspect-ratio-4-to-3`, `aspect-ratio-8-to-3`, `aspect-ratio-8-to-5`, or `aspect-ratio-16-to-9` to maintain the specific ratio relative to its container or create your own by setting `padding-bottom` to the ratio you want e.g. 2 to 1 `.aspect-ratio-2-to-1 { padding-bottom: 50% }`.
-
-
-
1:1
-
-
-
-
3:2
-
-
-
-
4:3
-
-
-
-
8:3
-
-
-
-
8:5
-
-
-
-
16:9
-
-
-
+
+
+
1:1
+
+
+
+
3:2
+
+
+
+
4:3
+
+
+
+
8:3
+
+
+
+
8:5
+
+
+
+
16:9
+
+
+
```html
@@ -53,20 +53,20 @@ The map `$aspect-ratio-sizes` allows generating any number of aspect ratio varia
```scss
$aspect-ratio-sizes: (
- aspect-ratio-16-to-9: (
- height: 9,
- width: 16,
- ),
- '.card .aspect-ratio': (
- extend: '%aspect-ratio-16-to-9',
- ),
- '%aspect-ratio-4-to-1': (
- height: 1,
- width: 4,
- ),
- '.aspect-ratio-4-to-1': (
- extend: '%aspect-ratio-4-to-1',
- ),
+ aspect-ratio-16-to-9: (
+ height: 9,
+ width: 16,
+ ),
+ '.card .aspect-ratio': (
+ extend: '%aspect-ratio-16-to-9',
+ ),
+ '%aspect-ratio-4-to-1': (
+ height: 1,
+ width: 4,
+ ),
+ '.aspect-ratio-4-to-1': (
+ extend: '%aspect-ratio-4-to-1',
+ ),
);
```
@@ -75,11 +75,11 @@ Outputs:
```css
.aspect-ratio-16-to-9,
.card .aspect-ratio {
- padding-bottom: calc(9 / 16 * 100%);
+ padding-bottom: calc(9 / 16 * 100%);
}
.aspect-ratio-4-to-1 {
- padding-bottom: calc(1 / 4 * 100%);
+ padding-bottom: calc(1 / 4 * 100%);
}
```
@@ -88,17 +88,16 @@ Outputs:
The class `aspect-ratio-bg-contain` on `aspect-ratio` centers the `background-image` and scales the image as large as possible without cropping or stretching the image.
-
-
-
-
-
+
+
+
+
+
```html
@@ -113,17 +112,16 @@ The class `aspect-ratio-bg-contain` on `aspect-ratio` centers the `background-im
The class `aspect-ratio-bg-cover` on `aspect-ratio` centers the `background-image` and scales the image to fill the container. It will stretch and change the proportions of the image to achieve this.
-
-
-
-
-
+
+
+
+
+
```html
@@ -138,16 +136,16 @@ The class `aspect-ratio-bg-cover` on `aspect-ratio` centers the `background-imag
The class `aspect-ratio-bg-center` on `aspect-ratio` will center the `background-image`.
-
-
-
-
-
+
+
+
+
+
```html
@@ -162,26 +160,26 @@ The class `aspect-ratio-bg-center` on `aspect-ratio` will center the `background
Use `aspect-ratio-item` on the nested `img` if you want to keep the content's original size and crop the visible area.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
```html
-
+
```
@@ -190,135 +188,135 @@ Use `aspect-ratio-item` on the nested `img` if you want to keep the content's or
The class `aspect-ratio-item-fluid` should be used on `aspect-ratio-item` to keep wide images viewable inside the `aspect-ratio` container. It sets the max-width to be 100%, similar to `img-fluid`.
-
Original Image
-
-
-
-
16:9
-
-
-
-
-
-
1:1
-
-
-
-
-
-
3:2
-
-
-
-
-
-
4:3
-
-
-
-
-
-
8:3
-
-
-
-
-
-
8:5
-
-
-
-
-
-
16:9
-
-
-
-
-
+
Original Image
+
+
+
+
16:9
+
+
+
+
+
+
1:1
+
+
+
+
+
+
3:2
+
+
+
+
+
+
4:3
+
+
+
+
+
+
8:3
+
+
+
+
+
+
8:5
+
+
+
+
+
+
16:9
+
+
+
+
+
```html
-
+
-
+
-
+
-
+
-
+
-
+
-
+
```
@@ -327,112 +325,112 @@ The class `aspect-ratio-item-fluid` should be used on `aspect-ratio-item` to kee
The class `aspect-ratio-item-vertical-fluid` should be used on `aspect-ratio-item` to keep tall images viewable inside the `aspect-ratio` container. It sets the max-height to be 100%.
-
-
-
1:1
-
-
-
-
-
-
3:2
-
-
-
-
-
-
4:3
-
-
-
-
-
-
8:3
-
-
-
-
-
-
8:5
-
-
-
-
-
-
16:9
-
-
-
-
-
+
+
+
1:1
+
+
+
+
+
+
3:2
+
+
+
+
+
+
4:3
+
+
+
+
+
+
8:3
+
+
+
+
+
+
8:5
+
+
+
+
+
+
16:9
+
+
+
+
+
```html
-
+
-
+
-
+
-
+
-
+
-
+
```
@@ -441,48 +439,48 @@ The class `aspect-ratio-item-vertical-fluid` should be used on `aspect-ratio-ite
The class `aspect-ratio-item-flush` should be used for images that are too narrow and want it to fill the remaining space. It forces the width to be 100.6%.
- The 100.6% width is to account for browser subpixel rendering issues.
+ The 100.6% width is to account for browser subpixel rendering issues.
-
-
-
16:9
-
-
-
-
-
-
16:9
-
-
-
-
-
+
+
+
16:9
+
+
+
+
+
+
16:9
+
+
+
+
+
```html
-
+
-
+
```
@@ -491,48 +489,48 @@ The class `aspect-ratio-item-flush` should be used for images that are too narro
The class `aspect-ratio-item-vertical-flush` should be used for images that are too short and want it to fill the remaining vertical space. It forces the height to be 100.6%.
- The 100.6% height is to account for browser subpixel rendering issues.
+ The 100.6% height is to account for browser subpixel rendering issues.
-
-
-
16:9
-
-
-
-
-
-
16:9
-
-
-
-
-
+
+
+
16:9
+
+
+
+
+
+
16:9
+
+
+
+
+
```html
-
+
-
+
```
@@ -541,26 +539,26 @@ The class `aspect-ratio-item-vertical-flush` should be used for images that are
The class `aspect-ratio-item-center-middle` centers an item horizontally and vertically.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
```html
-
+
```
@@ -569,26 +567,26 @@ The class `aspect-ratio-item-center-middle` centers an item horizontally and ver
The class `aspect-ratio-item-top-center` vertically aligns the item at the top and centers it horizontally.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
```html
-
+
```
@@ -597,26 +595,26 @@ The class `aspect-ratio-item-top-center` vertically aligns the item at the top a
The class `aspect-ratio-item-top-right` aligns the item at the top right corner.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
```html
-
+
```
@@ -625,26 +623,26 @@ The class `aspect-ratio-item-top-right` aligns the item at the top right corner.
The class `aspect-ratio-item-right-middle` aligns an item in the middle vertically and right side horizontally.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
```html
-
+
```
@@ -653,26 +651,26 @@ The class `aspect-ratio-item-right-middle` aligns an item in the middle vertical
The class `aspect-ratio-item-bottom-right` aligns an item at the bottom right corner.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
```html
-
+
```
@@ -681,26 +679,26 @@ The class `aspect-ratio-item-bottom-right` aligns an item at the bottom right co
The class `aspect-ratio-item-bottom-center` aligns an item at the bottom vertically and centers it horizontally.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
```html
-
+
```
@@ -709,26 +707,26 @@ The class `aspect-ratio-item-bottom-center` aligns an item at the bottom vertica
The class `aspect-ratio-item-bottom-left` aligns an item at the bottom left corner.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
```html
-
+
```
@@ -737,25 +735,25 @@ The class `aspect-ratio-item-bottom-left` aligns an item at the bottom left corn
The class `aspect-ratio-item-left-middle` aligns an item on the left horizontally and in the middle vertically.
-
-
-
-
-
-
-
+
+
+
+
+
+
+
```html
-
+
```
diff --git a/packages/clay-core/docs/focus-trap.mdx b/packages/clay-core/docs/focus-trap.mdx
index 2d7e874992..d9a8745884 100644
--- a/packages/clay-core/docs/focus-trap.mdx
+++ b/packages/clay-core/docs/focus-trap.mdx
@@ -15,49 +15,45 @@ Focus Trap is a component that wraps elements in the DOM and prevents focus from
It definitely is used when trying to build accessible components, blocking all interactions outside of it while Focus Trap is active.
- It's the responsibility of the user to add an escape method for the focus
- trap, either with a button or the escape key.
+ It's the responsibility of the user to add an escape method for the focus
+ trap, either with a button or the escape key.
- Don't forget to check
- [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#accordion)
- accessibility pratices for Forms Hierarchy when writting your markup.
+ Don't forget to check
+ [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#accordion) accessibility
+ pratices for Forms Hierarchy when writting your markup.
## Example
-
-
-
Sheet Title
-
- Sheet text should be used for any kind of explanatory text. The
- Sheet Title and Sheet Text are contained inside a sheet-header.
-
-
-
-
Sheet Subtitle
-
-
-
- Sheet Subtitle with Button
-
-
-
-
-
-
-
-
-
Sheet Tertiary Title
-
- Sheet Subtitle and Sheet Tertiary Title are contained inside a
- sheet-section.
-
- Sheet text should be used for any kind of explanatory text. The
- Sheet Title and Sheet Text are contained inside a sheet-header.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Sheet Title
+
+ Sheet text should be used for any kind of explanatory text. The Sheet
+ Title and Sheet Text are contained inside a sheet-header.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```html
-
-
Sheet Title
-
- Sheet text should be used for any kind of explanatory text. The
- Sheet Title and Sheet Text are contained inside a sheet-header.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Sheet Title
+
+ Sheet text should be used for any kind of explanatory text. The Sheet
+ Title and Sheet Text are contained inside a sheet-header.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
## Two Columns
-
-
-
Sheet Title
-
- Sheet text should be used for any kind of explanatory text. The
- Sheet Title and Sheet Text are contained inside a sheet-header.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
Sheet Title
+
+ Sheet text should be used for any kind of explanatory text. The Sheet
+ Title and Sheet Text are contained inside a sheet-header.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```html
-
-
Sheet Title
-
- Sheet text should be used for any kind of explanatory text. The
- Sheet Title and Sheet Text are contained inside a sheet-header.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
Sheet Title
+
+ Sheet text should be used for any kind of explanatory text. The Sheet
+ Title and Sheet Text are contained inside a sheet-header.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -536,366 +511,343 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/forms/'
The `sheet-row` aligns content flush with the sheet borders using negative margins.
- Single origin, extra id beans, eu to go, skinny americano ut
- aftertaste sugar. At americano, viennese variety iced
- grounds, grinder froth and pumpkin spice aromatic. Cultivar
- aged lungo, grounds café au lait, skinny, blue mountain, in
- variety sugar shop roast. Wings, blue mountain affogato
- organic cappuccino java plunger pot. Single shot variety
- pumpkin spice seasonal skinny barista carajillo robust
- cream.
-
-
- Iced, crema, coffee id kopi-luwak coffee variety. Skinny
- extraction, id trifecta qui trifecta grinder. Barista
- robusta arabica breve ut skinny milk beans macchiato
- carajillo espresso. Cultivar single shot brewed, coffee
- steamed to go wings to go cortado. Grinder, siphon coffee
- acerbic espresso cinnamon crema breve.
-
-
- Cultivar single shot brewed, coffee steamed to go wings to
- go cortado. Grinder, siphon coffee acerbic espresso cinnamon
- crema breve.
-
-
- Skinny extraction, id trifecta qui trifecta grinder. Barista
- robusta arabica breve ut skinny milk beans macchiato
- carajillo espresso. Cultivar single shot brewed, coffee
- steamed to go wings to go cortado. Grinder, siphon coffee
- acerbic espresso cinnamon crema breve.
-
-
- At americano, viennese variety iced grounds, grinder froth
- and pumpkin spice aromatic. Cultivar aged lungo, grounds
- café au lait, skinny, blue mountain, in variety sugar shop
- roast. Wings, blue mountain affogato organic cappuccino java
- plunger pot. Single shot variety pumpkin spice seasonal
- skinny barista carajillo robust cream.
-
+ Single origin, extra id beans, eu to go, skinny americano ut
+ aftertaste sugar. At americano, viennese variety iced grounds, grinder
+ froth and pumpkin spice aromatic. Cultivar aged lungo, grounds café au
+ lait, skinny, blue mountain, in variety sugar shop roast. Wings, blue
+ mountain affogato organic cappuccino java plunger pot. Single shot
+ variety pumpkin spice seasonal skinny barista carajillo robust cream.
+
+
+ Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction,
+ id trifecta qui trifecta grinder. Barista robusta arabica breve ut
+ skinny milk beans macchiato carajillo espresso. Cultivar single shot
+ brewed, coffee steamed to go wings to go cortado. Grinder, siphon
+ coffee acerbic espresso cinnamon crema breve.
+
+
+ Cultivar single shot brewed, coffee steamed to go wings to go cortado.
+ Grinder, siphon coffee acerbic espresso cinnamon crema breve.
+
+
+ Skinny extraction, id trifecta qui trifecta grinder. Barista robusta
+ arabica breve ut skinny milk beans macchiato carajillo espresso.
+ Cultivar single shot brewed, coffee steamed to go wings to go cortado.
+ Grinder, siphon coffee acerbic espresso cinnamon crema breve.
+
+
+ At americano, viennese variety iced grounds, grinder froth and pumpkin
+ spice aromatic. Cultivar aged lungo, grounds café au lait, skinny,
+ blue mountain, in variety sugar shop roast. Wings, blue mountain
+ affogato organic cappuccino java plunger pot. Single shot variety
+ pumpkin spice seasonal skinny barista carajillo robust cream.
+
- Single origin, extra id beans, eu to go, skinny americano ut
- aftertaste sugar. At americano, viennese variety iced grounds,
- grinder froth and pumpkin spice aromatic. Cultivar aged lungo,
- grounds café au lait, skinny, blue mountain, in variety sugar
- shop roast. Wings, blue mountain affogato organic cappuccino
- java plunger pot. Single shot variety pumpkin spice seasonal
- skinny barista carajillo robust cream.
-
-
- Iced, crema, coffee id kopi-luwak coffee variety. Skinny
- extraction, id trifecta qui trifecta grinder. Barista robusta
- arabica breve ut skinny milk beans macchiato carajillo espresso.
- Cultivar single shot brewed, coffee steamed to go wings to go
- cortado. Grinder, siphon coffee acerbic espresso cinnamon crema
- breve.
-
-
- Cultivar single shot brewed, coffee steamed to go wings to go
- cortado. Grinder, siphon coffee acerbic espresso cinnamon crema
- breve.
-
-
- Skinny extraction, id trifecta qui trifecta grinder. Barista
- robusta arabica breve ut skinny milk beans macchiato carajillo
- espresso. Cultivar single shot brewed, coffee steamed to go
- wings to go cortado. Grinder, siphon coffee acerbic espresso
- cinnamon crema breve.
-
-
- At americano, viennese variety iced grounds, grinder froth and
- pumpkin spice aromatic. Cultivar aged lungo, grounds café au
- lait, skinny, blue mountain, in variety sugar shop roast. Wings,
- blue mountain affogato organic cappuccino java plunger pot.
- Single shot variety pumpkin spice seasonal skinny barista
- carajillo robust cream.
-
+ Single origin, extra id beans, eu to go, skinny americano ut aftertaste
+ sugar. At americano, viennese variety iced grounds, grinder froth and
+ pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait,
+ skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain
+ affogato organic cappuccino java plunger pot. Single shot variety
+ pumpkin spice seasonal skinny barista carajillo robust cream.
+
+
+ Iced, crema, coffee id kopi-luwak coffee variety. Skinny extraction, id
+ trifecta qui trifecta grinder. Barista robusta arabica breve ut skinny
+ milk beans macchiato carajillo espresso. Cultivar single shot brewed,
+ coffee steamed to go wings to go cortado. Grinder, siphon coffee acerbic
+ espresso cinnamon crema breve.
+
+
+ Cultivar single shot brewed, coffee steamed to go wings to go cortado.
+ Grinder, siphon coffee acerbic espresso cinnamon crema breve.
+
+
+ Skinny extraction, id trifecta qui trifecta grinder. Barista robusta
+ arabica breve ut skinny milk beans macchiato carajillo espresso.
+ Cultivar single shot brewed, coffee steamed to go wings to go cortado.
+ Grinder, siphon coffee acerbic espresso cinnamon crema breve.
+
+
+ At americano, viennese variety iced grounds, grinder froth and pumpkin
+ spice aromatic. Cultivar aged lungo, grounds café au lait, skinny, blue
+ mountain, in variety sugar shop roast. Wings, blue mountain affogato
+ organic cappuccino java plunger pot. Single shot variety pumpkin spice
+ seasonal skinny barista carajillo robust cream.
+
+
+
```
@@ -904,104 +856,80 @@ The `sheet-row` aligns content flush with the sheet borders using negative margi
Use `autofit` utilities with `component-title` in `sheet-title` to vertically align the text with small sized buttons (32px tall). This pattern allows long text to break to new line while keeping the button(s) text centered on the first line of text.
```
@@ -1010,216 +938,160 @@ Use `autofit` utilities with `component-title` in `sheet-title` to vertically al
Nest `autofit` utilities with `component-title` in `sheet-subtitle` to vertically align the text with small sized buttons (32px tall). This pattern, from the Lexicon specs, aligns the text to the bottom of the button(s) when there is only one line of text. Multiple lines of text aligns the text to the top of the button(s).
-
-
-
Sheet Subtitle
-
-
-
-
- One Line Subtitle
-
-
-
-
- Add
-
-
-
-
-
-
-
```
@@ -1232,202 +1104,186 @@ The modifier class `sheet-multiple-form` on `sheet` provides alternative sizing
This pattern is used in form scenarios, usually to display a form, multiple forms or a combination of single/multiple forms and one or several sheets to display information. See Lexicon.
+ Sheet text should be used for any kind of explanatory text. The Sheet
+ Title and Sheet Text are contained inside a sheet-section.
+
+
+
+
Sheet Subtitle 01
+
+
+
+
+
+
+
Sheet Subtitle 02
+
+
+
+
+
+
+
+
+
+
+
```
@@ -1436,705 +1292,643 @@ This pattern is used in form scenarios, usually to display a form, multiple form
This is an example of the `sheet-multiple-form` modifier with `card-page card-page-equal-height` used to layout the Commerce Product Screen.
-
-
-
-
-
-
-
-
-
-
-
-
Units Sold
-
- 128
- / Sales
- $459k
-
-
27% last 30 days
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Units Sold
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Units Sold
-
- 128
- / Sales
- $459k
-
-
27% last 30 days
-
-
-
-
-
-
-
-
-
-
SEO
-
-
-
-
-
-
- https://www.your-domain.com
-
-
-
-
- /p/
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Title length should
- be under 60
- characters
-
- Optimal title length Google
- typically displays the first 50-60
- characters of a title tag. If you
- keep your titles under 60
- characters, our research suggest...
-
+ Optimal title length Google typically displays the first
+ 50-60 characters of a title tag. If you keep your titles
+ under 60 characters, our research suggest...
+
+
+
+
+
+
+
+
+
+
```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
SEO
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
SEO
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -2145,432 +1939,387 @@ The modifier `sheet-dataset-content` should be added to `sheet` for sheets conta
A common usage of the `sheet` is to present a dataset display inside. This case benefits of the `sheet-title` and the content free space to place elements such as the dataset display. See Lexicon.
-
-
-
-
-
-
- col1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No page templates yet
-
-
-
-
- Page Templates allow you to create pages faster with
- reusable elements.
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ col1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No page templates yet
+
+
+
+ Page Templates allow you to create pages faster with reusable
+ elements.
+
+
+
+
+
+
+
+
+
```html
-
-
-
-
-
- col1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- No page templates yet
-
-
-
- Page Templates allow you to create pages faster with
- reusable elements.
-
-
-
-
-
-
-
-
+
+
+
+
+
+ col1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No page templates yet
+
+
+
+ Page Templates allow you to create pages faster with reusable
+ elements.
+
+
+
+
+
+
+
+
```
diff --git a/packages/clay-core/docs/heading.mdx b/packages/clay-core/docs/heading.mdx
index 7328d895a9..988a548282 100644
--- a/packages/clay-core/docs/heading.mdx
+++ b/packages/clay-core/docs/heading.mdx
@@ -20,33 +20,31 @@ By default, the semantic of the heading level is level 1 in which the component
import {Provider, Heading} from '@clayui/core';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
+
+ );
}
```
@@ -58,32 +56,30 @@ In the same way, Heading component provides some styles depending on the `weight
import {Provider, Heading} from '@clayui/core';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
- Heading with ligther weight
-
-
- Heading with light weight
-
-
- Heading with normal weight
-
-
- Heading with semi-bold weight
-
-
- Heading with bold weight
-
-
- Heading with bolder weight
-
-
-
- );
+ return (
+
+
+
+ Heading with ligther weight
+
+
+ Heading with light weight
+
+
+ Heading with normal weight
+
+
+ Heading with semi-bold weight
+
+
+ Heading with bold weight
+
+
+ Heading with bolder weight
+
+
+
+ );
}
```
diff --git a/packages/clay-core/docs/icon-selector.mdx b/packages/clay-core/docs/icon-selector.mdx
index 4df0dfa97a..33a56afc79 100644
--- a/packages/clay-core/docs/icon-selector.mdx
+++ b/packages/clay-core/docs/icon-selector.mdx
@@ -15,18 +15,18 @@ Icon Selector is a field type that allows users to choose an icon from a predefi
## Example
```jsx preview
-import {IconSelector} from '@clayui/core';
+import {Provider, IconSelector} from '@clayui/core';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
const spritemap = '/icons.svg';
export default function App() {
- return (
-
+
+ );
}
```
@@ -93,57 +91,57 @@ For the `` component you can control the `selectedLocaleId` an
If you just need to set the initial state of the `selectedLocaleId`, use the `defaultSelectedLocaleId` property which is appropriate for that use case. In case `defaultSelectedLocaleId` is not defined, it will take the first locale as the default locale.
- Info
- The selectedLocaleId property is equivalent
- to selectedKey in the Picker, which is represented
- by the key property configured in the
- Option
- component, so the component can identify which value is selected and
- which should be shown in the trigger.
+ Info
+ The selectedLocaleId property is equivalent
+ to selectedKey in the Picker, which is represented
+ by the key property configured in the
+ Option
+ component, so the component can identify which value is selected and which
+ should be shown in the trigger.
+
+ );
}
```
This variant shows translation status labels next to each translation language to indicate the translation status for the content. The states are described below:
-- **Default**: Indentifies the default language. This default language is set with the property `defaultLocaleId`. If there is no `defaultLocaleId` it will take the first of the locales.
-- **Translated**: Used when all fields have been translated.
-- **Not Translated**: Used when none of the localizable fields have been translated.
-- **Translating x/x**: Used when at least one of the localizable fields of a content item has been translated. This label indicates the number of fields translated compared to the total number of fields.
+- **Default**: Indentifies the default language. This default language is set with the property `defaultLocaleId`. If there is no `defaultLocaleId` it will take the first of the locales.
+- **Translated**: Used when all fields have been translated.
+- **Not Translated**: Used when none of the localizable fields have been translated.
+- **Translating x/x**: Used when at least one of the localizable fields of a content item has been translated. This label indicates the number of fields translated compared to the total number of fields.
## Trigger Options
@@ -218,44 +214,42 @@ You can customize the Language Picker trigger to display only the icon by settin
import {Provider, LanguagePicker} from '@clayui/core';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+ );
}
```
@@ -267,43 +261,41 @@ You can reduce the size of the Language Picker trigger by setting the `small` pr
import {Provider, LanguagePicker} from '@clayui/core';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+ );
}
```
diff --git a/packages/clay-core/docs/menubar.mdx b/packages/clay-core/docs/menubar.mdx
index 0782e11230..5bc3359ae6 100644
--- a/packages/clay-core/docs/menubar.mdx
+++ b/packages/clay-core/docs/menubar.mdx
@@ -9,1077 +9,969 @@ lexiconDefinition: 'https://liferay.design/lexicon/core-components/navigation/ve
A pattern for collapsing vertical navigations, collapses at 767px. For vertical navigations that don't collapse use [Nav Stacked](/docs/components/nav/markup#css-nav-stacked) or [Nav Nested](/docs/components/nav/markup#css-nav-nested).
-
+
```html
```
### Menubar Vertical Expand Md with Buttons
-
+
```html
```
@@ -1088,590 +980,514 @@ A pattern for collapsing vertical navigations, collapses at 767px. For vertical
Collapses at 991px.
+
+ );
}
```
@@ -55,7 +50,7 @@ There are two different ways to create the highlighted area for a component, thi
```jsx
- Button
+ Button
```
@@ -63,12 +58,12 @@ Another option is for cases where it is not possible to define the component as
```jsx
- {(ref) => (
- <>
- Button A
- Button B
-
- )}
+ {(ref) => (
+ <>
+ Button A
+ Button B
+
+ )}
```
@@ -81,22 +76,22 @@ const logo = document.body.querySelector('.logo');
const {height, width, x, y} = logo.getBoundingClientRect();
;
// or
const [bounds, setBounds] = useState({
- height: 0,
- width: 0,
- x: 0,
- y: 0,
+ height: 0,
+ width: 0,
+ x: 0,
+ y: 0,
});
useEffect(() => {}, []);
diff --git a/packages/clay-core/docs/picker.mdx b/packages/clay-core/docs/picker.mdx
index bfb8e4d4bc..1f3c2d4806 100644
--- a/packages/clay-core/docs/picker.mdx
+++ b/packages/clay-core/docs/picker.mdx
@@ -6,7 +6,7 @@ packageStatus: 'Beta'
packageUse: "import {Option, Picker} from '@clayui/core';"
storybookPath: 'design-system-components-picker'
packageTypes:
- ['clay-core/src/picker/Picker.tsx', 'clay-core/src/picker/Option.tsx']
+ ['clay-core/src/picker/Picker.tsx', 'clay-core/src/picker/Option.tsx']
---
## Example
@@ -16,41 +16,39 @@ import {Provider, Option, Picker} from '@clayui/core';
import Form from '@clayui/form';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
-
-
-
- {(item) => }
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+ {(item) => }
+
+
+
+
+
+ );
}
```
@@ -70,17 +68,17 @@ Static content is when the `` options do not change during the lifecyc
```jsx
-
-
-
-
-
-
-
+
+
+
+
+
+
+
```
@@ -90,16 +88,16 @@ Unlike static content, dynamic content is when the options can change during the
```jsx
-
-
- {(item) => }
-
+
+
+ {(item) => }
+
```
@@ -112,46 +110,47 @@ For the `` component you can control the `selectedKey` and `active` st
If you just need to set the initial state of the `selectedKey`, use the `defaultSelectedKey` property which is appropriate for that use case.
- Info
- The selectedKey property is represented
- by the key property configured in the{' '}
- Option component, so the component can
- identify which value is selected and which should be shown in the trigger.
-
- When the content rendering is dynamic and the data has
- id
- property defined, the component uses
- id
- instead of key.
+ Info
+ The selectedKey property is represented
+ by the key property configured in the
+ Option
+ component, so the component can identify which value is selected and which
+ should be shown in the trigger.
+
+ When the content rendering is dynamic and the data has
+ id
+ property defined, the component uses
+ id
+ instead of key.
```jsx
function Example() {
- // Controlled
- const [active, setActive] = useState(false);
-
- // Controlled
- const [selectedKey, setSelectedKey] = useState('');
-
- return (
-
-
-
-
-
-
-
-
- );
+ // Controlled
+ const [active, setActive] = useState(false);
+
+ // Controlled
+ const [selectedKey, setSelectedKey] = useState('');
+
+ return (
+
+
+
+
+
+
+
+
+ );
}
```
@@ -163,44 +162,41 @@ The composition allows you to customize the component or add new features. See s
```jsx preview
import {Provider, Option, Picker, Icon} from '@clayui/core';
-import {useId} from '@clayui/shared';
import Form from '@clayui/form';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
const Trigger = React.forwardRef(({children, ...otherProps}, ref) => (
-
+
+ );
}
```
@@ -341,41 +317,39 @@ import {Provider, Option, Picker} from '@clayui/core';
import Form from '@clayui/form';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
-
-
-
- {(item) => }
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+ {(item) => }
+
+
+
+
+
+ );
}
```
@@ -384,21 +358,21 @@ export default function App() {
Native select for mobile devices offers a better experience compared to Picker in some cases. The Picker offers the possibility to render using the native selector of the browser of the device when it is detected that it is on a mobile device, by default this property is disabled but it can be enabled by setting the `native` property to `true`.
- Warning
- If the content of the Option component is not simple text, for it to work correctly
- set the property textValue to ensure that
- the component knows what the option label is.
+ Warning
+ If the content of the Option component is not simple text, for it to work correctly
+ set the property textValue to ensure that
+ the component knows what the option label is.
```jsx
-
-
-
-
-
-
+
+
+
+
+
+
```
diff --git a/packages/clay-core/docs/reduced-motion.mdx b/packages/clay-core/docs/reduced-motion.mdx
index cf77ed5760..bc103420aa 100644
--- a/packages/clay-core/docs/reduced-motion.mdx
+++ b/packages/clay-core/docs/reduced-motion.mdx
@@ -14,15 +14,15 @@ Setting the motion reduction of animations can be done in two different ways in
To remove transition from components in React, you need to declare the [`Provider`](/docs/components/provider) component at the root of your application and set the `reducedMotion` property to whichever option you want.
-- `user`: Respect user's device setting.
-- `always`: Enforce reduced motion.
-- `never`: Don't reduce motion.
+- `user`: Respect user's device setting.
+- `always`: Enforce reduced motion.
+- `never`: Don't reduce motion.
```jsx
import {Provider} from '@clayui/core';
-
+ ;
```
diff --git a/packages/clay-core/docs/sidebar.mdx b/packages/clay-core/docs/sidebar.mdx
index 40c01c97b6..f5aed385c5 100644
--- a/packages/clay-core/docs/sidebar.mdx
+++ b/packages/clay-core/docs/sidebar.mdx
@@ -25,986 +25,902 @@ Is composed by:
## Size
- You can use a comma to
- enter tags.
- ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.
-
- In organic dripper so, body, robust medium
- pumpkin spice cup, in aged dripper latte
- extra cup white. And viennese redeye
- carajillo, beans, mug viennese, carajillo id
- breve decaffeinated americano crema chicory
- whipped arabica variety aged robusta.
- Affogato lungo eu, cultivar at, aged breve
- and blue mountain roast breve americano
- aged. Sugar acerbic sweet variety aged café
- au lait chicory, java, single shot
- percolator aromatic brewed wings, a, sugar,
- body, aftertaste organic barista espresso
- dripper to go. Flavour to go strong steamed
- mazagran trifecta decaffeinated percolator
- crema, aged americano rich chicory
- frappuccino foam white.
-
- Flavour filter fair trade kopi-luwak robusta
- viennese, trifecta grinder, grounds lungo
- beans, half and half cup steamed cappuccino
- cinnamon. Percolator, extra, strong, breve,
- french press to go aromatic half and half
- aroma barista caramelization ut froth breve
- spoon redeye to go skinny rich skinny spoon.
- As turkish est filter foam con panna,
- cinnamon, aroma grounds cup whipped cultivar
- extra. Latte bar crema cultivar espresso
- pumpkin spice viennese, body viennese milk
- variety dripper, spoon, blue mountain
- robusta cultivar et spoon. Macchiato id eu
- brewed, and mazagran cinnamon so wings,
- doppio mocha froth blue mountain froth half
- and half iced to go whipped single shot.
-
- Eu ristretto ut sugar rich saucer milk
- aftertaste, froth dark, cultivar blue
- mountain as coffee cappuccino. Saucer
- grounds mocha, aroma, half and half coffee
- eu robusta roast, doppio skinny galão,
- extraction, frappuccino aromatic breve crema
- frappuccino aroma. Froth half and half so
- java, grounds half and half, macchiato at
- est sugar mug redeye, strong, cream seasonal
- qui doppio robusta. Wings, at, cup dark, a,
- breve french press decaffeinated acerbic,
- black extra, and, saucer barista rich
- seasonal barista blue mountain. Roast
- mazagran a and id mug in est trifecta
- pumpkin spice coffee and mug trifecta, ut
- breve, mug frappuccino mug, breve mocha qui
- aged aftertaste.
-
+ You can use a comma to enter tags.
+ ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.
+
+ In organic dripper so, body, robust medium pumpkin spice cup,
+ in aged dripper latte extra cup white. And viennese redeye
+ carajillo, beans, mug viennese, carajillo id breve
+ decaffeinated americano crema chicory whipped arabica variety
+ aged robusta. Affogato lungo eu, cultivar at, aged breve and
+ blue mountain roast breve americano aged. Sugar acerbic sweet
+ variety aged café au lait chicory, java, single shot
+ percolator aromatic brewed wings, a, sugar, body, aftertaste
+ organic barista espresso dripper to go. Flavour to go strong
+ steamed mazagran trifecta decaffeinated percolator crema, aged
+ americano rich chicory frappuccino foam white.
+
+ Flavour filter fair trade kopi-luwak robusta viennese,
+ trifecta grinder, grounds lungo beans, half and half cup
+ steamed cappuccino cinnamon. Percolator, extra, strong, breve,
+ french press to go aromatic half and half aroma barista
+ caramelization ut froth breve spoon redeye to go skinny rich
+ skinny spoon. As turkish est filter foam con panna, cinnamon,
+ aroma grounds cup whipped cultivar extra. Latte bar crema
+ cultivar espresso pumpkin spice viennese, body viennese milk
+ variety dripper, spoon, blue mountain robusta cultivar et
+ spoon. Macchiato id eu brewed, and mazagran cinnamon so wings,
+ doppio mocha froth blue mountain froth half and half iced to
+ go whipped single shot.
+
+ Eu ristretto ut sugar rich saucer milk aftertaste, froth dark,
+ cultivar blue mountain as coffee cappuccino. Saucer grounds
+ mocha, aroma, half and half coffee eu robusta roast, doppio
+ skinny galão, extraction, frappuccino aromatic breve crema
+ frappuccino aroma. Froth half and half so java, grounds half
+ and half, macchiato at est sugar mug redeye, strong, cream
+ seasonal qui doppio robusta. Wings, at, cup dark, a, breve
+ french press decaffeinated acerbic, black extra, and, saucer
+ barista rich seasonal barista blue mountain. Roast mazagran a
+ and id mug in est trifecta pumpkin spice coffee and mug
+ trifecta, ut breve, mug frappuccino mug, breve mocha qui aged
+ aftertaste.
+
+
+
+
+
+
+ Fieldsets
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
## Variations
@@ -1014,397 +930,358 @@ Is composed by:
Just add `sidebar-light` class on the same element that you are using `sidebar`.
```html
@@ -1425,7 +1302,7 @@ Just add `sidebar-light` class on the same element that you are using `sidebar`.
role="presentation"
>
@@ -1448,7 +1325,7 @@ Just add `sidebar-light` class on the same element that you are using `sidebar`.
role="presentation"
>
@@ -1460,7 +1337,7 @@ Just add `sidebar-light` class on the same element that you are using `sidebar`.
focusable="false"
role="presentation"
>
-
+
@@ -1493,7 +1370,7 @@ Just add `sidebar-light` class on the same element that you are using `sidebar`.
role="presentation"
>
@@ -1536,7 +1413,7 @@ Just add `sidebar-light` class on the same element that you are using `sidebar`.
focusable="false"
role="presentation"
>
-
+
@@ -1689,7 +1566,7 @@ Just add `sidebar-light` class on the same element that you are using `sidebar`.
role="presentation"
>
@@ -1700,7 +1577,7 @@ Just add `sidebar-light` class on the same element that you are using `sidebar`.
role="presentation"
>
@@ -1754,7 +1631,7 @@ Just add `sidebar-light` class on the same element that you are using `sidebar`.
role="presentation"
>
@@ -1794,130 +1671,120 @@ Just add `sidebar-light` class on the same element that you are using `sidebar`.
Just add `sidebar-dark` class on the same element that you are using `sidebar`.
```
@@ -1926,129 +1793,119 @@ Just add `sidebar-dark` class on the same element that you are using `sidebar`.
Just add `sidebar-dark-l2` class on the same element that you are using `sidebar`.
+
+ );
}
```
@@ -106,9 +104,9 @@ Table allows the rendering of static and dynamic content for data-oriented and d
The component covers the [W3C accessibility](https://www.w3.org/WAI/ARIA) patterns for the [simplest table implementation](https://www.w3.org/WAI/tutorials/tables/) and also the [treegrid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/examples/treegrid-1/) for when [nested row](#nested-row) is used without requiring the developer to have to configure something extremely complex.
- Warning
- To use the new Table implementation it is necessary to consume the component
- using the package @clayui/core.
+ Warning
+ To use the new Table implementation it is necessary to consume the component using
+ the package @clayui/core.
## Content
@@ -121,21 +119,21 @@ Static content is when the `
` options do not change during the lifecycl
```jsx
-
- Name
- Type
-
-
-
-
- Games
- File Folder
-
-
- Program Files
- File Folder
-
-
+
+ Name
+ Type
+
+
+
+
+ Games
+ File Folder
+
+
+ Program Files
+ File Folder
+
+
```
@@ -145,82 +143,82 @@ Unlike static content, dynamic content is when the options can change during the
```jsx
- Warning
- When implementing ClayTable from a React application, the icons may not render.
- The
- Application Provider
- method will make the icons available for use.
+ Warning
+ When implementing ClayTable from a React application, the icons may not render.
+ The
+ Application Provider
+ method will make the icons available for use.
```
@@ -231,77 +229,75 @@ Column sorting is implemented OOTB so the developer doesn't need to worry about
It is also possible to implement your own logic on the client side when your data is predictable, check out the pseudocode.
- Info
- Column sorting is only enabled for columns that contain the
- sortable
- API defined.
+ Info
+ Column sorting is only enabled for columns that contain the
+ sortable
+ API defined.
+ );
}
```
@@ -354,79 +350,70 @@ Implementing nested row allows you to render a table as a tree view. It is not n
When using the nested row pattern, Clay automatically changes the accessibility behavior to use the [treegrid](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/examples/treegrid-1/) recommendation instead of the default behavior.
- Limitation
- The unique id of a row does not work properly when configured via
- key
- in the Row component property
- to deal with the nodes expandability, it is necessary that the
- id
- key is defined in your row data to use as unique id.
+ Limitation
+ The unique id of a row does not work properly when configured via
+ key
+ in the Row component property to
+ deal with the nodes expandability, it is necessary that the
+ id
+ key is defined in your row data to use as unique id.
+
+ );
}
```
@@ -434,33 +421,33 @@ export default function App() {
Expanding nodes is done OOTB in the component but it is also possible to control the state to modify behaviors if necessary or use it to save a session to improve the user experience.
-
- Warning
- If your data structure does not have a key property
- id
- that is used as a unique identifier for each item, you need to configure
- which key will be used to identify the item by using the
- itemIdKey
- API in the Table component.
+
+ Warning
+ If your data structure does not have a key property
+ id
+ that is used as a unique identifier for each item, you need to configure
+ which key will be used to identify the item by using the
+ itemIdKey
+ API in the Table component.
;
```
@@ -468,40 +455,40 @@ const [expandedKeys, setExpandedKeys] = useState(new Set());
When the tree is very large with a lot of data on a single node, loading the data asynchronously is essential to reduce the initial data payload and memory space. Table supports asynchronous node loading when the user expands a node.
-- When returning `void`, `null` or `undefined` the Table will do nothing.
-- When returning the `items` will add to the tree.
+- When returning `void`, `null` or `undefined` the Table will do nothing.
+- When returning the `items` will add to the tree.
- Warning
- If you have an error in the asynchronous call of the
- onLoadMore
- method, only the suppression is done and an error is thrown on the console.
+ Warning
+ If you have an error in the asynchronous call of the
+ onLoadMore
+ method, only the suppression is done and an error is thrown on the console.
When adding a new asynchronous item to the tree, the `onItemsChange` method is respectively called to update the tree with a new value if the `items` prop is controlled.
```jsx
```
diff --git a/packages/clay-core/docs/text.mdx b/packages/clay-core/docs/text.mdx
index 925ce9bcc4..5d856e32ac 100644
--- a/packages/clay-core/docs/text.mdx
+++ b/packages/clay-core/docs/text.mdx
@@ -20,46 +20,44 @@ The same way as [Heading](/docs/components/heading), Text provides its own font
import {Text} from '@clayui/core';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
- Text Size Level 11
-
-
- Text Size Level 10
-
-
- Text Size Level 9
-
-
- Text Size Level 8
-
-
- Text Size Level 7
-
-
- Text Size Level 6
-
-
- Text Size Level 5
-
-
- Text Size Level 4
-
-
- Text Size Level 3
-
-
- Text Size Level 2
-
-
- Text Size Level 1
-
-
- );
+ return (
+
+
+ Text Size Level 11
+
+
+ Text Size Level 10
+
+
+ Text Size Level 9
+
+
+ Text Size Level 8
+
+
+ Text Size Level 7
+
+
+ Text Size Level 6
+
+
+ Text Size Level 5
+
+
+ Text Size Level 4
+
+
+ Text Size Level 3
+
+
+ Text Size Level 2
+
+
+ Text Size Level 1
+
+
+ );
}
```
@@ -85,22 +83,19 @@ Likewise, Text provides a new property that allows you change the font weight of
import {Text} from '@clayui/core';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
- Single origin, extra id beans, eu to go, skinny americano ut
- aftertas te sugar. At americano, viennese variety iced grounds,
- grinder froth and pumpkin spice aromatic. Cultivar aged lungo,
- grounds café au lait, skinny, blue mountain, in variety sugar
- shop roast. Wings, blue mountain affogato organic cappuccino
- java plunger pot. Single shot variety pumpkin spice seasonal
- skinny barista carajillo robust cream.
-
-
- );
+ return (
+
+
+ Single origin, extra id beans, eu to go, skinny americano ut aftertas te
+ sugar. At americano, viennese variety iced grounds, grinder froth and
+ pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait,
+ skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain
+ affogato organic cappuccino java plunger pot. Single shot variety
+ pumpkin spice seasonal skinny barista carajillo robust cream.
+
+
+ );
}
```
@@ -112,22 +107,19 @@ If you want to shortening Text content because it doesn't fit the layout correct
import {Text} from '@clayui/core';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
- Single origin, extra id beans, eu to go, skinny americano ut
- aftertas te sugar. At americano, viennese variety iced grounds,
- grinder froth and pumpkin spice aromatic. Cultivar aged lungo,
- grounds café au lait, skinny, blue mountain, in variety sugar
- shop roast. Wings, blue mountain affogato organic cappuccino
- java plunger pot. Single shot variety pumpkin spice seasonal
- skinny barista carajillo robust cream.
-
-
- );
+ return (
+
+
+ Single origin, extra id beans, eu to go, skinny americano ut aftertas te
+ sugar. At americano, viennese variety iced grounds, grinder froth and
+ pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait,
+ skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain
+ affogato organic cappuccino java plunger pot. Single shot variety
+ pumpkin spice seasonal skinny barista carajillo robust cream.
+
+
+ );
}
```
@@ -139,22 +131,19 @@ Text provides a property which sets a font whose letters and characters each occ
import {Text} from '@clayui/core';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
- Single origin, extra id beans, eu to go, skinny americano ut
- aftertas te sugar. At americano, viennese variety iced grounds,
- grinder froth and pumpkin spice aromatic. Cultivar aged lungo,
- grounds café au lait, skinny, blue mountain, in variety sugar
- shop roast. Wings, blue mountain affogato organic cappuccino
- java plunger pot. Single shot variety pumpkin spice seasonal
- skinny barista carajillo robust cream.
-
-
- );
+ return (
+
+
+ Single origin, extra id beans, eu to go, skinny americano ut aftertas te
+ sugar. At americano, viennese variety iced grounds, grinder froth and
+ pumpkin spice aromatic. Cultivar aged lungo, grounds café au lait,
+ skinny, blue mountain, in variety sugar shop roast. Wings, blue mountain
+ affogato organic cappuccino java plunger pot. Single shot variety
+ pumpkin spice seasonal skinny barista carajillo robust cream.
+
+
+ );
}
```
@@ -166,34 +155,32 @@ Text has the ability to apply different `color` fonts giving emphasis to the tex
import {Text} from '@clayui/core';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
+ );
}
```
@@ -205,31 +192,29 @@ As well as [Heading](/docs/components/heading), Text provides its own font weigh
import {Text} from '@clayui/core';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
- Text with ligther weight
-
-
- Text with light weight
-
-
- Text with normal weight
-
-
- Text with semi-bold weight
-
-
- Text with bold weight
-
-
- Text with bolder weight
-
-
- );
+ return (
+
+
+ Text with ligther weight
+
+
+ Text with light weight
+
+
+ Text with normal weight
+
+
+ Text with semi-bold weight
+
+
+ Text with bold weight
+
+
+ Text with bolder weight
+
+
+ );
}
```
@@ -238,16 +223,14 @@ export default function App() {
The `` component adds a highlight to the text characters that match the value that can be entered by the user, for example can be used in an Autocomplete component.
```jsx preview
-import {Text} from '@clayui/core';
+import {TextHighlight} from '@clayui/core';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
- Rick Sanchez
-
- );
+ return (
+
+ Rick Sanchez
+
+ );
}
```
diff --git a/packages/clay-core/docs/timelines.mdx b/packages/clay-core/docs/timelines.mdx
index d9feac88b7..15ab040ca3 100644
--- a/packages/clay-core/docs/timelines.mdx
+++ b/packages/clay-core/docs/timelines.mdx
@@ -11,200 +11,188 @@ The icon can be any size as long as it is wrapped inside `timeline-increment`. F
## Default
- In organic dripper so, body, robust medium pumpkin spice
- cup, in aged dripper latte extra cup white. And viennese
- redeye carajillo, beans, mug viennese, carajillo id
- breve decaffeinated americano crema chicory whipped
- arabica variety aged robusta. Affogato lungo eu,
- cultivar at, aged breve and blue mountain roast breve
- americano aged. Sugar acerbic sweet variety aged café au
- lait chicory, java, single shot percolator aromatic
- brewed wings, a, sugar, body, aftertaste organic barista
- espresso dripper to go. Flavour to go strong steamed
- mazagran trifecta decaffeinated percolator crema, aged
- americano rich chicory frappuccino foam white.
-
- In organic dripper so, body, robust medium pumpkin spice
- cup, in aged dripper latte extra cup white. And viennese
- redeye carajillo, beans, mug viennese, carajillo id
- breve decaffeinated americano crema chicory whipped
- arabica variety aged robusta. Affogato lungo eu,
- cultivar at, aged breve and blue mountain roast breve
- americano aged. Sugar acerbic sweet variety aged café au
- lait chicory, java, single shot percolator aromatic
- brewed wings, a, sugar, body, aftertaste organic barista
- espresso dripper to go. Flavour to go strong steamed
- mazagran trifecta decaffeinated percolator crema, aged
- americano rich chicory frappuccino foam white.
-
-
-
-
-
-
-
-
-
-
- The icon can be any size as long as it is wrapped inside
- timeline-increment. For larger icons, the spacing between
- the content and label must be adjusted to accomodate it. The
- spacing can be adjusted by modifying the $timeline-spacing
- sass variable, or manually overriding in your css.
-
+ In organic dripper so, body, robust medium pumpkin spice cup, in
+ aged dripper latte extra cup white. And viennese redeye carajillo,
+ beans, mug viennese, carajillo id breve decaffeinated americano
+ crema chicory whipped arabica variety aged robusta. Affogato lungo
+ eu, cultivar at, aged breve and blue mountain roast breve americano
+ aged. Sugar acerbic sweet variety aged café au lait chicory, java,
+ single shot percolator aromatic brewed wings, a, sugar, body,
+ aftertaste organic barista espresso dripper to go. Flavour to go
+ strong steamed mazagran trifecta decaffeinated percolator crema,
+ aged americano rich chicory frappuccino foam white.
+
+ In organic dripper so, body, robust medium pumpkin spice cup, in
+ aged dripper latte extra cup white. And viennese redeye carajillo,
+ beans, mug viennese, carajillo id breve decaffeinated americano
+ crema chicory whipped arabica variety aged robusta. Affogato lungo
+ eu, cultivar at, aged breve and blue mountain roast breve americano
+ aged. Sugar acerbic sweet variety aged café au lait chicory, java,
+ single shot percolator aromatic brewed wings, a, sugar, body,
+ aftertaste organic barista espresso dripper to go. Flavour to go
+ strong steamed mazagran trifecta decaffeinated percolator crema,
+ aged americano rich chicory frappuccino foam white.
+
+
+
+
+
+
+
+
+
+
+ The icon can be any size as long as it is wrapped inside
+ timeline-increment. For larger icons, the spacing between the content
+ and label must be adjusted to accomodate it. The spacing can be
+ adjusted by modifying the $timeline-spacing sass variable, or manually
+ overriding in your css.
+
- In organic dripper so, body, robust medium pumpkin spice
- cup, in aged dripper latte extra cup white. And viennese
- redeye carajillo, beans, mug viennese, carajillo id breve
- decaffeinated americano crema chicory whipped arabica
- variety aged robusta. Affogato lungo eu, cultivar at, aged
- breve and blue mountain roast breve americano aged. Sugar
- acerbic sweet variety aged café au lait chicory, java,
- single shot percolator aromatic brewed wings, a, sugar,
- body, aftertaste organic barista espresso dripper to go.
- Flavour to go strong steamed mazagran trifecta decaffeinated
- percolator crema, aged americano rich chicory frappuccino
- foam white.
-
- In organic dripper so, body, robust medium pumpkin spice
- cup, in aged dripper latte extra cup white. And viennese
- redeye carajillo, beans, mug viennese, carajillo id breve
- decaffeinated americano crema chicory whipped arabica
- variety aged robusta. Affogato lungo eu, cultivar at, aged
- breve and blue mountain roast breve americano aged. Sugar
- acerbic sweet variety aged café au lait chicory, java,
- single shot percolator aromatic brewed wings, a, sugar,
- body, aftertaste organic barista espresso dripper to go.
- Flavour to go strong steamed mazagran trifecta decaffeinated
- percolator crema, aged americano rich chicory frappuccino
- foam white.
-
-
-
-
-
-
-
-
-
-
- The icon can be any size as long as it is wrapped inside
- timeline-increment. For larger icons, the spacing between the
- content and label must be adjusted to accomodate it. The spacing
- can be adjusted by modifying the $timeline-spacing sass
- variable, or manually overriding in your css.
-
+ In organic dripper so, body, robust medium pumpkin spice cup, in aged
+ dripper latte extra cup white. And viennese redeye carajillo, beans,
+ mug viennese, carajillo id breve decaffeinated americano crema chicory
+ whipped arabica variety aged robusta. Affogato lungo eu, cultivar at,
+ aged breve and blue mountain roast breve americano aged. Sugar acerbic
+ sweet variety aged café au lait chicory, java, single shot percolator
+ aromatic brewed wings, a, sugar, body, aftertaste organic barista
+ espresso dripper to go. Flavour to go strong steamed mazagran trifecta
+ decaffeinated percolator crema, aged americano rich chicory
+ frappuccino foam white.
+
+ In organic dripper so, body, robust medium pumpkin spice cup, in aged
+ dripper latte extra cup white. And viennese redeye carajillo, beans,
+ mug viennese, carajillo id breve decaffeinated americano crema chicory
+ whipped arabica variety aged robusta. Affogato lungo eu, cultivar at,
+ aged breve and blue mountain roast breve americano aged. Sugar acerbic
+ sweet variety aged café au lait chicory, java, single shot percolator
+ aromatic brewed wings, a, sugar, body, aftertaste organic barista
+ espresso dripper to go. Flavour to go strong steamed mazagran trifecta
+ decaffeinated percolator crema, aged americano rich chicory
+ frappuccino foam white.
+
+
+
+
+
+
+
+
+
+
+ The icon can be any size as long as it is wrapped inside
+ timeline-increment. For larger icons, the spacing between the content
+ and label must be adjusted to accomodate it. The spacing can be adjusted
+ by modifying the $timeline-spacing sass variable, or manually overriding
+ in your css.
+
+
+
```
@@ -215,68 +203,68 @@ The icon can be any size as long as it is wrapped inside `timeline-increment`. F
Place text inside `timeline-increment` by wrapping the text with ``.
-
-
-
-
- Jan 1
-
-
- The icon can be any size as long as it is wrapped inside
- timeline-increment. For larger icons, the spacing between
- the content and label must be adjusted to accomodate it. The
- spacing can be adjusted by modifying the $timeline-spacing
- sass variable, or manually overriding in your css.
-
-
-
-
-
-
- Dec 12
-
-
- The icon can be any size as long as it is wrapped inside
- timeline-increment. For larger icons, the spacing between
- the content and label must be adjusted to accomodate it. The
- spacing can be adjusted by modifying the $timeline-spacing
- sass variable, or manually overriding in your css.
-
-
-
-
+
+
+
+
+ Jan 1
+
+
+ The icon can be any size as long as it is wrapped inside
+ timeline-increment. For larger icons, the spacing between the content
+ and label must be adjusted to accomodate it. The spacing can be
+ adjusted by modifying the $timeline-spacing sass variable, or manually
+ overriding in your css.
+
+
+
+
+
+
+ Dec 12
+
+
+ The icon can be any size as long as it is wrapped inside
+ timeline-increment. For larger icons, the spacing between the content
+ and label must be adjusted to accomodate it. The spacing can be
+ adjusted by modifying the $timeline-spacing sass variable, or manually
+ overriding in your css.
+
+
+
+
```html
-
-
-
- Jan 1
-
-
- The icon can be any size as long as it is wrapped inside
- timeline-increment. For larger icons, the spacing between the
- content and label must be adjusted to accomodate it. The spacing
- can be adjusted by modifying the $timeline-spacing sass
- variable, or manually overriding in your css.
-
-
-
-
-
-
- Dec 12
-
-
- The icon can be any size as long as it is wrapped inside
- timeline-increment. For larger icons, the spacing between the
- content and label must be adjusted to accomodate it. The spacing
- can be adjusted by modifying the $timeline-spacing sass
- variable, or manually overriding in your css.
-
-
-
+
+
+
+ Jan 1
+
+
+ The icon can be any size as long as it is wrapped inside
+ timeline-increment. For larger icons, the spacing between the content
+ and label must be adjusted to accomodate it. The spacing can be adjusted
+ by modifying the $timeline-spacing sass variable, or manually overriding
+ in your css.
+
+
+
+
+
+
+ Dec 12
+
+
+ The icon can be any size as long as it is wrapped inside
+ timeline-increment. For larger icons, the spacing between the content
+ and label must be adjusted to accomodate it. The spacing can be adjusted
+ by modifying the $timeline-spacing sass variable, or manually overriding
+ in your css.
+
+
+
```
@@ -285,108 +273,108 @@ Place text inside `timeline-increment` by wrapping the text with `
-
-
-
-
- Panel Text #1
-
-
-
-
-
-
-
-
-
- Panel Text #2
-
-
-
-
-
-
-
-
-
- Panel Text #3
-
-
-
-
-
-
-
+
+
+
+
+ Panel Text #1
+
+
+
+
+
+
+
+
+
+ Panel Text #2
+
+
+
+
+
+
+
+
+
+ Panel Text #3
+
+
+
+
+
+
+
```html
-
-
-
- Panel Text #1
-
-
-
-
-
-
-
-
-
- Panel Text #2
-
-
-
-
-
-
-
-
-
- Panel Text #3
-
-
-
-
-
-
+
+
+
+ Panel Text #1
+
+
+
+
+
+
+
+
+
+ Panel Text #2
+
+
+
+
+
+
+
+
+
+ Panel Text #3
+
+
+
+
+
+
```
@@ -395,150 +383,144 @@ Align increments to the right with `timeline-right`.
Add class `timeline-center` to center your timeline, it displays items on the right by default. To display items on the left, add class `timeline-item-reverse` to a timeline item.
- In organic dripper so, body, robust medium pumpkin spice
- cup, in aged dripper latte extra cup white. And viennese
- redeye carajillo, beans, mug viennese, carajillo id
- breve decaffeinated americano crema chicory whipped
- arabica variety aged robusta. Affogato lungo eu,
- cultivar at, aged breve and blue mountain roast breve
- americano aged. Sugar acerbic sweet variety aged café au
- lait chicory, java, single shot percolator aromatic
- brewed wings, a, sugar, body, aftertaste organic barista
- espresso dripper to go. Flavour to go strong steamed
- mazagran trifecta decaffeinated percolator crema, aged
- americano rich chicory frappuccino foam white.
-
+ In organic dripper so, body, robust medium pumpkin spice cup, in
+ aged dripper latte extra cup white. And viennese redeye carajillo,
+ beans, mug viennese, carajillo id breve decaffeinated americano
+ crema chicory whipped arabica variety aged robusta. Affogato lungo
+ eu, cultivar at, aged breve and blue mountain roast breve americano
+ aged. Sugar acerbic sweet variety aged café au lait chicory, java,
+ single shot percolator aromatic brewed wings, a, sugar, body,
+ aftertaste organic barista espresso dripper to go. Flavour to go
+ strong steamed mazagran trifecta decaffeinated percolator crema,
+ aged americano rich chicory frappuccino foam white.
+
- In organic dripper so, body, robust medium pumpkin spice
- cup, in aged dripper latte extra cup white. And viennese
- redeye carajillo, beans, mug viennese, carajillo id breve
- decaffeinated americano crema chicory whipped arabica
- variety aged robusta. Affogato lungo eu, cultivar at, aged
- breve and blue mountain roast breve americano aged. Sugar
- acerbic sweet variety aged café au lait chicory, java,
- single shot percolator aromatic brewed wings, a, sugar,
- body, aftertaste organic barista espresso dripper to go.
- Flavour to go strong steamed mazagran trifecta decaffeinated
- percolator crema, aged americano rich chicory frappuccino
- foam white.
-
+ In organic dripper so, body, robust medium pumpkin spice cup, in aged
+ dripper latte extra cup white. And viennese redeye carajillo, beans,
+ mug viennese, carajillo id breve decaffeinated americano crema chicory
+ whipped arabica variety aged robusta. Affogato lungo eu, cultivar at,
+ aged breve and blue mountain roast breve americano aged. Sugar acerbic
+ sweet variety aged café au lait chicory, java, single shot percolator
+ aromatic brewed wings, a, sugar, body, aftertaste organic barista
+ espresso dripper to go. Flavour to go strong steamed mazagran trifecta
+ decaffeinated percolator crema, aged americano rich chicory
+ frappuccino foam white.
+
+
+
+
+
+
+
+ Panel Text #2
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
+
+
+ Panel Text #3
+
+
+ LR
+
+
+
1 hour ago
+
+
+
```
@@ -547,90 +529,90 @@ Add class `timeline-center` to center your timeline, it displays items on the ri
Alternate every other timeline item on the left with class `timeline-even`.
-
-
-
-
- Panel Text #1
-
-
- LR
-
-
-
1 hour ago
-
-
-
-
-
-
- Panel Text #2
-
-
- LR
-
-
-
1 hour ago
-
-
-
-
-
-
- Panel Text #3
-
-
- LR
-
-
-
1 hour ago
-
-
-
-
+
+
+
+
+ Panel Text #1
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
+
+
+ Panel Text #2
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
+
+
+ Panel Text #3
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
```html
-
-
-
- Panel Text #1
-
-
- LR
-
-
-
1 hour ago
-
-
-
-
-
-
- Panel Text #2
-
-
- LR
-
-
-
1 hour ago
-
-
-
-
-
-
- Panel Text #3
-
-
- LR
-
-
-
1 hour ago
-
-
-
+
+
+
+ Panel Text #1
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
+
+
+ Panel Text #2
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
+
+
+ Panel Text #3
+
+
+ LR
+
+
+
1 hour ago
+
+
+
```
@@ -639,90 +621,90 @@ Alternate every other timeline item on the left with class `timeline-even`.
Alternate every other timeline item on the right with class `timeline-odd`.
-
-
-
-
- Panel Text #1
-
-
- LR
-
-
-
1 hour ago
-
-
-
-
-
-
- Panel Text #2
-
-
- LR
-
-
-
1 hour ago
-
-
-
-
-
-
- Panel Text #3
-
-
- LR
-
-
-
1 hour ago
-
-
-
-
+
+
+
+
+ Panel Text #1
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
+
+
+ Panel Text #2
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
+
+
+ Panel Text #3
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
```html
-
-
-
- Panel Text #1
-
-
- LR
-
-
-
1 hour ago
-
-
-
-
-
-
- Panel Text #2
-
-
- LR
-
-
-
1 hour ago
-
-
-
-
-
-
- Panel Text #3
-
-
- LR
-
-
-
1 hour ago
-
-
-
+
+
+
+ Panel Text #1
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
+
+
+ Panel Text #2
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
+
+
+ Panel Text #3
+
+
+ LR
+
+
+
1 hour ago
+
+
+
```
@@ -731,90 +713,90 @@ Alternate every other timeline item on the right with class `timeline-odd`.
Align timeline to the right at screen widths 767px and below with `timeline-right-xs-only`.
-
-
-
-
- Panel Text #1
-
-
- LR
-
-
-
1 hour ago
-
-
-
-
-
-
- Panel Text #2
-
-
- LR
-
-
-
2 hours ago
-
-
-
-
-
-
- Panel Text #3
-
-
- LR
-
-
-
3 hours ago
-
-
-
-
+
+
+
+
+ Panel Text #1
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
+
+
+ Panel Text #2
+
+
+ LR
+
+
+
2 hours ago
+
+
+
+
+
+
+ Panel Text #3
+
+
+ LR
+
+
+
3 hours ago
+
+
+
+
```html
-
-
-
- Panel Text #1
-
-
- LR
-
-
-
1 hour ago
-
-
-
-
-
-
- Panel Text #2
-
-
- LR
-
-
-
2 hours ago
-
-
-
-
-
-
- Panel Text #3
-
-
- LR
-
-
-
3 hours ago
-
-
-
+
+
+
+ Panel Text #1
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
+
+
+ Panel Text #2
+
+
+ LR
+
+
+
2 hours ago
+
+
+
+
+
+
+ Panel Text #3
+
+
+ LR
+
+
+
3 hours ago
+
+
+
```
@@ -828,160 +810,148 @@ Adjust the spacing around the timeline with `@include timeline-spacing($outer-sp
```scss
.timeline-spacing-xl {
- @include timeline-spacing(25px, 50px);
+ @include timeline-spacing(25px, 50px);
}
```
- In organic dripper so, body, robust medium pumpkin spice
- cup, in aged dripper latte extra cup white. And viennese
- redeye carajillo, beans, mug viennese, carajillo id
- breve decaffeinated americano crema chicory whipped
- arabica variety aged robusta. Affogato lungo eu,
- cultivar at, aged breve and blue mountain roast breve
- americano aged. Sugar acerbic sweet variety aged café au
- lait chicory, java, single shot percolator aromatic
- brewed wings, a, sugar, body, aftertaste organic barista
- espresso dripper to go. Flavour to go strong steamed
- mazagran trifecta decaffeinated percolator crema, aged
- americano rich chicory frappuccino foam white.
-
+ In organic dripper so, body, robust medium pumpkin spice cup, in
+ aged dripper latte extra cup white. And viennese redeye carajillo,
+ beans, mug viennese, carajillo id breve decaffeinated americano
+ crema chicory whipped arabica variety aged robusta. Affogato lungo
+ eu, cultivar at, aged breve and blue mountain roast breve americano
+ aged. Sugar acerbic sweet variety aged café au lait chicory, java,
+ single shot percolator aromatic brewed wings, a, sugar, body,
+ aftertaste organic barista espresso dripper to go. Flavour to go
+ strong steamed mazagran trifecta decaffeinated percolator crema,
+ aged americano rich chicory frappuccino foam white.
+
- In organic dripper so, body, robust medium pumpkin spice
- cup, in aged dripper latte extra cup white. And viennese
- redeye carajillo, beans, mug viennese, carajillo id breve
- decaffeinated americano crema chicory whipped arabica
- variety aged robusta. Affogato lungo eu, cultivar at, aged
- breve and blue mountain roast breve americano aged. Sugar
- acerbic sweet variety aged café au lait chicory, java,
- single shot percolator aromatic brewed wings, a, sugar,
- body, aftertaste organic barista espresso dripper to go.
- Flavour to go strong steamed mazagran trifecta decaffeinated
- percolator crema, aged americano rich chicory frappuccino
- foam white.
-
+ In organic dripper so, body, robust medium pumpkin spice cup, in aged
+ dripper latte extra cup white. And viennese redeye carajillo, beans,
+ mug viennese, carajillo id breve decaffeinated americano crema chicory
+ whipped arabica variety aged robusta. Affogato lungo eu, cultivar at,
+ aged breve and blue mountain roast breve americano aged. Sugar acerbic
+ sweet variety aged café au lait chicory, java, single shot percolator
+ aromatic brewed wings, a, sugar, body, aftertaste organic barista
+ espresso dripper to go. Flavour to go strong steamed mazagran trifecta
+ decaffeinated percolator crema, aged americano rich chicory
+ frappuccino foam white.
+
+
+
+
+
+
+
+ Panel Text #2
+
+
+ LR
+
+
+
1 hour ago
+
+
+
+
+
+
+ Panel Text #3
+
+
+ LR
+
+
+
1 hour ago
+
+
+
```
diff --git a/packages/clay-core/docs/tree-view.mdx b/packages/clay-core/docs/tree-view.mdx
index e281fc62ea..54fa18539a 100644
--- a/packages/clay-core/docs/tree-view.mdx
+++ b/packages/clay-core/docs/tree-view.mdx
@@ -7,11 +7,11 @@ packageUse: "import {TreeView} from '@clayui/core';"
lexiconDefinition: 'https://liferay.design/lexicon/core-components/tree-view/'
storybookPath: 'design-system-components-treeview'
packageTypes:
- [
- 'clay-core/src/tree-view/TreeView.tsx',
- 'clay-core/src/tree-view/TreeViewItem.tsx',
- 'clay-core/src/tree-view/TreeViewGroup.tsx',
- ]
+ [
+ 'clay-core/src/tree-view/TreeView.tsx',
+ 'clay-core/src/tree-view/TreeViewItem.tsx',
+ 'clay-core/src/tree-view/TreeViewGroup.tsx',
+ ]
---
## Example
@@ -21,126 +21,122 @@ import React from 'react';
import {Provider, TreeView} from '@clayui/core';
import Icon from '@clayui/icon';
-import '@clayui/css/lib/css/atlas.css';
-
-const spritemap = '/public/icons.svg';
-
-export default function FileExplorer() {
- const items = [
- {
- children: [
- {
- children: [
- {
- children: [{name: 'Research 1'}],
- name: 'Research',
- },
- {
- children: [{name: 'News 1'}],
- name: 'News',
- },
- ],
- name: 'Blogs',
- },
- {
- children: [
- {
- children: [
- {
- name: 'Instructions.pdf',
- status: 'success',
- type: 'pdf',
- },
- ],
- name: 'PDF',
- },
- {
- children: [
- {
- name: 'Treeview review.docx',
- status: 'success',
- type: 'document',
- },
- {
- name: 'Heuristics Evaluation.docx',
- status: 'success',
- type: 'document',
- },
- ],
- name: 'Word',
- },
- ],
- name: 'Documents and Media',
- },
- ],
- name: 'Liferay Drive',
- type: 'cloud',
- },
- {
- children: [{name: 'Blogs'}, {name: 'Documents and Media'}],
- name: 'Repositories',
- type: 'repository',
- },
- {
- children: [{name: 'PDF'}, {name: 'Word'}],
- name: 'Documents and Media',
- status: 'warning',
- },
- ];
-
- const TYPES_TO_SYMBOLS = {
- document: 'document-text',
- pdf: 'document-pdf',
- success: 'check-circle-full',
- warning: 'warning-full',
- };
-
- const TYPES_TO_COLORS = {
- document: 'text-primary',
- pdf: 'text-danger',
- success: 'text-success',
- warning: 'text-warning',
- };
-
- return (
-
-
- {(item) => (
-
-
-
- {item.name}
- {item.status && (
-
- )}
-
-
- {({name, status, type}) => (
-
- {type && (
-
- )}
- {name}
- {status && (
-
- )}
-
- )}
-
-
- )}
-
-
- );
+export default function App() {
+ const items = [
+ {
+ children: [
+ {
+ children: [
+ {
+ children: [{name: 'Research 1'}],
+ name: 'Research',
+ },
+ {
+ children: [{name: 'News 1'}],
+ name: 'News',
+ },
+ ],
+ name: 'Blogs',
+ },
+ {
+ children: [
+ {
+ children: [
+ {
+ name: 'Instructions.pdf',
+ status: 'success',
+ type: 'pdf',
+ },
+ ],
+ name: 'PDF',
+ },
+ {
+ children: [
+ {
+ name: 'Treeview review.docx',
+ status: 'success',
+ type: 'document',
+ },
+ {
+ name: 'Heuristics Evaluation.docx',
+ status: 'success',
+ type: 'document',
+ },
+ ],
+ name: 'Word',
+ },
+ ],
+ name: 'Documents and Media',
+ },
+ ],
+ name: 'Liferay Drive',
+ type: 'cloud',
+ },
+ {
+ children: [{name: 'Blogs'}, {name: 'Documents and Media'}],
+ name: 'Repositories',
+ type: 'repository',
+ },
+ {
+ children: [{name: 'PDF'}, {name: 'Word'}],
+ name: 'Documents and Media',
+ status: 'warning',
+ },
+ ];
+
+ const TYPES_TO_SYMBOLS = {
+ document: 'document-text',
+ pdf: 'document-pdf',
+ success: 'check-circle-full',
+ warning: 'warning-full',
+ };
+
+ const TYPES_TO_COLORS = {
+ document: 'text-primary',
+ pdf: 'text-danger',
+ success: 'text-success',
+ warning: 'text-warning',
+ };
+
+ return (
+
+
+ {(item) => (
+
+
+
+ {item.name}
+ {item.status && (
+
+ )}
+
+
+ {({name, status, type}) => (
+
+ {type && (
+
+ )}
+ {name}
+ {status && (
+
+ )}
+
+ )}
+
+
+ )}
+
+
+ );
}
```
@@ -172,42 +168,38 @@ The main components of the TreeView are ``, `
```jsx
-
-
-
- NS
-
- nisi quis eleifend
-
-
-
-
-
- FP
-
- fusce ut placerat
-
-
-
-
- UT
-
- ultrices dui sapien
-
-
-
-
-
- MC
-
- maecenas pharetra convallis
-
-
-
+
+
+
+ NS
+
+ nisi quis eleifend
+
+
+
+
+
+ FP
+
+ fusce ut placerat
+
+
+
+
+ UT
+
+ ultrices dui sapien
+
+
+
+
+
+ MC
+
+ maecenas pharetra convallis
+
+
+
```
@@ -219,38 +211,36 @@ For the component to be dynamic it is necessary to convert `children` to render
```jsx
function Example() {
- const items = [
- {
- children: [
- {
- children: [{name: 'ultrices dui sapien'}],
- name: 'fusce ut placerat',
- },
- {name: 'maecenas pharetra convallis'},
- ],
- name: 'nisi quis eleifend',
- },
- ];
-
- return (
-
- {(item) => (
-
- {item.name}
-
- {item.children && (
-
- {(item) => (
-
- {item.name}
-
- )}
-
- )}
-
- )}
-
- );
+ const items = [
+ {
+ children: [
+ {
+ children: [{name: 'ultrices dui sapien'}],
+ name: 'fusce ut placerat',
+ },
+ {name: 'maecenas pharetra convallis'},
+ ],
+ name: 'nisi quis eleifend',
+ },
+ ];
+
+ return (
+
+ {(item) => (
+
+ {item.name}
+
+ {item.children && (
+
+ {(item) => (
+ {item.name}
+ )}
+
+ )}
+
+ )}
+
+ );
}
```
@@ -258,32 +248,32 @@ function Example() {
When a tree is very large, loading items (nodes) asynchronously is preferred to decrease the initial payload and memory space. TreeView provides two ways to load asynchronous data:
-- Load the children of an item when clicking on the item
-- Load paginated data from an item
+- Load the children of an item when clicking on the item
+- Load paginated data from an item
**Load the children of an item**
The TreeView doesn't know when an item is asynchronous, so the developer must specify whether the item is asynchronous or not. The `onLoadMore` property is called every time the item is a leaf node of the tree and depending on the method's return value it will behave differently.
-- When returning `void`, `null` or `undefined` the TreeView will do nothing.
-- When returning the `item` will add to the tree.
+- When returning `void`, `null` or `undefined` the TreeView will do nothing.
+- When returning the `item` will add to the tree.
When adding a new asynchronous item to the tree, the `onItemsChange` method is respectively called to update the tree with a new value if the `items` prop is controlled.
- Warning
- If you have an error in the asynchronous call of the
- onLoadMore
- method, only the suppression is done and an error is thrown on the console.
+ Warning
+ If you have an error in the asynchronous call of the
+ onLoadMore
+ method, only the suppression is done and an error is thrown on the console.
```jsx
{
- return await fetch(`example.com/tree/item?parent_id=${item.id}`);
- }}
+ onLoadMore={async (item) => {
+ return await fetch(`example.com/tree/item?parent_id=${item.id}`);
+ }}
>
- ...
+ ...
```
@@ -293,18 +283,18 @@ The `onLoadMore` API can also be used to load paginated data for a specific item
```jsx
{
- const result = await fetch(
- cursor ?? `example.com/tree/item?parent_id=${item.id}`
- );
-
- return {
- cursor: result.next,
- items: result.data,
- };
- }}
+ onLoadMore={async (item, cursor) => {
+ const result = await fetch(
+ cursor ?? `example.com/tree/item?parent_id=${item.id}`
+ );
+
+ return {
+ cursor: result.next,
+ items: result.data,
+ };
+ }}
>
- ...
+ ...
```
@@ -312,24 +302,24 @@ The `cursor` helps to store the data that will be used to identify which will be
```jsx
- {(item, selection, expand, load) => (
-
- {item.name}
-
- {(item) => {item.name}}
-
-
- {expand.has(item.id) && load.has(item.id) !== null && (
-
- )}
-
- )}
+ {(item, selection, expand, load) => (
+
+ {item.name}
+
+ {(item) => {item.name}}
+
+
+ {expand.has(item.id) && load.has(item.id) !== null && (
+
+ )}
+
+ )}
```
@@ -347,7 +337,7 @@ In static content, it is also possible to define the `key` to be used in the sel
```jsx
{
- (item) => {item.name};
+ (item) => {item.name};
}
Drive;
@@ -363,9 +353,9 @@ In static content, it is also possible to define the `key` to be used in the sel
```jsx
-
-
- Drive
+
+
+ Drive
```
@@ -375,18 +365,18 @@ Creating a nested item is necessary to declare it inside the `` t
```jsx
-
-
-
- Drive
-
-
-
-
-
- Documents
-
-
+
+
+
+ Drive
+
+
+
+
+
+ Documents
+
+
```
@@ -396,26 +386,26 @@ Actions are added using the `actions` property on each item. The component abstr
```jsx
-
-
-
-
-
- }
- />
-
- }
- >
-
- Folder
-
+
+
+
+
+
+ }
+ />
+
+ }
+ >
+
+ Folder
+
```
@@ -425,18 +415,18 @@ An item can be disabled by setting the `disabled` prop in the `
-
-
-
- Drive
-
-
-
-
-
- Documents
-
-
+
+
+
+ Drive
+
+
+
+
+
+ Documents
+
+
```
@@ -448,16 +438,13 @@ The TreeView exposes the `expandedKeys` property and the `onExpandedChange` call
```jsx
function Example() {
- const [expandedKeys, setExpandedKeys] = useState(new Set(['1', '2', '3']));
-
- return (
-
- ...
-
- );
+ const [expandedKeys, setExpandedKeys] = useState(new Set(['1', '2', '3']));
+
+ return (
+
+ ...
+
+ );
}
```
@@ -467,12 +454,12 @@ Customizing the expander is possible using the `expanderIcons` property. Changin
```jsx
,
- open: ,
- }}
+ expanderIcons={{
+ close: ,
+ open: ,
+ }}
>
- ...
+ ...
```
@@ -482,18 +469,18 @@ The `Expander` is automatically disabled when the item is disabled but you can o
```jsx
-
-
-
- Drive
-
-
-
-
-
- Documents
-
-
+
+
+
+ Drive
+
+
+
+
+
+ Documents
+
+
```
@@ -507,33 +494,33 @@ The `expand` method is available via render props only when the content is dynam
```jsx
- {(item, selection, expand) => (
- {
- clearTimeout(clickTimerRef.current);
-
- // Ignores the component's default behavior, clicking the
- // item expands the item if it has any child items.
- event.preventDefault();
-
- switch (event.detail) {
- case 1:
- clickTimerRef.current = setTimeout(() => {
- if (!selection.has(item.id)) {
- selection.toggle(item.id);
- }
- }, 200);
- break;
- case 2:
- expand.toggle(item.id);
- default:
- break;
- }
- }}
- >
- Item
-
- )}
+ {(item, selection, expand) => (
+ {
+ clearTimeout(clickTimerRef.current);
+
+ // Ignores the component's default behavior, clicking the
+ // item expands the item if it has any child items.
+ event.preventDefault();
+
+ switch (event.detail) {
+ case 1:
+ clickTimerRef.current = setTimeout(() => {
+ if (!selection.has(item.id)) {
+ selection.toggle(item.id);
+ }
+ }, 200);
+ break;
+ case 2:
+ expand.toggle(item.id);
+ default:
+ break;
+ }
+ }}
+ >
+ Item
+
+ )}
```
@@ -541,9 +528,9 @@ The `expand` method is available via render props only when the content is dynam
The selection allows the user to select one or more items in the TreeView, there are three main interactions that can be configured and are defined using the `selectionMode` prop.
-- `single` select only one item.
-- `multiple` select multiple items.
-- `multiple-recursive` selects multiple items and the item's children recursively. When all children are selected, the parent will be marked as selected, otherwise it will be marked as intermediate.
+- `single` select only one item.
+- `multiple` select multiple items.
+- `multiple-recursive` selects multiple items and the item's children recursively. When all children are selected, the parent will be marked as selected, otherwise it will be marked as intermediate.
The selection can be configured and composed in different ways depending on each use case. Setting the selectionMode and using a `` in the item will respect the configuration of the selection. It is also possible to configure the selection manually to customize what will trigger the selection or modify the look of the selected state. For more information check the [manual selection](#manual-selection) section.
@@ -553,25 +540,25 @@ Selection can be controlled and uncontrolled, this means you can keep the state
const [selectedKeys, setSelectionChange] = useState(new Set());
return (
- setSelectionChange(keys)}
- selectedKeys={selectedKeys}
- >
- ...
-
+ setSelectionChange(keys)}
+ selectedKeys={selectedKeys}
+ >
+ ...
+
);
```
Rendering the TreeView with pre-selected items will cause their parent items to be expanded so that the selected item is visible on the first render. In recursive multiple selection, the parents items will marked as intermediate.
- Info
- Expanding selected items in the first render implies performance degradation
- if the TreeView has too many items; but there are some possibilities to work
- around depending on the use case, read the
- Selection hydration
- section for more information to mitigate this when viewing a noticeable
- slowdown on the first render.
+ Info
+ Expanding selected items in the first render implies performance degradation if
+ the TreeView has too many items; but there are some possibilities to work around
+ depending on the use case, read the
+ Selection hydration
+ section for more information to mitigate this when viewing a noticeable slowdown
+ on the first render.
### Single Selection
@@ -584,18 +571,18 @@ The multi-selection in TreeView is a achieved by composing with the `
-
- Drive
+
+ Drive
```
```jsx
-
-
- Drive
-
- ...
+
+
+ Drive
+
+ ...
```
@@ -605,19 +592,17 @@ Multi-selection is also controlled in the same way as for the expander. It uses
```jsx
function Example() {
- const [selectedKeys, setSelectionChange] = useState(
- new Set(['1', '2', '3'])
- );
-
- return (
-
- ...
-
- );
+ const [selectedKeys, setSelectionChange] = useState(new Set(['1', '2', '3']));
+
+ return (
+
+ ...
+
+ );
}
```
@@ -628,8 +613,8 @@ By default, when selecting an item with nested items, its children are recursive
There are some limitations: for static content the recursive selection only works if the item is expanded, (i.e visible). For dynamic content, it works independently.
- Warning
- Recursive selection will not select items from an asynchronous Item.
+ Warning
+ Recursive selection will not select items from an asynchronous Item.
### Manual Selection
@@ -640,14 +625,14 @@ The `selection` method is available via render props when the content is dynamic
```js
- {(item, selection) => (
- selection.toggle(item.id)}
- >
- Drive
-
- )}
+ {(item, selection) => (
+ selection.toggle(item.id)}
+ >
+ Drive
+
+ )}
```
@@ -655,19 +640,19 @@ The default behavior of clicking the item is to expand and load the item asynchr
```js
- {(item) => (
- {
- event.preventDefault();
-
- // You can do anything after that, for example in a Modal,
- // close and select.
- onClose(item);
- }}
- >
- Drive
-
- )}
+ {(item) => (
+ {
+ event.preventDefault();
+
+ // You can do anything after that, for example in a Modal,
+ // close and select.
+ onClose(item);
+ }}
+ >
+ Drive
+
+ )}
```
@@ -679,13 +664,13 @@ The TreeView handles `items` immutably but follows a partial tree immutability i
```jsx
function Example() {
- const [items, setItems] = useState([]);
+ const [items, setItems] = useState([]);
- return (
-
- ...
-
- );
+ return (
+
+ ...
+
+ );
}
```
@@ -693,18 +678,14 @@ The component allows you to add rules in Drag and Drop like disabling an item to
```jsx
- {(item) => (
-
-
- {item.name}
-
-
- {(item) => (
- {item.name}
- )}
-
-
- )}
+ {(item) => (
+
+ {item.name}
+
+ {(item) => {item.name}}
+
+
+ )}
```
@@ -712,15 +693,15 @@ In some cases it is necessary to check if the item can be dropped in another ite
```jsx
{
- // your logic here
+ dragAndDrop
+ onItemMove={(item, parentItem) => {
+ // your logic here
- // Returning false does not allow the item to be dropped in the parentItem.
- return false;
- }}
+ // Returning false does not allow the item to be dropped in the parentItem.
+ return false;
+ }}
>
- ...
+ ...
```
@@ -729,10 +710,10 @@ In some cases it is necessary to check if the item can be dropped in another ite
The TreeView implements shortcuts and manages the focus. Some shortcuts and focus trigger some actions like renaming, removing or asynchronous loading if any.
- Warning
- If an Item is asynchronous the
- onLoadMore
- method will be called as described in the Asynchronous Item section.
+ Warning
+ If an Item is asynchronous the
+ onLoadMore
+ method will be called as described in the Asynchronous Item section.
### Rename Item
@@ -743,12 +724,12 @@ The `onRenameItem` property receives the `item` object corresponding to the curr
```jsx
{
- return await openRenameModal(item);
- }}
+ dragAndDrop
+ onRenameItem={async (item) => {
+ return await openRenameModal(item);
+ }}
>
- ...
+ ...
```
@@ -770,13 +751,13 @@ This implies some performance problems because the component only knows about th
This can lead to a performance problem on the first render if you have too many items or too many selected items. It's possible to mitigate this on the first render by setting the `selectionHydrationMode` prop: it supports two rendering phases, `render-first` and `hydrate-first`, both have trade-offs that depend on the number of items being rendered:
-- `render-first` will render first and then hydrate. It doesn't block the initial rendering but it is possible to see the items being expanded.
-- `hydrate-first` will hydrate first and then render. This blocks rendering first until it traverses the tree, when rendered the items are already expanded.
+- `render-first` will render first and then hydrate. It doesn't block the initial rendering but it is possible to see the items being expanded.
+- `hydrate-first` will hydrate first and then render. This blocks rendering first until it traverses the tree, when rendered the items are already expanded.
- Info
- The tree traversal implementation internally has some performance optimizations.
- Depending on the number of selected items, the TreeView stops traversing the
- tree when it finds all the selected items. In most scenarios, the TreeView will
- almost never traverse the entire tree.
+ Info
+ The tree traversal implementation internally has some performance optimizations.
+ Depending on the number of selected items, the TreeView stops traversing the tree
+ when it finds all the selected items. In most scenarios, the TreeView will almost
+ never traverse the entire tree.
diff --git a/packages/clay-core/docs/tree-view/markup.mdx b/packages/clay-core/docs/tree-view/markup.mdx
index 36b3829300..534306f512 100644
--- a/packages/clay-core/docs/tree-view/markup.mdx
+++ b/packages/clay-core/docs/tree-view/markup.mdx
@@ -13,19 +13,562 @@ storybookPath: 'design-system-components-treeview'
The treeview provides a way to display information in a hierarchical structure by using collapsible items (nodes). You can navigate between these items using either your mouse device or keyboard. The most common example of a treeview is a folder structure for file systems, but it can be used for showing any hierarchical relationships.
- See
- [https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html](https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html)
- for accessibility patterns.
+ See
+ [https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html](https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html)
+ for accessibility patterns.
- Treeview Link indentation must be provided by javascript through inline
- styles, use the styles `padding-left: 24px;` on `.treeview-link` and
- `margin-left: -24px` on `.treeview-link > .c-inner`. Increase the
- indentation for each level by increasing or decreasing `padding-left` or
- `margin-left` by 24px.
+ Treeview Link indentation must be provided by javascript through inline
+ styles, use the styles `padding-left: 24px;` on `.treeview-link` and
+ `margin-left: -24px` on `.treeview-link > .c-inner`. Increase the indentation
+ for each level by increasing or decreasing `padding-left` or `margin-left` by
+ 24px.
-
+
@@ -74,7 +621,9 @@ The treeview provides a way to display information in a hierarchical structure b
focusable="false"
role="presentation"
>
-
+
@@ -83,11 +632,10 @@ The treeview provides a way to display information in a hierarchical structure b
Liferay Drive
-
- Liferay Drive
-
-
@@ -128,14 +676,18 @@ The treeview provides a way to display information in a hierarchical structure b
focusable="false"
role="presentation"
>
-
+
@@ -147,21 +699,24 @@ The treeview provides a way to display information in a hierarchical structure b
focusable="false"
role="presentation"
>
-
+
-
+ Liferay Drive
+ (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)
-
- Liferay Drive
- (ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual)
-
-
@@ -182,17 +737,19 @@ The treeview provides a way to display information in a hierarchical structure b
style={{marginLeft: '-48px'}}
>
-
-
-
+
-
- Details
-
-
-
+ >Details
@@ -211,17 +768,19 @@ The treeview provides a way to display information in a hierarchical structure b
style={{marginLeft: '-48px'}}
>
-
-
-
+
-
- Categorization
-
-
-
+ >Categorization
@@ -240,17 +799,20 @@ The treeview provides a way to display information in a hierarchical structure b
style={{marginLeft: '-48px'}}
>
-
-
-
+
-
- Documents and Media
-
-
-
+ >Documents and
+ Media
@@ -269,17 +831,19 @@ The treeview provides a way to display information in a hierarchical structure b
style={{marginLeft: '-48px'}}
>
-
-
-
+
-
- Site Template
-
-
-
+ >Site Template
@@ -319,14 +883,18 @@ The treeview provides a way to display information in a hierarchical structure b
focusable="false"
role="presentation"
>
-
+
@@ -338,7 +906,9 @@ The treeview provides a way to display information in a hierarchical structure b
focusable="false"
role="presentation"
>
-
+
@@ -347,11 +917,10 @@ The treeview provides a way to display information in a hierarchical structure b
Repositories
-
- Repositories
-
-
@@ -372,17 +941,18 @@ The treeview provides a way to display information in a hierarchical structure b
style={{marginLeft: '-24px'}}
>
-
-
-
+
-
- Sitemap
-
-
-
+ >Sitemap
@@ -401,17 +971,18 @@ The treeview provides a way to display information in a hierarchical structure b
style={{marginLeft: '-24px'}}
>
-
-
-
+
-
- Robots
-
-
-
+ >Robots
@@ -448,14 +1019,18 @@ The treeview provides a way to display information in a hierarchical structure b
focusable="false"
role="presentation"
>
-
+
@@ -467,7 +1042,9 @@ The treeview provides a way to display information in a hierarchical structure b
focusable="false"
role="presentation"
>
-
+
@@ -476,11 +1053,10 @@ The treeview provides a way to display information in a hierarchical structure b
Documents and Media
-
- Documents and Media
-
-
@@ -501,17 +1077,18 @@ The treeview provides a way to display information in a hierarchical structure b
style={{marginLeft: '-24px'}}
>
-
-
-
+
-
- Default User Associations
-
-
-
+ >Default User Associations
@@ -530,17 +1107,18 @@ The treeview provides a way to display information in a hierarchical structure b
style={{marginLeft: '-24px'}}
>
-
-
-
+
-
- Staging
-
-
-
+ >Staging
@@ -559,17 +1137,18 @@ The treeview provides a way to display information in a hierarchical structure b
style={{marginLeft: '-24px'}}
>
-
-
-
+
-
- Analytics
-
-
-
+ >Analytics
@@ -588,17 +1167,18 @@ The treeview provides a way to display information in a hierarchical structure b
style={{marginLeft: '-24px'}}
>
-
-
-
+
-
- Maps
-
-
-
+ >Maps
@@ -608,39 +1188,908 @@ The treeview provides a way to display information in a hierarchical structure b
+```
+
+### Treeview Group
+
+The class `treeview-group` must be applied to all nested `ul` elements inside `treeview`. This class helps provide the proper spacing for nested `treeview-link`s.
```html
-
-
-
-
@@ -3066,53 +7398,114 @@ The class `show-component-expander-on-hover` displays the `component-expander` w
tabIndex="-1"
style={{paddingLeft: '48px'}}
>
-
-
-
-
-
+
-```
-
-### Show Quick Actions on Hover
-
-The class `show-quick-actions-on-hover` on `treeview` will hide all `quick-action-item`'s except when `treeview-link` is hovered or focused.
-
-
```html
@@ -9787,7 +9466,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -9824,7 +9503,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -9853,7 +9532,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -9872,7 +9551,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -9920,7 +9599,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -9959,7 +9638,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -9994,7 +9673,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10016,7 +9695,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10090,7 +9769,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10112,7 +9791,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10182,7 +9861,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10204,7 +9883,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10275,7 +9954,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10297,7 +9976,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10368,7 +10047,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10390,7 +10069,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10435,7 +10114,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10472,7 +10151,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10501,7 +10180,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10520,7 +10199,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10589,7 +10268,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10611,7 +10290,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10679,7 +10358,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10701,7 +10380,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10743,7 +10422,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10780,7 +10459,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10809,7 +10488,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10828,7 +10507,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10898,7 +10577,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10920,7 +10599,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -10988,7 +10667,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -11010,7 +10689,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -11078,7 +10757,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -11100,7 +10779,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -11168,7 +10847,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
@@ -11190,7 +10869,7 @@ A `treeview` variation for dark colored backgrounds.
role="presentation"
>
diff --git a/packages/clay-core/docs/vertical-bar.mdx b/packages/clay-core/docs/vertical-bar.mdx
index 29d143adde..e4f3f3cf04 100644
--- a/packages/clay-core/docs/vertical-bar.mdx
+++ b/packages/clay-core/docs/vertical-bar.mdx
@@ -6,13 +6,13 @@ packageStatus: 'Beta'
packageUse: "import {VerticalBar} from '@clayui/core';"
storybookPath: 'design-system-components-verticalbar'
packageTypes:
- [
- 'clay-core/src/vertical-bar/VerticalBar.tsx',
- 'clay-core/src/vertical-bar/Bar.tsx',
- 'clay-core/src/vertical-bar/Item.tsx',
- 'clay-core/src/vertical-bar/Panel.tsx',
- 'clay-core/src/vertical-bar/Content.tsx',
- ]
+ [
+ 'clay-core/src/vertical-bar/VerticalBar.tsx',
+ 'clay-core/src/vertical-bar/Bar.tsx',
+ 'clay-core/src/vertical-bar/Item.tsx',
+ 'clay-core/src/vertical-bar/Panel.tsx',
+ 'clay-core/src/vertical-bar/Content.tsx',
+ ]
---
## Example
@@ -22,62 +22,52 @@ import {Button, Provider, VerticalBar} from '@clayui/core';
import Icon from '@clayui/icon';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
-const spritemap = '/public/icons.svg';
+const spritemap = '/icons.svg';
export default function App() {
- const items = [
- {
- icon: 'tag',
- title: 'Tag',
- },
- {
- divider: true,
- icon: 'message',
- title: 'Message',
- },
- {
- icon: 'effects',
- title: 'Effects',
- },
- ];
-
- return (
-
+ );
}
```
@@ -95,34 +85,34 @@ The component controls the OOTB state to toggle the visibility of the panels ie
```jsx
-
- Tag
- Message
-
-
-
-
-
-
-
-
-
-
-
-
+
+ Tag
+ Message
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -130,16 +120,16 @@ The declaration order is important for the component to know which Panel should
```jsx
-
- Tag
-
-
-
-
-
-
+
+ Tag
+
+
+
+
+
+
```
@@ -149,28 +139,28 @@ Declaring components and the list of panels and hard coded items that are not co
```jsx
-
- Tag
- Message
- Effects
-
-
-
-
-
-
-
-
-
-
-
-
+
+ Tag
+ Message
+ Effects
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -182,41 +172,39 @@ To make a component dynamic is only possible by using the properties of `items`
```jsx
const items = [
- {
- icon: 'tag',
- title: 'Tag',
- },
- {
- divider: true,
- icon: 'message',
- title: 'Message',
- },
- {
- icon: 'effects',
- title: 'Effects',
- },
+ {
+ icon: 'tag',
+ title: 'Tag',
+ },
+ {
+ divider: true,
+ icon: 'message',
+ title: 'Message',
+ },
+ {
+ icon: 'effects',
+ title: 'Effects',
+ },
];
return (
-
-
- {(item) => (
-
- {item.title}
-
- )}
-
-
-
- {(item) => (
-
-
-
- )}
-
-
+
+
+ {(item) => (
+ {item.title}
+ )}
+
+
+
+ {(item) => (
+
+
+
+ )}
+
+
);
```
@@ -226,8 +214,8 @@ Positioning the VerticalBar on the right or left side is possible by setting the
```jsx
-
-
+
+
```
@@ -238,11 +226,11 @@ The property `resize` in `` enables the user to increase or d
The property `onPanelWidthChange` accepts a callback function that executes when the `panelWidth` is updated. The callback function has the value of the panel width as the parameter. It can be used to make updates to other parts of your application, such as pushing body content over as the user resizes the Vertical Bar Panel.
- When using the property `onPanelWidthChange`, you must also declare
- `panelWidth`. Setting a fixed value for `panelWidth` will result in
- `onPanelWidthChange` always returning that value, you must use
- `React.useState` to get your callback function to return the correct value.
- Please see the code example below.
+ When using the property `onPanelWidthChange`, you must also declare
+ `panelWidth`. Setting a fixed value for `panelWidth` will result in
+ `onPanelWidthChange` always returning that value, you must use
+ `React.useState` to get your callback function to return the correct value.
+ Please see the code example below.
- Warning
- The values contained in the code below are the default value.
+ Warning
+ The values contained in the code below are the default value.
```jsx
const App = () => {
- const {resource} = useResource({
- link: 'https://rickandmortyapi.com/api/character/',
- fetchRetry: {
- attempts: 5,
- delay: {
- initial: 300,
- jitter: true,
- },
- },
- });
-
- return null;
+ const {resource} = useResource({
+ link: 'https://rickandmortyapi.com/api/character/',
+ fetchRetry: {
+ attempts: 5,
+ delay: {
+ initial: 300,
+ jitter: true,
+ },
+ },
+ });
+
+ return null;
};
```
@@ -81,38 +81,38 @@ The DataProvider provides network status information for you if you want to crea
```jsx
const App = () => (
-
- {({data, error, loading, refetch, networkStatus}) => {}}
-
+
+ {({data, error, loading, refetch, networkStatus}) => {}}
+
);
```
Using network status with hooks is another option, it does not provide an abstraction for `loading`, `error` and `networkStatus` and all information is collected through the `onNetworkStatusChange` callback.
-- `loading` is equivalent to `networkStatus < 4`
-- `error` is equivalent to `status === 5`
+- `loading` is equivalent to `networkStatus < 4`
+- `error` is equivalent to `status === 5`
```jsx
const App = () => {
- const [state, setState] = useState(() => ({
- error: false,
- loading: false,
- networkStatus: 4,
- }));
- const {resource} = useResource({
- link: 'https://rickandmortyapi.com/api/character/',
- onNetworkStatusChange: (status) =>
- setState({
- error: status === 5,
- loading: status < 4,
- networkStatus: status,
- }),
- });
-
- return null;
+ const [state, setState] = useState(() => ({
+ error: false,
+ loading: false,
+ networkStatus: 4,
+ }));
+ const {resource} = useResource({
+ link: 'https://rickandmortyapi.com/api/character/',
+ onNetworkStatusChange: (status) =>
+ setState({
+ error: status === 5,
+ loading: status < 4,
+ networkStatus: status,
+ }),
+ });
+
+ return null;
};
```
@@ -122,14 +122,14 @@ const App = () => {
```jsx
const App = () => {
- const [value, setValue] = useState('Rick');
- const {resource} = useResource({
- link: 'https://rickandmortyapi.com/api/character/',
- fetchDelay: 300,
- variables: {name: value},
- });
-
- return null;
+ const [value, setValue] = useState('Rick');
+ const {resource} = useResource({
+ link: 'https://rickandmortyapi.com/api/character/',
+ fetchDelay: 300,
+ variables: {name: value},
+ });
+
+ return null;
};
```
@@ -140,22 +140,22 @@ You can cache your requests so that in new user interactions a new request is no
The cache is guided by a policy, use the `fetchPolicy` prop to enable and configure the cache according to your use case.
- Warning
- The cache is governed by the algorithm least recently used (
- LRU
- ), you can set the amount of data that will be stored using the
- storageMaxSize
- API. Each new query is equivalent to 1 size.
+ Warning
+ The cache is governed by the algorithm least recently used (
+ LRU
+ ), you can set the amount of data that will be stored using the
+ storageMaxSize
+ API. Each new query is equivalent to 1 size.
- Warning
- When suspense is enabled the hook automatically
- changes the fetchPolicy to
- FetchPolicy.CacheAndNetwork
- if it is set to
- FetchPolicy.NoCache
- so it works properly.
+ Warning
+ When suspense is enabled the hook automatically
+ changes the fetchPolicy to
+ FetchPolicy.CacheAndNetwork
+ if it is set to
+ FetchPolicy.NoCache
+ so it works properly.
### Infinite loading
@@ -165,24 +165,24 @@ Using the `useResource` hook also supports paginated data, which is common in AP
Data is automatically aggregated as new requests are being made when the `loadMore` callback is called.
- Info
- Calling the refetch callback as an attempt
- to refresh the data will not work since the data is already aggregated.
+ Info
+ Calling the refetch callback as an attempt
+ to refresh the data will not work since the data is already aggregated.
```javascript
const {loadMore, resource} = useResource({
- fetch: async (link: string) => {
- const result = await fetch(link);
- const json = await result.json();
-
- return {
- cursor: json.info.next,
- items: json.results,
- };
- },
- link: 'https://rickandmortyapi.com/api/character',
- variables: {limit: 10},
+ fetch: async (link: string) => {
+ const result = await fetch(link);
+ const json = await result.json();
+
+ return {
+ cursor: json.info.next,
+ items: json.results,
+ };
+ },
+ link: 'https://rickandmortyapi.com/api/character',
+ variables: {limit: 10},
});
```
@@ -216,11 +216,11 @@ If a network error happens you can also catch the error in render time using [`<
```javascript
const Root = () => (
-
- }>
-
-
-
+
+ }>
+
+
+
);
```
@@ -238,8 +238,8 @@ This is an API that replaces the `link` behavior of receiving an async function,
import fetch from 'unfetch';
const App = () => {
- const {resource} = useResource({fetch, link: 'https://clay.dev'});
- // ...
+ const {resource} = useResource({fetch, link: 'https://clay.dev'});
+ // ...
};
```
@@ -247,17 +247,17 @@ const App = () => {
```javascript
const {resource, sort, sortChange} = useResource({
- fetch: (link, init, sort) => {
- const url = new URL(link);
+ fetch: (link, init, sort) => {
+ const url = new URL(link);
- if (sort) {
- url.searchParams.append('column', sort.column);
- url.searchParams.append('direction', sort.direction);
- }
+ if (sort) {
+ url.searchParams.append('column', sort.column);
+ url.searchParams.append('direction', sort.direction);
+ }
- return fetch(url, init);
- },
- link: 'https://clay.dev',
+ return fetch(url, init);
+ },
+ link: 'https://clay.dev',
});
```
@@ -272,10 +272,10 @@ With the `jitter` option enabled, delays are randomized anywhere between 0ms (in
These two features combined help alleviate [the thundering herd problem](https://en.wikipedia.org/wiki/Thundering_herd_problem), by distributing load during major outages. Without these strategies, when your server comes back up it will be hit by all of your clients at once, possibly causing it to go down again.
- Warning
- The implementation of this was based on the
- apollo-link-retry
- plugin for React Apollo.
+ Warning
+ The implementation of this was based on the
+ apollo-link-retry
+ plugin for React Apollo.
### Caching data at root level
@@ -283,26 +283,26 @@ These two features combined help alleviate [the thundering herd problem](https:/
The DataProvider can be used on small components that need some data and if it is very reused by the application in other pages, it does not make sense to consult this data every time the user interacts with it in other parts of your application, you can take advantage of the root level cache, ensuring that the next user interactions in the component are with data in the cache, even if it is on other pages.
- Warning
- The use of the storage property has been
- deprecated since v3.67.0 in favor of declaring the
- storageMaxSize={100}
- component in the application root to control cache state and other internal
- details.
+ Warning
+ The use of the storage property has been
+ deprecated since v3.67.0 in favor of declaring the
+ storageMaxSize={100}
+ component in the application root to control cache state and other internal
+ details.
```jsx
const App = () => {
- const storageContext = useContext(Store);
-
- return (
-
- {({data, error, loading, refetch}) => {}}
-
- );
+ const storageContext = useContext(Store);
+
+ return (
+
+ {({data, error, loading, refetch}) => {}}
+
+ );
};
```
diff --git a/packages/clay-date-picker/docs/date-picker.mdx b/packages/clay-date-picker/docs/date-picker.mdx
index ef47747973..74f5fd3afd 100644
--- a/packages/clay-date-picker/docs/date-picker.mdx
+++ b/packages/clay-date-picker/docs/date-picker.mdx
@@ -14,46 +14,44 @@ By default Date Picker does not handle input masking, letting you take control s
For mobile viewing mode, Lexicon encourages you to use the native Date Picker, they are many robust and more accessible in the mobile view, Clay offers the [`useNative`](#api-useNative) API to replace the Date Picker view mode with the native and continue to get the features of the component.
- Warning
- These components are meant to cover desktop browser needs. The OS native component
- must be used on mobile devices.
+ Warning
+ These components are meant to cover desktop browser needs. The OS native component
+ must be used on mobile devices.
The component is treated as controlled, use the [`onValueChange`](#api-onValueChange) and [`value`](#api-value) APIs to control the flow of information.
- Warning
- You can set a range of years using the API
- years
- , which can be displayed in the Date Picker, if the user enters a year
- that is not within the range will be treated as an invalid date.
+ Warning
+ You can set a range of years using the API
+ years
+ , which can be displayed in the Date Picker, if the user enters a year that
+ is not within the range will be treated as an invalid date.
```jsx preview
import {Provider} from '@clayui/core';
import DatePicker from '@clayui/date-picker';
-import React, {useState} from 'react';
-
-import '@clayui/css/lib/css/atlas.css';
+import React from 'react';
export default function App() {
- const [value, setValue] = useState(null);
-
- return (
-
-
+
+ );
}
```
@@ -64,30 +62,28 @@ The ClayTimePicker by default is already implemented in the Date Picker, you can
```jsx preview
import {Provider} from '@clayui/core';
import DatePicker from '@clayui/date-picker';
-import React, {useState} from 'react';
-
-import '@clayui/css/lib/css/atlas.css';
+import React from 'react';
export default function App() {
- const [value, setValue] = useState(null);
-
- return (
-
-
+
+ );
}
```
@@ -98,38 +94,36 @@ Range is used to allowing the user to select a date range using a single calenda
When a range is selected using the `input` or the calendar, the [`onValueChange`](#api-onValueChange) callback is called with the value in `string` type, respecting the format of the [`dateFormat`](#api-dateFormat) for both dates together with the separator.
- Warning
- The time is not supported when the
- range
- is enabled.
+ Warning
+ The time is not supported when the
+ range
+ is enabled.
```jsx preview
import {Provider} from '@clayui/core';
import DatePicker from '@clayui/date-picker';
-import React, {useState} from 'react';
-
-import '@clayui/css/lib/css/atlas.css';
+import React from 'react';
export default function App() {
- const [value, setValue] = useState(null);
-
- return (
-
-
+
+ );
}
```
@@ -140,62 +134,60 @@ To set internationalization of the component, you need to configure the props ac
```jsx preview
import {Provider} from '@clayui/core';
import DatePicker from '@clayui/date-picker';
-import React, {useState} from 'react';
-
-import '@clayui/css/lib/css/atlas.css';
+import React from 'react';
export default function App() {
- const [value, setValue] = useState(null);
-
- return (
-
-
+
+ );
}
```
-- [`firstDayOfWeek`](#api-firstDayOfWeek) by default the value by default the value is 0 (Sunday) and its values are the days of the week, 1 (Monday), 2 (Tuesday), 3 (Wednesday), 4 (Thursday), 5 (Friday), 6 (Saturday).
-- [`dateFormat`](#api-dateFormat) and `timeFormat` is defined according to the **formatting rules of [date-fns](https://date-fns.org/v2.14.0/docs/format)** which is an implementation of the [unicode technical standards](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).
-- [`months`](#api-months) is an `Array` with available months **starting January to December**.
-- [`weekdaysShort`](#api-weekdaysShort) is an `Array` with the **names of the days of the week in short form**, starting from **Sunday to Saturday**.
+- [`firstDayOfWeek`](#api-firstDayOfWeek) by default the value by default the value is 0 (Sunday) and its values are the days of the week, 1 (Monday), 2 (Tuesday), 3 (Wednesday), 4 (Thursday), 5 (Friday), 6 (Saturday).
+- [`dateFormat`](#api-dateFormat) and `timeFormat` is defined according to the **formatting rules of [date-fns](https://date-fns.org/v2.14.0/docs/format)** which is an implementation of the [unicode technical standards](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).
+- [`months`](#api-months) is an `Array` with available months **starting January to December**.
+- [`weekdaysShort`](#api-weekdaysShort) is an `Array` with the **names of the days of the week in short form**, starting from **Sunday to Saturday**.
- Warning
- It is not necessary to reverse or change the order of the values of
- weekdaysShort
- the definition of the API
- firstDayOfWeek
- will take care of changing this,
- keep the order from Sunday to Saturday
- .
+ Warning
+ It is not necessary to reverse or change the order of the values of
+ weekdaysShort
+ the definition of the API
+ firstDayOfWeek
+ will take care of changing this,
+ keep the order from Sunday to Saturday
+ .
## Custom Footer
@@ -205,29 +197,27 @@ To customize the Date Picker content footer you can use the [`footerElement`](#a
```jsx preview
import {Provider} from '@clayui/core';
import DatePicker from '@clayui/date-picker';
-import React, {useState} from 'react';
-
-import '@clayui/css/lib/css/atlas.css';
+import React from 'react';
export default function App() {
- const [value, setValue] = useState(null);
-
- return (
-
-
- This requires custom javascript.
+ This requires custom javascript.
## Example
@@ -15,30 +15,30 @@ packageUse: "import DatePicker from '@clayui/date-picker';"
The DropDown content of the DatePicker consists of `Header`, `Body` and `Footer`. `Footer`: You can add elements that complement the Date Picker like the Time Picker.
-
-
-
-
- Date Picker Calendar Header
-
-
- Date Picker Calendar Body
-
-
- Date Picker Calendar Footer
-
-
-
-
+
+
+
+
+ Date Picker Calendar Header
+
+
+ Date Picker Calendar Body
+
+
+ Date Picker Calendar Footer
+
+
+
+
```html
-
-
...
-
...
-
...
-
+
+
...
+
...
+
...
+
```
@@ -46,13 +46,13 @@ The DropDown content of the DatePicker consists of `Header`, `Body` and `Footer`
-
-
+
+
@@ -113,23 +113,23 @@ The DropDown content of the DatePicker consists of `Header`, `Body` and `Footer`
@@ -162,117 +162,117 @@ The DropDown content of the DatePicker consists of `Header`, `Body` and `Footer`
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
@@ -282,12 +282,12 @@ The DropDown content of the DatePicker consists of `Header`, `Body` and `Footer`
-
+
(GMT+01:00)
@@ -303,1628 +303,1560 @@ The DropDown content of the DatePicker consists of `Header`, `Body` and `Footer`
```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- S
-
-
-
-
- M
-
-
-
-
- T
-
-
-
-
- W
-
-
-
-
- T
-
-
-
-
- F
-
-
-
-
- S
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- (GMT+01:00)
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ S
+
+
+
+
+ M
+
+
+
+
+ T
+
+
+
+
+ W
+
+
+
+
+ T
+
+
+
+
+ F
+
+
+
+
+ S
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ (GMT+01:00)
+
+
+
+
+
+
```
## Date Picker
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- S
-
-
-
-
- M
-
-
-
-
- T
-
-
-
-
- W
-
-
-
-
- T
-
-
-
-
- F
-
-
-
-
- S
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ S
+
+
+
+
+ M
+
+
+
+
+ T
+
+
+
+
+ W
+
+
+
+
+ T
+
+
+
+
+ F
+
+
+
+
+ S
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- S
-
-
-
-
- M
-
-
-
-
- T
-
-
-
-
- W
-
-
-
-
- T
-
-
-
-
- F
-
-
-
-
- S
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ S
+
+
+
+
+ M
+
+
+
+
+ T
+
+
+
+
+ W
+
+
+
+
+ T
+
+
+
+
+ F
+
+
+
+
+ S
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -1933,62 +1865,62 @@ The DropDown content of the DatePicker consists of `Header`, `Body` and `Footer`
Add the class `focus` to the `input-group-item` to show the focus border.
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
```html
-
-
-
-
-
-
-
+
+
+
+
+
+
+
```
@@ -2001,1944 +1933,1900 @@ The modifier class `c-selected-start` must be added to `date-picker-col` for the
The class `c-selected-end` must be added to `date-picker-col` for the last date in the range.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mon
-
-
-
-
- Tues
-
-
-
-
- Wed
-
-
-
-
- Thu
-
-
-
-
- Fri
-
-
-
-
- Sat
-
-
-
-
- Sun
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Mon
+
+
+
+
+ Tues
+
+
+
+
+ Wed
+
+
+
+
+ Thu
+
+
+
+
+ Fri
+
+
+
+
+ Sat
+
+
+
+
+ Sun
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mon
-
-
-
-
- Tues
-
-
-
-
- Wed
-
-
-
-
- Thu
-
-
-
-
- Fri
-
-
-
-
- Sat
-
-
-
-
- Sun
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Mon
+
+
+
+
+ Tues
+
+
+
+
+ Wed
+
+
+
+
+ Thu
+
+
+
+
+ Fri
+
+
+
+
+ Sat
+
+
+
+
+ Sun
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
### Date Picker Old Markup
- In Clay CSS versions 3.24.1 and below, Date Picker days and dates weren't
- wrapped in an extra element date-picker-col. We added the
- wrapping element for highlighting a range of dates. See{' '}
-
- #3986
-
- . This old pattern is still supported, but we recommend updating your markup.
+ In Clay CSS versions 3.24.1 and below, Date Picker days and dates weren't
+ wrapped in an extra element date-picker-col. We added the
+ wrapping element for highlighting a range of dates. See{' '}
+
+ #3986
+
+ . This old pattern is still supported, but we recommend updating your markup.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mon
-
-
- Tues
-
-
- Wed
-
-
- Thu
-
-
- Fri
-
-
- Sat
-
-
- Sun
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Mon
+
+
+ Tues
+
+
+ Wed
+
+
+ Thu
+
+
+ Fri
+
+
+ Sat
+
+
+ Sun
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Mon
-
-
- Tues
-
-
- Wed
-
-
- Thu
-
-
- Fri
-
-
- Sat
-
-
- Sun
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Mon
+
+
+ Tues
+
+
+ Wed
+
+
+ Thu
+
+
+ Fri
+
+
+ Sat
+
+
+ Sun
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -3947,954 +3835,918 @@ The class `c-selected-end` must be added to `date-picker-col` for the last date
Check the browser support for `input[type="date"]` before deciding if it's a good fit for your application.
-
-
-
-
+
+
+
+
```html
-
-
+
+
```
## Time Picker
- This requires external javascript to change values of nested inputs and
- increment/decrement buttons. We use input type="text" because
- it gives us better cross browser support for formatting numbers and text.
+ This requires external javascript to change values of nested inputs and
+ increment/decrement buttons. We use input type="text" because it
+ gives us better cross browser support for formatting numbers and text.
```
@@ -5055,160 +4903,156 @@ Add the class `focus` to `form-control`.
Add the class `disabled` to `form-control` and the attribute `disabled` to all nested `input`s and `button`s. The `label` can also be styled in a disabled state with the class `disabled`.
-
-
-
-
-
-
-
-
- :
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ :
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```html
-
-
-
-
-
-
-
- :
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ :
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```
@@ -5217,64 +5061,64 @@ Add the class `disabled` to `form-control` and the attribute `disabled` to all n
Check the browser support for `input[type="time"]` before deciding if it's a good fit for your application.
+
+ );
}
```
@@ -103,11 +101,11 @@ The simplest example of a static menu is rendering a simple list of options.
```jsx
Click Me}>
-
- one
- two
- three
-
+
+ one
+ two
+ three
+
```
@@ -115,19 +113,19 @@ Other cases are also possible, for example rendering a group of options with a s
```jsx
Click Me}>
-
-
-
- one
- two
- three
-
-
- a
- b
- c
-
-
+
+
+
+ one
+ two
+ three
+
+
+ a
+ b
+ c
+
+
```
@@ -137,7 +135,7 @@ The example above shows how Clay even with the explicit composition of the menu
```jsx
Click Me}>
- {(item) => {item}}
+ {(item) => {item}}
```
@@ -145,31 +143,25 @@ Compositing for dynamic content becomes simpler and also provides the same featu
```jsx
Click Me}>
-
-
- {(item) => (
-
- {(item) => (
- {item.name}
- )}
-
- )}
-
+
+
+ {(item) => (
+
+ {(item) => {item.name}}
+
+ )}
+
```
@@ -179,34 +171,32 @@ The filter in a Menu works OOTB, just declaring the `` componen
```jsx
function Example() {
- const [value, setValue] = useState('');
-
- const options = [{name: 'one'}, {name: 'two'}, {name: 'three'}];
-
- const filteredOptions = useMemo(() => {
- if (!value) {
- return options;
- }
-
- return options.filter(
- (option) => option.match(new RegExp(value, 'i')) !== null
- );
- }, [options, value]);
-
- return (
- Click Me}>
-
-
- {(item) => (
- {item.name}
- )}
-
-
- );
+ const [value, setValue] = useState('');
+
+ const options = [{name: 'one'}, {name: 'two'}, {name: 'three'}];
+
+ const filteredOptions = useMemo(() => {
+ if (!value) {
+ return options;
+ }
+
+ return options.filter(
+ (option) => option.match(new RegExp(value, 'i')) !== null
+ );
+ }, [options, value]);
+
+ return (
+ Click Me}>
+
+
+ {(item) => {item.name}}
+
+
+ );
}
```
@@ -214,10 +204,10 @@ If you just need to set an initial value, just use the `defaultValue` property.
```jsx
Click Me}>
-
-
- {(item) => {item.name}}
-
+
+
+ {(item) => {item.name}}
+
```
@@ -227,15 +217,15 @@ DropDown filters items according to the value rendered as `children` of `Click Me}>
-
-
- {(item) => (
-
-
- {item.name}
-
- )}
-
+
+
+ {(item) => (
+
+
+ {item.name}
+
+ )}
+
```
@@ -246,8 +236,8 @@ You may want to create a trigger that is not necessarily in the same tree as Dro
Using `` allows you to better control the state of DropDown but you will have to deal with visibility, focus management, and other details.
- As a recommendation only use this component as a last resort, it doesn't
- provide some OOTB features like focus control or accessibility at all.
+ As a recommendation only use this component as a last resort, it doesn't
+ provide some OOTB features like focus control or accessibility at all.
```jsx
@@ -255,44 +245,44 @@ import ClayDropDown from '@clayui/drop-down';
import React, {useState, useRef} from 'react';
const Menu = ({children, hasLeftSymbols, hasRightSymbols}) => {
- const triggerElementRef = useRef(null);
- const [expand, setExpand] = useState(false);
- const menuElementRef = useRef(null);
-
- const handleExpand = (event) => {
- // This is not ideal for allowing you to have more than
- // one trigger for the same content but it simulates the
- // advantages of controlling `DropDown.Menu`.
- triggerElementRef.current = event.target;
-
- setExpand(!expand);
- };
-
- return (
-
- );
+ const triggerElementRef = useRef(null);
+ const [expand, setExpand] = useState(false);
+ const menuElementRef = useRef(null);
+
+ const handleExpand = (event) => {
+ // This is not ideal for allowing you to have more than
+ // one trigger for the same content but it simulates the
+ // advantages of controlling `DropDown.Menu`.
+ triggerElementRef.current = event.target;
+
+ setExpand(!expand);
+ };
+
+ return (
+
+
+ );
}
```
@@ -454,7 +436,7 @@ The way the Drilldown component links the menus is done via reference, the menu
```js
const menus = {
- of23: [{title: 'First'}],
+ of23: [{title: 'First'}],
};
```
@@ -462,8 +444,8 @@ From the `id` you are able to link to another menu using the `child` property.
```js
const menus = {
- of23: [{title: 'First', child: 'of09'}],
- of09: [{title: 'Three'}],
+ of23: [{title: 'First', child: 'of09'}],
+ of09: [{title: 'Three'}],
};
```
@@ -472,20 +454,16 @@ using an item that has this shape `{type: 'divider'}`.
```js
const menus = {
- of23: [
- {title: 'First', child: 'of09'},
- {type: 'divider'},
- {title: 'Second'},
- ],
- of09: [{title: 'Three'}],
+ of23: [{title: 'First', child: 'of09'}, {type: 'divider'}, {title: 'Second'}],
+ of09: [{title: 'Three'}],
};
```
- An important thing to have in mind, is that the `DropDownWithDrilldown`
- component, will render its menus in the order that they are specified. This
- means that if you specify the menus in the wrong order, the menu animation
- will not behave correctly.
+ An important thing to have in mind, is that the `DropDownWithDrilldown`
+ component, will render its menus in the order that they are specified. This
+ means that if you specify the menus in the wrong order, the menu animation
+ will not behave correctly.
- This page uses Bootstrap's dropdown plugin which requires JQuery. Liferay
- 7.4 no longer includes JQuery by default. We have included a standalone
- dropdown plugin in 7.4, just replace the attribute{' '}
- data-toggle="dropdown" with{' '}
- data-toggle="liferay-dropdown" on the{' '}
- dropdown-toggle.
+ This page uses Bootstrap's dropdown plugin which requires JQuery. Liferay 7.4
+ no longer includes JQuery by default. We have included a standalone dropdown
+ plugin in 7.4, just replace the attribute data-toggle="dropdown"{' '}
+ with data-toggle="liferay-dropdown" on the{' '}
+ dropdown-toggle.
## Variations
@@ -22,46 +21,42 @@ packageUse: "import DropDown from '@clayui/drop-down';"
The default dropdown is a panel that does not support scrolling of the content inside it. Use this type when the number of options you want to offer is short or the panel is big enough to contain all the elements you want to use.
```
@@ -70,270 +65,232 @@ The default dropdown is a panel that does not support scrolling of the content i
Use `.dropdown-wide` with `.dropdown` to make the dropdown menu big. The default width is 500px.
```
@@ -342,346 +299,306 @@ Use `.dropdown-wide` with `.dropdown` to make the dropdown menu big. The default
Use `.dropdown-full` to create a dropdown menu as wide as its relative parent.
- This is a separate component from `.dropdown-full`, use one or the other.
+ This is a separate component from `.dropdown-full`, use one or the other.
The modifier class `dropdown-menu-width-full` on `dropdown-menu` makes the menu expand the full width of the page. This should be used with the Clay Drop Down plugin which renders the `dropdown-menu` as a direct child of the `body` element.
```html
- This is a separate component from `.dropdown-wide`, use one or the other.
+ This is a separate component from `.dropdown-wide`, use one or the other.
The modifier class `dropdown-menu-width-sm` on `dropdown-menu` makes the menu 500px wide. The `dropdown-menu` becomes 100% wide at screen sizes 767px and below. This should be used with the Clay Drop Down plugin which renders the `dropdown-menu` as a direct child of the `body` element.
```
@@ -690,47 +607,45 @@ The modifier class `dropdown-menu-width-sm` on `dropdown-menu` makes the menu 50
The modifier class `dropdown-menu-width-shrink` on `dropdown-menu` makes the menu only be as wide as the text inside and maxes out at 240px wide. This forces `dropdown-item` text to be on one line.
```
@@ -1667,430 +1547,362 @@ The modifier class `dropdown-menu-height-auto` on `dropdown-menu` removes the `m
Make content expand to fill remaining space in a `dropdown-item` or create equally spaced content with a nested `.autofit-row`, `.autofit-col`, `.autofit-col-shrink`, and `.autofit-col-expand`.
```
@@ -2099,138 +1911,136 @@ Make content expand to fill remaining space in a `dropdown-item` or create equal
Nest `` inside a `.dropdown-menu` list item to create a scrollable dropdown. The maximum height is 200px on screen sizes 768px and above, on screen sizes 767px and below the overflow is handled by `.dropdown-menu`.
```
@@ -2417,154 +2227,154 @@ A monospaced `dropdown-toggle` for a dropdown containing several actions, add `d
Align a dropdown menu on the top or bottom side with classes `dropdown-menu`, `dropdown-menu-right`, `dropdown-menu-top`, or `dropdown-menu-top-right`.
```html
@@ -2685,198 +2495,186 @@ Align a dropdown menu on the top or bottom side with classes `dropdown-menu`, `d
Add the `dropdown-menu-right-side`, `dropdown-menu-left-side`, `dropdown-menu-right-side-bottom`, or `dropdown-menu-left-side-bottom` class to a dropdown menu to align it with the right side, left side, bottom-right side, or bottom-left side of the dropdown menu trigger, respectively:
```html
@@ -3011,152 +2809,146 @@ Add the `dropdown-menu-right-side`, `dropdown-menu-left-side`, `dropdown-menu-ri
You can also center the dropdown menu to its trigger with these four helper classes: `dropdown-menu-center`, `dropdown-menu-top-center`, `dropdown-menu-left-side-middle`, or `dropdown-menu-right-side-middle`.
```
@@ -3165,131 +2957,127 @@ You can also center the dropdown menu to its trigger with these four helper clas
To center the dropdown menu in browsers that don't support CSS transforms, set a negative `margin-left` equal to the width of the `dropdown-menu` divided by two. To vertically align left-side and right-side dropdown-menus, set a negative `margin-top` equal to the height of the dropdown-menu divided by two.
```
diff --git a/packages/clay-empty-state/docs/empty-state.mdx b/packages/clay-empty-state/docs/empty-state.mdx
index 8df807a426..c499f83303 100644
--- a/packages/clay-empty-state/docs/empty-state.mdx
+++ b/packages/clay-empty-state/docs/empty-state.mdx
@@ -18,18 +18,16 @@ import EmptyState from '@clayui/empty-state';
import Button from '@clayui/button';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+
+
+ );
}
```
@@ -42,22 +40,20 @@ import {Provider} from '@clayui/core';
import EmptyState from '@clayui/empty-state';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+ );
}
```
@@ -70,8 +66,8 @@ The property `imgSrcReducedMotion` is used to provide an alternate image if a us
There is an accompanying property, `imgPropsReducedMotion`, where specific properties can be passed to the reduced motion `img` tag. If it is not defined, it uses the properties defined in `imgProps`.
- To see the system's reduce motion setting in action, refer to the example in
- the With Animation section.
+ To see the system's reduce motion setting in action, refer to the example in
+ the With Animation section.
```jsx preview
@@ -79,21 +75,19 @@ import {Provider} from '@clayui/core';
import EmptyState from '@clayui/empty-state';
import React from 'react';
-import '@clayui/css/lib/css/atlas.css';
-
export default function App() {
- return (
-
-
- Don't forget to check
- [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#checkbox) accessibility
- pratices for checkboxes when writting your markup.
+ Don't forget to check
+ [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#checkbox) accessibility
+ pratices for checkboxes when writting your markup.
Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
@@ -23,138 +23,138 @@ By default, any number of checkboxes and radios that are immediate sibling will
### Checkboxes
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
```html
-
-
+
+
-
-
+
+
```
### Radios
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
```html
-
-
+
+
-
-
+
+
-
-
+
+
```
@@ -165,112 +165,112 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
### Checkbox
-
-
-
-
-
-
+
+
+
+
+
+
```html
-
+
-
+
```
### Radio
-
-
-
-
-
-
+
+
+
+
+
+
```html
-
+
-
+
```
@@ -279,70 +279,70 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
Disable checkboxes or radios by adding a `disabled` prop.
-
-
-
-
-
-
+
+
+
+
+
+
```html
-
+
-
+
```
@@ -351,48 +351,48 @@ Disable checkboxes or radios by adding a `disabled` prop.
Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
-
-
-
-
-
-
+
+
+
+
+
+
```html
-
+
-
+
```
@@ -404,18 +404,14 @@ It is packaged in a classless `
```
@@ -423,48 +419,44 @@ Using the `id` binding engine with ``and ``.
```html
-
-
+
+
```
### Checkboxes
-
-
-
+
+
+
```html
-
+
```
@@ -473,92 +465,90 @@ Using the `id` binding engine with ``and ``.
Custom checkboxes can also utilize the `:indeterminate` pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
- 
- 
- 
- 
+ 
- 
-
-
-
-
- wall
-
-
-
-
-
-
-
-
-
- 
- 
- 
- 
-