Skip to content

Commit 4877e1a

Browse files
mrholekmrholek
committed
docs: fix validateDOMNesting warnings
1 parent 7bf2c13 commit 4877e1a

File tree

20 files changed

+230
-475
lines changed

20 files changed

+230
-475
lines changed

‎packages/docs/content/components/alert.mdx‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ other_frameworks: alert
88
---
99

1010
import { useState } from 'react'
11-
import { CAlert, CAlertHeading, CAlertLink, CButton, CCallout } from '@coreui/react/src/index'
11+
import { CAlert, CAlertHeading, CAlertLink, CButton } from '@coreui/react/src/index'
1212

1313
import CIcon from '@coreui/icons-react'
1414

@@ -45,15 +45,12 @@ React Alert is prepared for any length of text, as well as an optional close but
4545
</CAlert>
4646
```
4747

48-
<CCallout color="info">
49-
<h5>Conveying meaning to assistive technologies</h5>
50-
<p>
51-
Using color to add meaning only provides a visual indication, which will not be conveyed to
52-
users of assistive technologies – such as screen readers. Ensure that information denoted by the
53-
color is either obvious from the content itself (e.g. the visible text), or is included through
54-
alternative means, such as additional text hidden with the `.visually-hidden` class.
55-
</p>
56-
</CCallout>
48+
<Callout color="info" title="Conveying meaning to assistive technologies">
49+
Using color to add meaning only provides a visual indication, which will not be conveyed to
50+
users of assistive technologies – such as screen readers. Ensure that information denoted by the
51+
color is either obvious from the content itself (e.g. the visible text), or is included through
52+
alternative means, such as additional text hidden with the `.visually-hidden` class.
53+
</Callout>
5754

5855
### Live example
5956

@@ -222,13 +219,11 @@ React Alert component can also be easily dismissed. Just add the `dismissible` p
222219
</CAlert>
223220
```
224221

225-
<CCallout color="warning">
226-
<p>
227-
When an alert is dismissed, the element is completely removed from the page structure. If a
228-
keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
229-
depending on the browser, reset to the start of the page/document.
230-
</p>
231-
</CCallout>
222+
<Callout color="warning">
223+
When an alert is dismissed, the element is completely removed from the page structure. If a
224+
keyboard user dismisses the alert using the close button, their focus will suddenly be lost and,
225+
depending on the browser, reset to the start of the page/document.
226+
</Callout>
232227

233228
## Customizing
234229

‎packages/docs/content/components/button.mdx‎

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ route: /components/buttons
77
other_frameworks: button
88
---
99

10-
import { CButton, CCallout } from '@coreui/react/src/index'
10+
import { CButton } from '@coreui/react/src/index'
1111

1212
## How to use React Button Component.
1313

@@ -25,15 +25,12 @@ CoreUI includes a bunch of predefined buttons components, each serving its own s
2525
<CButton color="link">Link</CButton>
2626
```
2727

28-
<CCallout color="info">
29-
<h5>Conveying meaning to assistive technologies</h5>
30-
<p>
31-
Using color to add meaning only provides a visual indication, which will not be conveyed to
32-
users of assistive technologies – such as screen readers. Ensure that information denoted by the
33-
color is either obvious from the content itself (e.g. the visible text), or is included through
34-
alternative means, such as additional text hidden with the `.visually-hidden` class.
35-
</p>
36-
</CCallout>
28+
<Callout color="info" title="Conveying meaning to assistive technologies">
29+
Using color to add meaning only provides a visual indication, which will not be conveyed to
30+
users of assistive technologies – such as screen readers. Ensure that information denoted by the
31+
color is either obvious from the content itself (e.g. the visible text), or is included through
32+
alternative means, such as additional text hidden with the `.visually-hidden` class.
33+
</Callout>
3734

3835
## Disable text wrapping
3936

@@ -83,10 +80,10 @@ If you need a ghost variant of react button, set `variant="ghost"` prop to remov
8380
<CButton color="dark" variant="ghost">Dark</CButton>
8481
```
8582

86-
<CCallout color="info">
83+
<Callout color="info">
8784
Some of the button styles use a relatively light foreground color, and should only be used on a
8885
dark background in order to have sufficient contrast.
89-
</CCallout>
86+
</Callout>
9087

9188
## Sizes
9289

‎packages/docs/content/components/callout.mdx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,12 @@ Callout component is prepared for any length of text, as well as an optional ele
4848
</CCallout>
4949
```
5050
51-
<CCallout color="info">
52-
<h5>Conveying meaning to assistive technologies</h5>
53-
<p>
54-
Using color to add meaning only provides a visual indication, which will not be conveyed to
55-
users of assistive technologies – such as screen readers. Ensure that information denoted by the
56-
color is either obvious from the content itself (e.g. the visible text), or is included through
57-
alternative means, such as additional text hidden with the `.visually-hidden` class.
58-
</p>
59-
</CCallout>
51+
<Callout color="info" title="Conveying meaning to assistive technologies">
52+
Using color to add meaning only provides a visual indication, which will not be conveyed to
53+
users of assistive technologies – such as screen readers. Ensure that information denoted by the
54+
color is either obvious from the content itself (e.g. the visible text), or is included through
55+
alternative means, such as additional text hidden with the `.visually-hidden` class.
56+
</Callout>
6057
6158
## Customizing
6259

‎packages/docs/content/components/card.mdx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ other_frameworks: card
99

1010
import {
1111
CButton,
12-
CCallout,
1312
CCard,
1413
CCardBody,
1514
CCardFooter,
@@ -508,15 +507,12 @@ Use `color` property to change the appearance of a card.
508507
</>
509508
```
510509
511-
<CCallout color="info">
512-
<h5>Conveying meaning to assistive technologies</h5>
513-
<p>
514-
Using color to add meaning only provides a visual indication, which will not be conveyed to
515-
users of assistive technologies – such as screen readers. Ensure that information denoted by the
516-
color is either obvious from the content itself (e.g. the visible text), or is included through
517-
alternative means, such as additional text hidden with the `.visually-hidden` class.
518-
</p>
519-
</CCallout>
510+
<Callout color="info" title="Conveying meaning to assistive technologies">
511+
Using color to add meaning only provides a visual indication, which will not be conveyed to
512+
users of assistive technologies – such as screen readers. Ensure that information denoted by the
513+
color is either obvious from the content itself (e.g. the visible text), or is included through
514+
alternative means, such as additional text hidden with the `.visually-hidden` class.
515+
</Callout>
520516
521517
### Border
522518

‎packages/docs/content/components/dropdown.mdx‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ other_frameworks: dropdown
1010
import {
1111
CButton,
1212
CButtonGroup,
13-
CCallout,
1413
CCollapse,
1514
CContainer,
1615
CDropdown,
@@ -244,13 +243,9 @@ And putting it to use in a navbar:
244243

245244
## Directions
246245

247-
<CCallout color="info">
248-
<h4>RTL</h4>
249-
<p>
250-
Directions are mirrored when using CoreUI in RTL, meaning `.dropstart` will appear on the right
251-
side.
252-
</p>
253-
</CCallout>
246+
<Callout color="info" title="RTL">
247+
Directions are mirrored when using CoreUI in RTL, meaning `.dropstart` will appear on the right side.
248+
</Callout>
254249

255250
### Centered
256251

@@ -435,9 +430,9 @@ In the following example we use `div` instead of `<CDropdownMenu>` to show `<CDr
435430

436431
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `aligment="end"` to right align the dropdown menu.
437432

438-
<CCallout color="info">
433+
<Callout color="info">
439434
<strong>Heads up!</strong> Dropdowns are positioned thanks to Popper.
440-
</CCallout>
435+
</Callout>
441436

442437
```jsx preview
443438
<CDropdown alignment="end">

‎packages/docs/content/components/list-group.mdx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ other_frameworks: list-group
99

1010
import {
1111
CBadge,
12-
CCallout,
1312
CFormCheck,
1413
CListGroup,
1514
CListGroupItem,
@@ -200,15 +199,12 @@ Contextual classes also work with `<a>`s or `<button>`s. Note the addition of th
200199
</CListGroup>
201200
```
202201

203-
<CCallout color="info">
204-
<h5>Conveying meaning to assistive technologies</h5>
205-
<p>
206-
Using color to add meaning only provides a visual indication, which will not be conveyed to
207-
users of assistive technologies – such as screen readers. Ensure that information denoted by the
208-
color is either obvious from the content itself (e.g. the visible text), or is included through
209-
alternative means, such as additional text hidden with the `.visually-hidden` class.
210-
</p>
211-
</CCallout>
202+
<Callout color="info" title="Conveying meaning to assistive technologies">
203+
Using color to add meaning only provides a visual indication, which will not be conveyed to
204+
users of assistive technologies – such as screen readers. Ensure that information denoted by the
205+
color is either obvious from the content itself (e.g. the visible text), or is included through
206+
alternative means, such as additional text hidden with the `.visually-hidden` class.
207+
</Callout>
212208

213209
## With badges
214210

‎packages/docs/content/components/modal.mdx‎

Lines changed: 14 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -801,51 +801,12 @@ return (
801801
802802
Modals have three optional sizes, available via modifier classes to be placed on a `<CModal>`. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
803803
804-
<table className="table">
805-
<thead>
806-
<tr>
807-
<th>Size</th>
808-
<th>Property size</th>
809-
<th>Modal max-width</th>
810-
</tr>
811-
</thead>
812-
<tbody>
813-
<tr>
814-
<td>Small</td>
815-
<td>
816-
<code>'sm'</code>
817-
</td>
818-
<td>
819-
<code>300px</code>
820-
</td>
821-
</tr>
822-
<tr>
823-
<td>Default</td>
824-
<td className="text-medium-emphasis">None</td>
825-
<td>
826-
<code>500px</code>
827-
</td>
828-
</tr>
829-
<tr>
830-
<td>Large</td>
831-
<td>
832-
<code>'lg'</code>
833-
</td>
834-
<td>
835-
<code>800px</code>
836-
</td>
837-
</tr>
838-
<tr>
839-
<td>Extra large</td>
840-
<td>
841-
<code>'xl'</code>
842-
</td>
843-
<td>
844-
<code>1140px</code>
845-
</td>
846-
</tr>
847-
</tbody>
848-
</table>
804+
| Size | Property size | Modal max-width |
805+
| --- | --- | --- |
806+
| Small | `'sm'` | `300px` |
807+
| Default | None | `500px` |
808+
| Large | `'lg'` | `800px` |
809+
| Extra large | `'xl'` | `1140px` |
849810
850811
export const OptionalSizesExample = () => {
851812
const [visibleXL, setVisibleXL] = useState(false)
@@ -917,62 +878,14 @@ return (
917878
918879
Another override is the option to pop up a React modal component that covers the user viewport, available via property `fullscrean`.
919880
920-
<table className="table">
921-
<thead>
922-
<tr>
923-
<th>Property fullscrean</th>
924-
<th>Availability</th>
925-
</tr>
926-
</thead>
927-
<tbody>
928-
<tr>
929-
<td>
930-
<code>true</code>
931-
</td>
932-
<td>Always</td>
933-
</tr>
934-
<tr>
935-
<td>
936-
<code>'sm'</code>
937-
</td>
938-
<td>
939-
Below <code>576px</code>
940-
</td>
941-
</tr>
942-
<tr>
943-
<td>
944-
<code>'md'</code>
945-
</td>
946-
<td>
947-
Below <code>768px</code>
948-
</td>
949-
</tr>
950-
<tr>
951-
<td>
952-
<code>'lg'</code>
953-
</td>
954-
<td>
955-
Below <code>992px</code>
956-
</td>
957-
</tr>
958-
<tr>
959-
<td>
960-
<code>'xl'</code>
961-
</td>
962-
<td>
963-
Below <code>1200px</code>
964-
</td>
965-
</tr>
966-
<tr>
967-
<td>
968-
<code>'xxl'</code>
969-
</td>
970-
<td>
971-
Below <code>1400px</code>
972-
</td>
973-
</tr>
974-
</tbody>
975-
</table>
881+
| Fullscrean | Availability |
882+
| --- | --- |
883+
| `true` | Always |
884+
| `'sm'` | Below `576px` |
885+
| `'md'` | Below `768px` |
886+
| `'lg'` | Below `992px` |
887+
| `'xl'` | Below `1200px` |
888+
| `'xxl'` | Below `1400px` |
976889
977890
export const FullscreenExample = () => {
978891
const [visible, setVisible] = useState(false)

‎packages/docs/content/components/navbar.mdx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -313,7 +313,9 @@ export const NavExample2 = () => {
313313
)
314314
}
315315

316-
<Example>{() => {}}</Example>
316+
<Example>
317+
<NavExample2 />
318+
</Example>
317319

318320
```jsx
319321
const [visible, setVisible] = useState(false)

0 commit comments

Comments
 (0)