Skip to content

Commit 5ce772a

Browse files
mrholekmrholek
committed
refactor(CModal): update onDismisse handler and static backdrop
1 parent f96ac06 commit 5ce772a

File tree

7 files changed

+113
-89
lines changed

7 files changed

+113
-89
lines changed

‎docs/4.0/api/CModal.api.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
| Property | Description | Type | Default |
22
| --- | --- | --- | --- |
33
| **alignment** | Align the modal in the center or top of the screen. | `"top" | "center"` | 'top' |
4-
| **backdrop** | Apply a backdrop on body while modal is open. | `boolean` | true |
4+
| **backdrop** | Apply a backdrop on body while modal is open. | `boolean | "static"` | true |
55
| **className** | A string of all className you want applied to the base component. | `string` | - |
66
| **fullscreen** | Set modal to covers the entire user viewport. | `boolean | "sm" | "md" | "lg" | "xl" | "xxl"` | - |
77
| **keyboard** | Closes the modal when escape key is pressed. | `boolean` | true |

‎docs/4.0/api/CModalHeader.api.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
| Property | Description | Type | Default |
22
| --- | --- | --- | --- |
33
| **className** | A string of all className you want applied to the base component. | `string` | - |
4-
| **onDismiss** | Add a close button component to the header which will call the provided handler when clicked. | `() => void` | - |
4+
| **closeButton** | Add a close button component to the header. | `boolean` | true |

‎docs/4.0/components/modal.mdx

Lines changed: 58 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const LiveDemoExample = () => {
7575
<>
7676
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
7777
<CModal visible={visible} onDismiss={() => setVisible(false)}>
78-
<CModalHeader onDismiss={() => setVisible(false)}>
78+
<CModalHeader>
7979
<CModalTitle>Modal title</CModalTitle>
8080
</CModalHeader>
8181
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
@@ -117,15 +117,15 @@ return (
117117
118118
### Static backdrop
119119
120-
If you don’t provide an `onDimsiss` handler to the Modal component, your modal will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.
120+
If you set a `backdrop` to `static`, your modal will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it.
121121
122122
export const StaticBackdropExample = () => {
123123
const [visible, setVisible] = useState(false)
124124
return (
125125
<>
126126
<CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
127-
<CModal visible={visible}>
128-
<CModalHeader onDismiss={() => setVisible(false)}>
127+
<CModal backdrop="static" visible={visible} onDismiss={() => setVisible(false)}>
128+
<CModalHeader>
129129
<CModalTitle>Modal title</CModalTitle>
130130
</CModalHeader>
131131
<CModalBody>
@@ -151,8 +151,8 @@ const [visible, setVisible] = useState(false)
151151
return (
152152
<>
153153
<CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
154-
<CModal visible={visible}>
155-
<CModalHeader onDismiss={() => setVisible(false)}>
154+
<CModal visible={visible} onDismiss={() => setVisible(false)}>
155+
<CModalHeader>
156156
<CModalTitle>Modal title</CModalTitle>
157157
</CModalHeader>
158158
<CModalBody>
@@ -179,7 +179,7 @@ export const ScrollingLongContentExample = () => {
179179
<>
180180
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
181181
<CModal visible={visible} onDismiss={() => setVisible(false)}>
182-
<CModalHeader onDismiss={() => setVisible(false)}>
182+
<CModalHeader>
183183
<CModalTitle>Modal title</CModalTitle>
184184
</CModalHeader>
185185
<CModalBody>
@@ -283,7 +283,7 @@ return (
283283
<>
284284
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
285285
<CModal visible={visible} onDismiss={() => setVisible(false)}>
286-
<CModalHeader onDismiss={() => setVisible(false)}>
286+
<CModalHeader>
287287
<CModalTitle>Modal title</CModalTitle>
288288
</CModalHeader>
289289
<CModalBody>
@@ -385,7 +385,7 @@ export const ScrollingLongContentExample2 = () => {
385385
<>
386386
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
387387
<CModal scrollable visible={visible} onDismiss={() => setVisible(false)}>
388-
<CModalHeader onDismiss={() => setVisible(false)}>
388+
<CModalHeader>
389389
<CModalTitle>Modal title</CModalTitle>
390390
</CModalHeader>
391391
<CModalBody>
@@ -489,7 +489,7 @@ return (
489489
<>
490490
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
491491
<CModal scrollable visible={visible} onDismiss={() => setVisible(false)}>
492-
<CModalHeader onDismiss={() => setVisible(false)}>
492+
<CModalHeader>
493493
<CModalTitle>Modal title</CModalTitle>
494494
</CModalHeader>
495495
<CModalBody>
@@ -592,8 +592,8 @@ export const VerticallyCenteredExample = () => {
592592
return (
593593
<>
594594
<CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
595-
<CModal alignment="center" visible={visible}>
596-
<CModalHeader onDismiss={() => setVisible(false)}>
595+
<CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
596+
<CModalHeader>
597597
<CModalTitle>Modal title</CModalTitle>
598598
</CModalHeader>
599599
<CModalBody>
@@ -620,8 +620,8 @@ const [visible, setVisible] = useState(false)
620620
return (
621621
<>
622622
<CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
623-
<CModal alignment="center" visible={visible}>
624-
<CModalHeader onDismiss={() => setVisible(false)}>
623+
<CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
624+
<CModalHeader>
625625
<CModalTitle>Modal title</CModalTitle>
626626
</CModalHeader>
627627
<CModalBody>
@@ -644,8 +644,8 @@ export const VerticallyCenteredScrollableExample = () => {
644644
return (
645645
<>
646646
<CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
647-
<CModal alignment="center" scrollable visible={visible}>
648-
<CModalHeader onDismiss={() => setVisible(false)}>
647+
<CModal alignment="center" scrollable visible={visible} onDismiss={() => setVisible(false)}>
648+
<CModalHeader>
649649
<CModalTitle>Modal title</CModalTitle>
650650
</CModalHeader>
651651
<CModalBody>
@@ -691,8 +691,8 @@ const [visible, setVisible] = useState(false)
691691
return (
692692
<>
693693
<CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
694-
<CModal alignment="center" scrollable visible={visible}>
695-
<CModalHeader onDismiss={() => setVisible(false)}>
694+
<CModal alignment="center" scrollable visible={visible} onDismiss={() => setVisible(false)}>
695+
<CModalHeader>
696696
<CModalTitle>Modal title</CModalTitle>
697697
</CModalHeader>
698698
<CModalBody>
@@ -738,8 +738,8 @@ export const TooltipsAndPopoversExample = () => {
738738
return (
739739
<>
740740
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
741-
<CModal alignment="center" visible={visible}>
742-
<CModalHeader onDismiss={() => setVisible(false)}>
741+
<CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
742+
<CModalHeader>
743743
<CModalTitle>Modal title</CModalTitle>
744744
</CModalHeader>
745745
<CModalBody>
@@ -782,8 +782,8 @@ const [visible, setVisible] = useState(false)
782782
return (
783783
<>
784784
<CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
785-
<CModal alignment="center" visible={visible}>
786-
<CModalHeader onDismiss={() => setVisible(false)}>
785+
<CModal alignment="center" visible={visible} onDismiss={() => setVisible(false)}>
786+
<CModalHeader>
787787
<CModalTitle>Modal title</CModalTitle>
788788
</CModalHeader>
789789
<CModalBody>
@@ -876,20 +876,20 @@ export const OptionalSizesExample = () => {
876876
<CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
877877
<CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
878878
<CButton onClick={() => setVisibleSm(!visibleSm)}>Small modal</CButton>
879-
<CModal size="xl" visible={visibleXL}>
880-
<CModalHeader onDismiss={() => setVisibleXL(false)}>
879+
<CModal size="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
880+
<CModalHeader>
881881
<CModalTitle>Extra large modal</CModalTitle>
882882
</CModalHeader>
883883
<CModalBody>...</CModalBody>
884884
</CModal>
885-
<CModal size="lg" visible={visibleLg}>
886-
<CModalHeader onDismiss={() => setVisibleLg(false)}>
885+
<CModal size="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
886+
<CModalHeader>
887887
<CModalTitle>Large modal</CModalTitle>
888888
</CModalHeader>
889889
<CModalBody>...</CModalBody>
890890
</CModal>
891-
<CModal size="sm" visible={visibleSm}>
892-
<CModalHeader onDismiss={() => setVisibleSm(false)}>
891+
<CModal size="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
892+
<CModalHeader>
893893
<CModalTitle>Small modal</CModalTitle>
894894
</CModalHeader>
895895
<CModalBody>...</CModalBody>
@@ -911,20 +911,20 @@ return (
911911
<CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
912912
<CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
913913
<CButton onClick={() => setVisibleSm(!visibleSm)}>Small modal</CButton>
914-
<CModal size="xl" visible={visibleXL}>
915-
<CModalHeader onDismiss={() => setVisibleXL(false)}>
914+
<CModal size="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
915+
<CModalHeader>
916916
<CModalTitle>Extra large modal</CModalTitle>
917917
</CModalHeader>
918918
<CModalBody>...</CModalBody>
919919
</CModal>
920-
<CModal size="lg" visible={visibleLg}>
921-
<CModalHeader onDismiss={() => setVisibleLg(false)}>
920+
<CModal size="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
921+
<CModalHeader>
922922
<CModalTitle>Large modal</CModalTitle>
923923
</CModalHeader>
924924
<CModalBody>...</CModalBody>
925925
</CModal>
926-
<CModal size="sm" visible={visibleSm}>
927-
<CModalHeader onDismiss={() => setVisibleSm(false)}>
926+
<CModal size="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
927+
<CModalHeader>
928928
<CModalTitle>Small modal</CModalTitle>
929929
</CModalHeader>
930930
<CModalBody>...</CModalBody>
@@ -1009,38 +1009,38 @@ export const FullscreenExample = () => {
10091009
<CButton onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
10101010
<CButton onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
10111011
<CButton onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
1012-
<CModal fullscreen visible={visible}>
1013-
<CModalHeader onDismiss={() => setVisible(false)}>
1012+
<CModal fullscreen visible={visible} onDismiss={() => setVisible(false)}>
1013+
<CModalHeader>
10141014
<CModalTitle>Full screen</CModalTitle>
10151015
</CModalHeader>
10161016
<CModalBody>...</CModalBody>
10171017
</CModal>
1018-
<CModal fullscreen="sm" visible={visibleSm}>
1019-
<CModalHeader onDismiss={() => setVisibleSm(false)}>
1018+
<CModal fullscreen="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
1019+
<CModalHeader>
10201020
<CModalTitle>Full screen below sm</CModalTitle>
10211021
</CModalHeader>
10221022
<CModalBody>...</CModalBody>
10231023
</CModal>
1024-
<CModal fullscreen="md" visible={visibleMd}>
1025-
<CModalHeader onDismiss={() => setVisibleMd(false)}>
1024+
<CModal fullscreen="md" visible={visibleMd} onDismiss={() => setVisibleMd(false)}>
1025+
<CModalHeader>
10261026
<CModalTitle>Full screen below md</CModalTitle>
10271027
</CModalHeader>
10281028
<CModalBody>...</CModalBody>
10291029
</CModal>
1030-
<CModal fullscreen="lg" visible={visibleLg}>
1031-
<CModalHeader onDismiss={() => setVisibleLg(false)}>
1030+
<CModal fullscreen="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
1031+
<CModalHeader>
10321032
<CModalTitle>Full screen below lg</CModalTitle>
10331033
</CModalHeader>
10341034
<CModalBody>...</CModalBody>
10351035
</CModal>
1036-
<CModal fullscreen="xl" visible={visibleXL}>
1037-
<CModalHeader onDismiss={() => setVisibleXL(false)}>
1036+
<CModal fullscreen="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
1037+
<CModalHeader>
10381038
<CModalTitle>Full screen below xl</CModalTitle>
10391039
</CModalHeader>
10401040
<CModalBody>...</CModalBody>
10411041
</CModal>
1042-
<CModal fullscreen="xxl" visible={visibleXXL}>
1043-
<CModalHeader onDismiss={() => setVisibleXXL(false)}>
1042+
<CModal fullscreen="xxl" visible={visibleXXL} onDismiss={() => setVisibleXXL(false)}>
1043+
<CModalHeader>
10441044
<CModalTitle>Full screen below xxl</CModalTitle>
10451045
</CModalHeader>
10461046
<CModalBody>...</CModalBody>
@@ -1068,38 +1068,38 @@ return (
10681068
<CButton onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
10691069
<CButton onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
10701070
<CButton onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
1071-
<CModal fullscreen visible={visible}>
1072-
<CModalHeader onDismiss={() => setVisible(false)}>
1071+
<CModal fullscreen visible={visible} onDismiss={() => setVisible(false)}>
1072+
<CModalHeader>
10731073
<CModalTitle>Full screen</CModalTitle>
10741074
</CModalHeader>
10751075
<CModalBody>...</CModalBody>
10761076
</CModal>
1077-
<CModal fullscreen="sm" visible={visibleSm}>
1078-
<CModalHeader onDismiss={() => setVisibleSm(false)}>
1077+
<CModal fullscreen="sm" visible={visibleSm} onDismiss={() => setVisibleSm(false)}>
1078+
<CModalHeader>
10791079
<CModalTitle>Full screen below sm</CModalTitle>
10801080
</CModalHeader>
10811081
<CModalBody>...</CModalBody>
10821082
</CModal>
1083-
<CModal fullscreen="md" visible={visibleMd}>
1084-
<CModalHeader onDismiss={() => setVisibleMd(false)}>
1083+
<CModal fullscreen="md" visible={visibleMd} onDismiss={() => setVisibleMd(false)}>
1084+
<CModalHeader>
10851085
<CModalTitle>Full screen below md</CModalTitle>
10861086
</CModalHeader>
10871087
<CModalBody>...</CModalBody>
10881088
</CModal>
1089-
<CModal fullscreen="lg" visible={visibleLg}>
1090-
<CModalHeader onDismiss={() => setVisibleLg(false)}>
1089+
<CModal fullscreen="lg" visible={visibleLg} onDismiss={() => setVisibleLg(false)}>
1090+
<CModalHeader>
10911091
<CModalTitle>Full screen below lg</CModalTitle>
10921092
</CModalHeader>
10931093
<CModalBody>...</CModalBody>
10941094
</CModal>
1095-
<CModal fullscreen="xl" visible={visibleXL}>
1096-
<CModalHeader onDismiss={() => setVisibleXL(false)}>
1095+
<CModal fullscreen="xl" visible={visibleXL} onDismiss={() => setVisibleXL(false)}>
1096+
<CModalHeader>
10971097
<CModalTitle>Full screen below xl</CModalTitle>
10981098
</CModalHeader>
10991099
<CModalBody>...</CModalBody>
11001100
</CModal>
1101-
<CModal fullscreen="xxl" visible={visibleXXL}>
1102-
<CModalHeader onDismiss={() => setVisibleXXL(false)}>
1101+
<CModal fullscreen="xxl" visible={visibleXXL} onDismiss={() => setVisibleXXL(false)}>
1102+
<CModalHeader>
11031103
<CModalTitle>Full screen below xxl</CModalTitle>
11041104
</CModalHeader>
11051105
<CModalBody>...</CModalBody>

0 commit comments

Comments
 (0)