Skip to content

Commit ca62655

Browse files
garronejgarronej
committed
Fix modal
1 parent 5028aa1 commit ca62655

File tree

8 files changed

+53
-40
lines changed

8 files changed

+53
-40
lines changed

‎src/ConsentBanner/ConsentBanner.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import { ConsentManager } from "./ConsentManager";
77
import { ConsentBannerContentDisplayer } from "./ConsentBannerContentDisplayer";
88
import { useTranslation } from "./i18n";
99

10-
const { ConsentModal, consentModalButtonProps } = createModal({
10+
const { ConsentModal, consentModalNativeButtonProps } = createModal({
1111
name: "Consent",
1212
isOpenedByDefault: false
1313
});
1414

15-
export { consentModalButtonProps };
15+
export { consentModalNativeButtonProps };
1616

1717
export type ConsentBannerProps = Omit<ConsentBannerContentProps, "consentModalButtonProps">;
1818

@@ -28,12 +28,16 @@ export const ConsentBanner = memo((props: ConsentBannerProps) => {
2828
<ConsentManager
2929
gdprLinkProps={gdprLinkProps}
3030
services={services}
31-
consentModalButtonProps={consentModalButtonProps}
31+
consentModalButtonProps={{
32+
"nativeButtonProps": consentModalNativeButtonProps
33+
}}
3234
/>
3335
</ConsentModal>
3436
<ConsentBannerContentDisplayer
3537
{...props}
36-
consentModalButtonProps={consentModalButtonProps}
38+
consentModalButtonProps={{
39+
"nativeButtonProps": consentModalNativeButtonProps
40+
}}
3741
/>
3842
</>
3943
);

‎src/Modal.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -203,19 +203,24 @@ let counter = 0;
203203
export function createModal<Name extends string>(params: {
204204
name: Name;
205205
isOpenedByDefault: boolean;
206-
}): Record<`${Uncapitalize<Name>}ModalButtonProps`, ModalProps.ModalButtonProps> &
206+
}): //Record<`${Uncapitalize<Name>}ModalButtonProps`, ModalProps.ModalButtonProps> &
207+
Record<
208+
`${Uncapitalize<Name>}ModalNativeButtonProps`,
209+
{
210+
"aria-controls": string;
211+
"data-fr-opened": boolean;
212+
}
213+
> &
207214
Record<`${Capitalize<Name>}Modal`, (props: ModalProps) => JSX.Element> &
208215
Record<`close${Capitalize<Name>}Modal`, () => void> &
209216
Record<`open${Capitalize<Name>}Modal`, () => void> {
210217
const { name, isOpenedByDefault } = params;
211218

212219
const modalId = `${uncapitalize(name)}-modal-${counter++}`;
213220

214-
const openModalButtonProps: ModalProps.ModalButtonProps = {
215-
"nativeButtonProps": {
216-
"aria-controls": modalId,
217-
"data-fr-opened": isOpenedByDefault
218-
}
221+
const modalNativeButtonProps = {
222+
"aria-controls": modalId,
223+
"data-fr-opened": isOpenedByDefault
219224
};
220225

221226
const hiddenControlButtonId = `${modalId}-hidden-control-button`;
@@ -225,7 +230,7 @@ export function createModal<Name extends string>(params: {
225230
<>
226231
<Button
227232
nativeButtonProps={{
228-
...openModalButtonProps.nativeButtonProps,
233+
...modalNativeButtonProps,
229234
"id": hiddenControlButtonId
230235
}}
231236
className={fr.cx("fr-hidden")}
@@ -274,7 +279,7 @@ export function createModal<Name extends string>(params: {
274279

275280
return {
276281
[InternalModal.displayName]: InternalModal,
277-
[`${uncapitalize(name)}ModalButtonProps`]: openModalButtonProps,
282+
[`${uncapitalize(name)}ModalNativeButtonProps`]: modalNativeButtonProps,
278283
[openModal.name]: openModal,
279284
[closeModal.name]: closeModal
280285
} as any;

‎stories/Modal.stories.tsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,37 +19,42 @@ An controlled variant is coming soon.
1919
2020
## The 'createModal' function
2121
22-
The \`createModal(options)\` function take an \`options\` object as parameter.
22+
The \`createModal(params)\` function take an \`params\` object as parameter.
2323
2424
**Options Params keys:**
2525
- \`name\` (*STRING - Required*): Prefix of the \`Modal\` component name and \`ModalButtonProps\` object name.
26-
- \`isOpenedByDefault\` (*BOOLEAN - Required*): Set the opening state of the Modal after it mount.
26+
- \`isOpenedByDefault\` (*boolean - Required*): Set the opening state of the Modal after it mount.
2727
2828
**Return:**
29-
An object with two keys. The name of these keys are computed from the value
29+
An object with four keys. The name of these keys are computed from the value
3030
of \`name\` key of the \`options\` param object :
3131
- \`\${PascalCasePrefix}Modal\`: The Modal component
32-
- \`\${camelCasePrefix}ModalButtonProps\`: The props object for \`Button\` DSFR component
32+
- \`open\${camelCasePrefix}Modal\`: Programmatically open the modal
33+
- \`close\${camelCasePrefix}Modal\`: Programmatically close the modal
34+
- \`\${camelCasePrefix}ModalNativeButtonProps\`: The props object for <button /> component (For Next AppDir, if you want to be RSC ready)
3335
3436
**Eg.:**
3537
\`\`\`tsx
3638
import { createModal } from "@codegouvfr/react-dsfr/Modal";
3739
import { Button } from "@codegouvfr/react-dsfr/Button";
3840
39-
const { FooModal, fooModalButtonProps, openFooModal, closeFooModal } = createModal({
41+
const { FooModal, fooModalButtonProps, openFooModal, closeFooModal, fooModalNativeButtonProps } = createModal({
4042
name: "foo", // The name of Modal component and modalButtonProps is compute from this string
4143
isOpenedByDefault: false
4244
});
4345
44-
45-
const node = (
46-
<>
47-
{/* ... */}
48-
<FooModal title="foo modal title"/>
49-
<Button {...fooModalButtonProps}>Open foo modal</Button>
50-
<Button onClick={openFooModal}>Open foo modal</Button>
51-
<Button onClick={closeFooModal}>Close foo modal</Button>
52-
</>
46+
function Home(){
47+
return (
48+
<>
49+
{/* ... */}
50+
<FooModal title="foo modal title">
51+
<h1>Foo modal content</h1>
52+
</FooModal>
53+
<Button nativeButtonProps={fooModalNativeButtonProp}>Open foo modal</Button> {/* Use this if you are in a Server component (Next AppDir) and you don't want to add "use client"; just because of the the Modal */}
54+
<Button onClick={openFooModal}>Open foo modal</Button> {/* ...otherwise this works just as well and is more versatile */}
55+
<Button onClick={closeFooModal}>Close foo modal</Button>
56+
</>
57+
);
5358
);
5459
5560
\`\`\`
@@ -110,15 +115,15 @@ const node = (
110115

111116
export default meta;
112117

113-
const { SimpleModal, simpleModalButtonProps } = createModal({
118+
const { SimpleModal, simpleModalNativeButtonProps } = createModal({
114119
"name": "simple",
115120
"isOpenedByDefault": false
116121
});
117122

118123
function Template(args: ModalProps) {
119124
return (
120125
<>
121-
<Button {...simpleModalButtonProps}>Open modal</Button>
126+
<Button nativeButtonProps={simpleModalNativeButtonProps}>Open modal</Button>
122127
<SimpleModal {...args} />
123128
</>
124129
);

‎test/integration/cra/src/Home.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { SideMenu } from "@codegouvfr/react-dsfr/SideMenu";
55
import { Table } from "@codegouvfr/react-dsfr/Table";
66
import { useGdprStore } from "@codegouvfr/react-dsfr/useGdprStore"
77
import { ButtonsGroup } from '@codegouvfr/react-dsfr/ButtonsGroup';
8-
import { consentModalButtonProps } from '@codegouvfr/react-dsfr/ConsentBanner';
8+
import { consentModalNativeButtonProps } from '@codegouvfr/react-dsfr/ConsentBanner';
99

1010
const sideMenuItems = [
1111
{
@@ -138,7 +138,7 @@ export const GdprStoreViewer = () => {
138138
return <>
139139
<ButtonsGroup inlineLayoutWhen='always' buttons={[
140140
{
141-
...consentModalButtonProps,
141+
"nativeButtonProps": consentModalNativeButtonProps,
142142
children: "Open Consent"
143143
},
144144
{

‎test/integration/next-appdir/app/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { createModal } from "@codegouvfr/react-dsfr/Modal";
88
import { SideMenu } from "@codegouvfr/react-dsfr/SideMenu";
99
import { GdprStoreViewer } from '#/ui/GdprStoreViewer';
1010

11-
const { SimpleModal, simpleModalButtonProps } = createModal({
11+
const { SimpleModal, simpleModalNativeButtonProps } = createModal({
1212
"name": "simple",
1313
"isOpenedByDefault": false
1414
});
@@ -133,7 +133,7 @@ export default function Page() {
133133
]}
134134
/>
135135
<ClientComponent />
136-
<Button {...simpleModalButtonProps}>Open simple modal (control button)</Button>
136+
<Button nativeButtonProps={simpleModalNativeButtonProps}>Open simple modal (control button)</Button>
137137
<SimpleModal
138138
title="simple modal title"
139139
buttons={

‎test/integration/next-appdir/ui/GdprStoreViewer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22

33
import { useGdprStore } from "@codegouvfr/react-dsfr/useGdprStore"
44
import { ButtonsGroup } from '@codegouvfr/react-dsfr/ButtonsGroup';
5-
import { consentModalButtonProps } from '@codegouvfr/react-dsfr/ConsentBanner';
5+
import { consentModalNativeButtonProps } from '@codegouvfr/react-dsfr/ConsentBanner';
66

77
export const GdprStoreViewer = () => {
88
const {consents, firstChoiceMade } = useGdprStore();
99

1010
return <>
1111
<ButtonsGroup inlineLayoutWhen='always' buttons={[
1212
{
13-
...consentModalButtonProps,
13+
"nativeButtonProps": consentModalNativeButtonProps,
1414
children: "Open Consent"
1515
},
1616
{

‎test/integration/next-pagesdir/pages/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
88
import { useStyles } from "@codegouvfr/react-dsfr/tss";
99
import { useGdprStore } from "@codegouvfr/react-dsfr/useGdprStore"
1010
import { ButtonsGroup } from '@codegouvfr/react-dsfr/ButtonsGroup';
11-
import { consentModalButtonProps } from '@codegouvfr/react-dsfr/ConsentBanner';
11+
import { consentModalNativeButtonProps } from '@codegouvfr/react-dsfr/ConsentBanner';
1212

1313

1414
export default function App() {
@@ -183,7 +183,7 @@ export const GdprStoreViewer = () => {
183183
return <>
184184
<ButtonsGroup inlineLayoutWhen='always' buttons={[
185185
{
186-
...consentModalButtonProps,
186+
"nativeButtonProps": consentModalNativeButtonProps,
187187
children: "Open Consent"
188188
},
189189
{

‎test/integration/vite/src/Home.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,14 @@ import { Button } from "@codegouvfr/react-dsfr/Button";
33
import { ButtonsGroup } from "@codegouvfr/react-dsfr/ButtonsGroup";
44

55
import { Input } from "@codegouvfr/react-dsfr/Input";
6-
import { Select } from "@codegouvfr/react-dsfr/Select";
6+
import { Select } from "@codegouvfr/react-dsfr/SelectNext";
77

88
import { fr } from "@codegouvfr/react-dsfr";
99
import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
1010
import { useState } from "react";
1111
import { Table } from "@codegouvfr/react-dsfr/Table";
1212
import { useGdprStore } from "@codegouvfr/react-dsfr/useGdprStore"
13-
import { ButtonsGroup } from '@codegouvfr/react-dsfr/ButtonsGroup';
14-
import { consentModalButtonProps } from '@codegouvfr/react-dsfr/ConsentBanner';
13+
import { consentModalNativeButtonProps } from '@codegouvfr/react-dsfr/ConsentBanner';
1514

1615
export function Home() {
1716
const { isDark, setIsDark } = useIsDark();
@@ -214,7 +213,7 @@ export const GdprStoreViewer = () => {
214213
return <>
215214
<ButtonsGroup inlineLayoutWhen='always' buttons={[
216215
{
217-
...consentModalButtonProps,
216+
"nativeButtonProps": consentModalNativeButtonProps,
218217
children: "Open Consent"
219218
},
220219
{

0 commit comments

Comments
 (0)