Skip to content

Commit 1fec507

Browse files
mrholekmrholek
committed
docs: update content
1 parent 6af4802 commit 1fec507

File tree

4 files changed

+79
-50
lines changed

4 files changed

+79
-50
lines changed

‎docs/4.0/components/alert.mdx‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ menu: Components
66
route: /components/alert
77
---
88

9+
import { useState } from 'react'
910
import {
1011
CAlert,
1112
CAlertHeading,
1213
CAlertLink,
14+
CButton,
1315
CCallout,
1416
} from './../../../src/index.ts'
1517

@@ -82,6 +84,34 @@ React Alert is prepared for any length of text, as well as an optional close but
8284
</p>
8385
</CCallout>
8486

87+
### Live example
88+
89+
Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
90+
91+
export const LiveExample = () => {
92+
const [visible, setVisible] = useState(false)
93+
return (
94+
<>
95+
<CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>A simple primary alert—check it out!</CAlert>
96+
<CButton color="primary" onClick={() => setVisible(true)}>Show live alert</CButton>
97+
</>
98+
)
99+
}
100+
101+
<Example>
102+
<LiveExample />
103+
</Example>
104+
105+
```jsx
106+
const [visible, setVisible] = useState(false)
107+
return (
108+
<>
109+
<CAlert color="primary" dismissible visible={visible} onClose={() => setVisible(false)}>A simple primary alert—check it out!</CAlert>
110+
<CButton color="primary" onClick={() => setVisible(true)}>Show live alert</CButton>
111+
</>
112+
)
113+
```
114+
85115
### Link color
86116

87117
Use the `<CAlertLink>` component to immediately give matching colored links inside any alert.
@@ -278,7 +308,7 @@ Alerts can also be easily dismissed. Just add the `dismissible` prop.
278308
<CAlert
279309
color="warning"
280310
dismissible
281-
onDismissed={() => {
311+
onClose={() => {
282312
alert("👋 Well, hi there! Thanks for dismissing me.");
283313
}}
284314
>
@@ -290,7 +320,7 @@ Alerts can also be easily dismissed. Just add the `dismissible` prop.
290320
<CAlert
291321
color="warning"
292322
dismissible
293-
onDismissed={() => {
323+
onClose={() => {
294324
alert("👋 Well, hi there! Thanks for dismissing me.");
295325
}}
296326
>

‎docs/4.0/components/modal.mdx‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const LiveDemoExample = () => {
7272
return (
7373
<>
7474
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
75-
<CModal visible={visible} onDismiss={() => setVisible(false)}>
75+
<CModal visible={visible} onClose={() => setVisible(false)}>
7676
<CModalHeader>
7777
<CModalTitle>Modal title</CModalTitle>
7878
</CModalHeader>
@@ -97,8 +97,8 @@ const [visible, setVisible] = useState(false)
9797
return (
9898
<>
9999
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
100-
<CModal visible={visible} onDismiss={() => setVisible(false)}>
101-
<CModalHeader onDismiss={() => setVisible(false)}>
100+
<CModal visible={visible} onClose={() => setVisible(false)}>
101+
<CModalHeader onClose={() => setVisible(false)}>
102102
<CModalTitle>Modal title</CModalTitle>
103103
</CModalHeader>
104104
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
@@ -122,7 +122,7 @@ export const StaticBackdropExample = () => {
122122
return (
123123
<>
124124
<CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
125-
<CModal backdrop="static" visible={visible} onDismiss={() => setVisible(false)}>
125+
<CModal backdrop="static" visible={visible} onClose={() => setVisible(false)}>
126126
<CModalHeader>
127127
<CModalTitle>Modal title</CModalTitle>
128128
</CModalHeader>
@@ -149,7 +149,7 @@ const [visible, setVisible] = useState(false)
149149
return (
150150
<>
151151
<CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
152-
<CModal visible={visible} onDismiss={() => setVisible(false)}>
152+
<CModal visible={visible} onClose={() => setVisible(false)}>
153153
<CModalHeader>
154154
<CModalTitle>Modal title</CModalTitle>
155155
</CModalHeader>
@@ -176,7 +176,7 @@ export const ScrollingLongContentExample = () => {
176176
return (
177177
<>
178178
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
179-
<CModal visible={visible} onDismiss={() => setVisible(false)}>
179+
<CModal visible={visible} onClose={() => setVisible(false)}>
180180
<CModalHeader>
181181
<CModalTitle>Modal title</CModalTitle>
182182
</CModalHeader>
@@ -280,7 +280,7 @@ const [visible, setVisible] = useState(false)
280280
return (
281281
<>
282282
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
283-
<CModal visible={visible} onDismiss={() => setVisible(false)}>
283+
<CModal visible={visible} onClose={() => setVisible(false)}>
284284
<CModalHeader>
285285
<CModalTitle>Modal title</CModalTitle>
286286
</CModalHeader>
@@ -382,7 +382,7 @@ export const ScrollingLongContentExample2 = () => {
382382
return (
383383
<>
384384
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
385-
<CModal scrollable visible={visible} onDismiss={() => setVisible(false)}>
385+
<CModal scrollable visible={visible} onClose={() => setVisible(false)}>
386386
<CModalHeader>
387387
<CModalTitle>Modal title</CModalTitle>
388388
</CModalHeader>
@@ -486,7 +486,7 @@ const [visible, setVisible] = useState(false)
486486
return (
487487
<>
488488
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
489-
<CModal scrollable visible={visible} onDismiss={() => setVisible(false)}>
489+
<CModal scrollable visible={visible} onClose={() => setVisible(false)}>
490490
<CModalHeader>
491491
<CModalTitle>Modal title</CModalTitle>
492492
</CModalHeader>
@@ -590,7 +590,7 @@ export const VerticallyCenteredExample = () => {
590590
return (
591591
<>
592592
<CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
593-
<CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
593+
<CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
594594
<CModalHeader>
595595
<CModalTitle>Modal title</CModalTitle>
596596
</CModalHeader>
@@ -618,7 +618,7 @@ const [visible, setVisible] = useState(false)
618618
return (
619619
<>
620620
<CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
621-
<CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
621+
<CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
622622
<CModalHeader>
623623
<CModalTitle>Modal title</CModalTitle>
624624
</CModalHeader>
@@ -642,7 +642,7 @@ export const VerticallyCenteredScrollableExample = () => {
642642
return (
643643
<>
644644
<CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
645-
<CModal alignment="center" scrollable visible={visible} onDismiss={() => setVisible(false)}>
645+
<CModal alignment="center" scrollable visible={visible} onClose={() => setVisible(false)}>
646646
<CModalHeader>
647647
<CModalTitle>Modal title</CModalTitle>
648648
</CModalHeader>
@@ -689,7 +689,7 @@ const [visible, setVisible] = useState(false)
689689
return (
690690
<>
691691
<CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
692-
<CModal alignment="center" scrollable visible={visible} onDismiss={() => setVisible(false)}>
692+
<CModal alignment="center" scrollable visible={visible} onClose={() => setVisible(false)}>
693693
<CModalHeader>
694694
<CModalTitle>Modal title</CModalTitle>
695695
</CModalHeader>
@@ -736,7 +736,7 @@ export const TooltipsAndPopoversExample = () => {
736736
return (
737737
<>
738738
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
739-
<CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
739+
<CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
740740
<CModalHeader>
741741
<CModalTitle>Modal title</CModalTitle>
742742
</CModalHeader>
@@ -780,7 +780,7 @@ const [visible, setVisible] = useState(false)
780780
return (
781781
<>
782782
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
783-
<CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
783+
<CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
784784
<CModalHeader>
785785
<CModalTitle>Modal title</CModalTitle>
786786
</CModalHeader>
@@ -874,19 +874,19 @@ export const OptionalSizesExample = () => {
874874
<CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
875875
<CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
876876
<CButton onClick={() => setVisibleSm(!visibleSm)}>Small modal</CButton>
877-
<CModal size="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
877+
<CModal size="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
878878
<CModalHeader>
879879
<CModalTitle>Extra large modal</CModalTitle>
880880
</CModalHeader>
881881
<CModalBody>...</CModalBody>
882882
</CModal>
883-
<CModal size="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
883+
<CModal size="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
884884
<CModalHeader>
885885
<CModalTitle>Large modal</CModalTitle>
886886
</CModalHeader>
887887
<CModalBody>...</CModalBody>
888888
</CModal>
889-
<CModal size="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
889+
<CModal size="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
890890
<CModalHeader>
891891
<CModalTitle>Small modal</CModalTitle>
892892
</CModalHeader>
@@ -909,19 +909,19 @@ return (
909909
<CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
910910
<CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
911911
<CButton onClick={() => setVisibleSm(!visibleSm)}>Small modal</CButton>
912-
<CModal size="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
912+
<CModal size="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
913913
<CModalHeader>
914914
<CModalTitle>Extra large modal</CModalTitle>
915915
</CModalHeader>
916916
<CModalBody>...</CModalBody>
917917
</CModal>
918-
<CModal size="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
918+
<CModal size="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
919919
<CModalHeader>
920920
<CModalTitle>Large modal</CModalTitle>
921921
</CModalHeader>
922922
<CModalBody>...</CModalBody>
923923
</CModal>
924-
<CModal size="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
924+
<CModal size="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
925925
<CModalHeader>
926926
<CModalTitle>Small modal</CModalTitle>
927927
</CModalHeader>
@@ -1007,37 +1007,37 @@ export const FullscreenExample = () => {
10071007
<CButton onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
10081008
<CButton onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
10091009
<CButton onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
1010-
<CModal fullscreen visible={visible} onDismiss={() => setVisible(false)}>
1010+
<CModal fullscreen visible={visible} onClose={() => setVisible(false)}>
10111011
<CModalHeader>
10121012
<CModalTitle>Full screen</CModalTitle>
10131013
</CModalHeader>
10141014
<CModalBody>...</CModalBody>
10151015
</CModal>
1016-
<CModal fullscreen="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
1016+
<CModal fullscreen="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
10171017
<CModalHeader>
10181018
<CModalTitle>Full screen below sm</CModalTitle>
10191019
</CModalHeader>
10201020
<CModalBody>...</CModalBody>
10211021
</CModal>
1022-
<CModal fullscreen="md" visible={visibleMd} onDismiss={() => setVisibleMd(false)}>
1022+
<CModal fullscreen="md" visible={visibleMd} onClose={() => setVisibleMd(false)}>
10231023
<CModalHeader>
10241024
<CModalTitle>Full screen below md</CModalTitle>
10251025
</CModalHeader>
10261026
<CModalBody>...</CModalBody>
10271027
</CModal>
1028-
<CModal fullscreen="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
1028+
<CModal fullscreen="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
10291029
<CModalHeader>
10301030
<CModalTitle>Full screen below lg</CModalTitle>
10311031
</CModalHeader>
10321032
<CModalBody>...</CModalBody>
10331033
</CModal>
1034-
<CModal fullscreen="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
1034+
<CModal fullscreen="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
10351035
<CModalHeader>
10361036
<CModalTitle>Full screen below xl</CModalTitle>
10371037
</CModalHeader>
10381038
<CModalBody>...</CModalBody>
10391039
</CModal>
1040-
<CModal fullscreen="xxl" visible={visibleXXL} onDismiss={() => setVisibleXXL(false)}>
1040+
<CModal fullscreen="xxl" visible={visibleXXL} onClose={() => setVisibleXXL(false)}>
10411041
<CModalHeader>
10421042
<CModalTitle>Full screen below xxl</CModalTitle>
10431043
</CModalHeader>
@@ -1066,37 +1066,37 @@ return (
10661066
<CButton onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
10671067
<CButton onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
10681068
<CButton onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
1069-
<CModal fullscreen visible={visible} onDismiss={() => setVisible(false)}>
1069+
<CModal fullscreen visible={visible} onClose={() => setVisible(false)}>
10701070
<CModalHeader>
10711071
<CModalTitle>Full screen</CModalTitle>
10721072
</CModalHeader>
10731073
<CModalBody>...</CModalBody>
10741074
</CModal>
1075-
<CModal fullscreen="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
1075+
<CModal fullscreen="sm" visible={visibleSm} onClose={() => setVisibleSm(false)}>
10761076
<CModalHeader>
10771077
<CModalTitle>Full screen below sm</CModalTitle>
10781078
</CModalHeader>
10791079
<CModalBody>...</CModalBody>
10801080
</CModal>
1081-
<CModal fullscreen="md" visible={visibleMd} onDismiss={() => setVisibleMd(false)}>
1081+
<CModal fullscreen="md" visible={visibleMd} onClose={() => setVisibleMd(false)}>
10821082
<CModalHeader>
10831083
<CModalTitle>Full screen below md</CModalTitle>
10841084
</CModalHeader>
10851085
<CModalBody>...</CModalBody>
10861086
</CModal>
1087-
<CModal fullscreen="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
1087+
<CModal fullscreen="lg" visible={visibleLg} onClose={() => setVisibleLg(false)}>
10881088
<CModalHeader>
10891089
<CModalTitle>Full screen below lg</CModalTitle>
10901090
</CModalHeader>
10911091
<CModalBody>...</CModalBody>
10921092
</CModal>
1093-
<CModal fullscreen="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
1093+
<CModal fullscreen="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
10941094
<CModalHeader>
10951095
<CModalTitle>Full screen below xl</CModalTitle>
10961096
</CModalHeader>
10971097
<CModalBody>...</CModalBody>
10981098
</CModal>
1099-
<CModal fullscreen="xxl" visible={visibleXXL} onDismiss={() => setVisibleXXL(false)}>
1099+
<CModal fullscreen="xxl" visible={visibleXXL} onClose={() => setVisibleXXL(false)}>
11001100
<CModalHeader>
11011101
<CModalTitle>Full screen below xxl</CModalTitle>
11021102
</CModalHeader>

0 commit comments

Comments
 (0)