Skip to content

Commit 36c52e8

Browse files
eirikbackerBarsnes
authored and
mimarz
committed
fix(Modal): api alignment (#2440)
- **Question for review:** Should `Modal.Close` be a compound component? 🤔 - Fixes #2063 - Fixes #1177 --------- Co-authored-by: barsnes <tobias.barsnes@digdir.no>
1 parent a3e453c commit 36c52e8

20 files changed

+495
-748
lines changed

‎.changeset/hip-schools-greet.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
"@digdir/designsystemet-css": patch
3+
"@digdir/designsystemet-react": patch
4+
---
5+
6+
Modal:
7+
- Rename `Modal.Dialog` to `Modal`
8+
- Rename `Modal.Root` to `Modal.Context`
9+
- Replace `onInteractOutside` event with `backdropClose` boolean
10+
- Replace `closeButton` and `closeButtonTitle` on `Modal.Header` with `closeButton` on `Modal`
11+
- Add border to `Modal.Header` and `Modal.Footer`
12+
- Remove `Modal.Content`
13+
- Remove `onBeforeClose`
14+
- Remove `subtitle` from `Modal.Header`

‎apps/_components/src/ColorModal/ColorModal.tsx

+6-7
Original file line numberDiff line numberDiff line change
@@ -52,18 +52,17 @@ export const ColorModal = ({
5252
weight,
5353
}: ColorModalProps) => {
5454
return (
55-
<Modal.Root>
56-
<Modal.Dialog
55+
<Modal.Context>
56+
<Modal
5757
ref={colorModalRef}
5858
style={{
5959
maxWidth: '1050px',
6060
}}
61-
onInteractOutside={() => colorModalRef.current?.close()}
6261
>
6362
<Modal.Header>
6463
{`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`}
6564
</Modal.Header>
66-
<Modal.Content className={classes.modalContent}>
65+
<div className={classes.modalContent}>
6766
<div className={classes.description}>
6867
{getColorDescription({
6968
weight,
@@ -121,8 +120,8 @@ export const ColorModal = ({
121120
</Accordion.Content>
122121
</Accordion.Item>
123122
</Accordion.Root> */}
124-
</Modal.Content>
125-
</Modal.Dialog>
126-
</Modal.Root>
123+
</div>
124+
</Modal>
125+
</Modal.Context>
127126
);
128127
};

‎apps/theme/components/TokenModal/TokenModal.module.css

+1-10
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,6 @@
2222
padding-right: 0;
2323
}
2424

25-
.modalContent {
26-
padding-bottom: 24px;
27-
}
28-
2925
.tabs {
3026
margin-bottom: 16px;
3127
}
@@ -34,7 +30,7 @@
3430
margin-bottom: 16px;
3531
}
3632

37-
.modalHeader h2 {
33+
.modalHeader {
3834
display: flex;
3935
align-items: center;
4036
justify-content: space-between;
@@ -55,11 +51,6 @@
5551
font-weight: 500;
5652
}
5753

58-
.modalHeader > button {
59-
right: 22px;
60-
top: 22px;
61-
}
62-
6354
.hiddenGlobalBtn {
6455
position: absolute;
6556
left: 0;

‎apps/theme/components/TokenModal/TokenModal.tsx

+81-86
Original file line numberDiff line numberDiff line change
@@ -69,107 +69,102 @@ export const TokenModal = ({
6969
}, []);
7070

7171
return (
72-
<Modal.Root>
72+
<Modal.Context>
7373
<Modal.Trigger
7474
onClick={() => {
7575
return modalRef.current?.showModal();
7676
}}
7777
>
7878
Ta i bruk tema
7979
</Modal.Trigger>
80-
<Modal.Dialog
81-
ref={modalRef}
82-
onInteractOutside={() => modalRef.current?.close()}
83-
style={{
84-
maxWidth: '1400px',
85-
}}
80+
<Modal
8681
className={classes.modal}
82+
style={{ maxWidth: 1400 }}
83+
ref={modalRef}
8784
>
88-
<Modal.Header className={classes.modalHeader}>
85+
<Heading className={classes.modalHeader} size='xs' spacing>
8986
<img src='img/emblem.svg' alt='' className={classes.emblem} />
9087
<span className={classes.headerText}>Kopier fargetema</span>
91-
</Modal.Header>
92-
<Modal.Content className={classes.modalContent}>
93-
<Ingress size='xs' spacing>
94-
Velg et av alternativene under for å ta i bruk design-tokens med
95-
ditt tema.
96-
</Ingress>
97-
<Heading level={3} size='xs' spacing>
98-
Alt 1. Design tokens
99-
</Heading>
100-
<Textfield
101-
label='Navn på tema'
102-
description="Kun bokstaver, tall og bindestrek. Eks: 'mitt-tema'"
103-
value={themeName}
104-
onChange={(e) => {
105-
const value = e.currentTarget.value
106-
.replace(/\s+/g, '-')
107-
.replace(/[^A-Z0-9-]+/gi, '')
108-
.toLowerCase();
88+
</Heading>
89+
<Ingress size='xs' spacing>
90+
Velg et av alternativene under for å ta i bruk design-tokens med ditt
91+
tema.
92+
</Ingress>
93+
<Heading level={3} size='xs' spacing>
94+
Alt 1. Design tokens
95+
</Heading>
96+
<Textfield
97+
label='Navn på tema'
98+
description="Kun bokstaver, tall og bindestrek. Eks: 'mitt-tema'"
99+
value={themeName}
100+
onChange={(e) => {
101+
const value = e.currentTarget.value
102+
.replace(/\s+/g, '-')
103+
.replace(/[^A-Z0-9-]+/gi, '')
104+
.toLowerCase();
109105

110-
setThemeName(value);
111-
}}
112-
style={{ marginBlock: 'var(--ds-spacing-4)' }}
113-
></Textfield>
114-
<Paragraph spacing>
115-
Kopier kommandosnutten under og kjør på maskinen din for å generere
116-
alle design tokens (json-filer). Sørg for at du har{' '}
117-
<Link href='https://nodejs.org' target='_blank'>
118-
Node.js (åpnes i ny fane)
119-
</Link>{' '}
120-
installert på maskinen din.
121-
</Paragraph>
122-
<div
123-
className={classes.snippet}
124-
style={{ marginBottom: 'var(--ds-spacing-8)' }}
106+
setThemeName(value);
107+
}}
108+
style={{ marginBlock: 'var(--ds-spacing-4)' }}
109+
/>
110+
<Paragraph spacing>
111+
Kopier kommandosnutten under og kjør på maskinen din for å generere
112+
alle design tokens (json-filer). Sørg for at du har{' '}
113+
<Link href='https://nodejs.org' target='_blank'>
114+
Node.js (åpnes i ny fane)
115+
</Link>{' '}
116+
installert på maskinen din.
117+
</Paragraph>
118+
<div
119+
className={classes.snippet}
120+
style={{ marginBottom: 'var(--ds-spacing-8)' }}
121+
>
122+
<CodeSnippet syntax='shell'>{cliSnippet}</CodeSnippet>
123+
</div>
124+
<Heading level={3} size='xs' spacing>
125+
Alt 2. Figma plugin
126+
</Heading>
127+
<Paragraph spacing>
128+
JSON for bruk med Designsystemet{' '}
129+
<Link
130+
href='https://www.figma.com/community/plugin/1382044395533039221/designsystemet-beta'
131+
target='_blank'
125132
>
126-
<CodeSnippet syntax='shell'>{cliSnippet}</CodeSnippet>
127-
</div>
128-
<Heading level={3} size='xs' spacing>
129-
Alt 2. Figma plugin
130-
</Heading>
131-
<Paragraph spacing>
132-
JSON for bruk med Designsystemet{' '}
133-
<Link
134-
href='https://www.figma.com/community/plugin/1382044395533039221/designsystemet-beta'
135-
target='_blank'
136-
>
137-
Figma Plugin (åpnes i ny fane)
138-
</Link>{' '}
139-
og{' '}
140-
<Link
141-
href='https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit'
142-
target='_blank'
143-
>
144-
Figma UI kit (åpnes i ny fane)
145-
</Link>
146-
.
147-
</Paragraph>
148-
<Paragraph spacing>
149-
Dette alternativet er kun ment for rask prototyping av valgt tema i
150-
Figma. For å bruke design tokens i produksjon, anbefales det å bruke
151-
alternativ 1.
152-
</Paragraph>
153-
<div className={classes.content}>
154-
<div className={classes.column}>
155-
<Heading level={4} size='2xs' spacing>
156-
Light Mode
157-
</Heading>
158-
<div className={classes.snippet}>
159-
<CodeSnippet language='json'>{lightThemeSnippet}</CodeSnippet>
160-
</div>
133+
Figma Plugin (åpnes i ny fane)
134+
</Link>{' '}
135+
og{' '}
136+
<Link
137+
href='https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit'
138+
target='_blank'
139+
>
140+
Figma UI kit (åpnes i ny fane)
141+
</Link>
142+
.
143+
</Paragraph>
144+
<Paragraph spacing>
145+
Dette alternativet er kun ment for rask prototyping av valgt tema i
146+
Figma. For å bruke design tokens i produksjon, anbefales det å bruke
147+
alternativ 1.
148+
</Paragraph>
149+
<div className={classes.content}>
150+
<div className={classes.column}>
151+
<Heading level={4} size='2xs' spacing>
152+
Light Mode
153+
</Heading>
154+
<div className={classes.snippet}>
155+
<CodeSnippet language='json'>{lightThemeSnippet}</CodeSnippet>
161156
</div>
162-
<div className={classes.column}>
163-
<Heading level={4} size='2xs' spacing>
164-
Dark Mode
165-
</Heading>
166-
<div className={classes.snippet}>
167-
<CodeSnippet language='json'>{darkThemeSnippet}</CodeSnippet>
168-
</div>
157+
</div>
158+
<div className={classes.column}>
159+
<Heading level={4} size='2xs' spacing>
160+
Dark Mode
161+
</Heading>
162+
<div className={classes.snippet}>
163+
<CodeSnippet language='json'>{darkThemeSnippet}</CodeSnippet>
169164
</div>
170165
</div>
171-
</Modal.Content>
172-
</Modal.Dialog>
173-
</Modal.Root>
166+
</div>
167+
</Modal>
168+
</Modal.Context>
174169
);
175170
};

0 commit comments

Comments
 (0)