mirror of
https://github.com/suitenumerique/docs.git
synced 2026-08-17 21:25:43 +02:00
🏷️(frontend) adapt types to upgrade Cunningham and ui-kit
We upgraded Cunningham and ui-kit dependencies, which introduced some breaking changes. This commit adapts our code to these changes, ensuring compatibility with the new versions of these libraries.
This commit is contained in:
@@ -2,7 +2,7 @@ import {
|
||||
Button,
|
||||
ButtonProps,
|
||||
Modal,
|
||||
ModalProps,
|
||||
ModalDefaultVariantProps,
|
||||
ModalSize,
|
||||
} from '@gouvfr-lasuite/cunningham-react';
|
||||
import { ReactNode, useEffect } from 'react';
|
||||
@@ -20,7 +20,7 @@ export type AlertModalProps = {
|
||||
title: string;
|
||||
cancelLabel?: string;
|
||||
confirmLabel?: string;
|
||||
} & Partial<ModalProps>;
|
||||
} & Partial<ModalDefaultVariantProps>;
|
||||
|
||||
export const AlertModal = ({
|
||||
cancelLabel,
|
||||
|
||||
@@ -49,7 +49,7 @@ export const SideModal = ({
|
||||
return (
|
||||
<>
|
||||
<SideModalStyle width={width} side={side} $css={$css} />
|
||||
<Modal {...modalProps} size={ModalSize.FULL}>
|
||||
<Modal {...modalProps} size={ModalSize.FULL} variant="default">
|
||||
{children}
|
||||
</Modal>
|
||||
</>
|
||||
|
||||
@@ -70,6 +70,7 @@
|
||||
|
||||
.c__modal__title {
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.c__modal__footer {
|
||||
|
||||
@@ -361,7 +361,7 @@
|
||||
--c--globals--font--weights--medium: 500;
|
||||
--c--globals--font--weights--bold: 600;
|
||||
--c--globals--font--weights--extrabold: 800;
|
||||
--c--globals--font--weights--black: 900;
|
||||
--c--globals--font--weights--black: 800;
|
||||
--c--globals--font--families--base:
|
||||
inter variable, roboto flex variable, sans-serif;
|
||||
--c--globals--font--families--accent:
|
||||
@@ -849,6 +849,18 @@
|
||||
--c--components--forms-checkbox--font-size: var(
|
||||
--c--globals--font--sizes--sm
|
||||
);
|
||||
--c--components--forms-input--border-radius: 4px;
|
||||
--c--components--forms-input--border-radius--hover: 4px;
|
||||
--c--components--forms-input--border-radius--focus: 4px;
|
||||
--c--components--forms-select--border-radius: 4px;
|
||||
--c--components--forms-select--border-radius--hover: 4px;
|
||||
--c--components--forms-select--border-radius--focus: 4px;
|
||||
--c--components--forms-textarea--border-radius: 4px;
|
||||
--c--components--forms-textarea--border-radius--hover: 4px;
|
||||
--c--components--forms-textarea--border-radius--focus: 4px;
|
||||
--c--components--forms-datepicker--border-radius: 4px;
|
||||
--c--components--forms-datepicker--border-radius--hover: 4px;
|
||||
--c--components--forms-datepicker--border-radius--focus: 4px;
|
||||
--c--components--badge--font-size: var(--c--globals--font--sizes--xs);
|
||||
--c--components--badge--border-radius: 12px;
|
||||
--c--components--badge--padding-inline: var(--c--globals--spacings--xs);
|
||||
@@ -1731,7 +1743,6 @@
|
||||
--c--globals--font--sizes--xs-alt: 3rem;
|
||||
--c--globals--font--weights--thin: 100;
|
||||
--c--globals--font--weights--extrabold: 800;
|
||||
--c--globals--font--weights--black: 900;
|
||||
--c--globals--font--families--accent:
|
||||
marianne, inter variable, roboto flex variable, sans-serif;
|
||||
--c--globals--font--families--base:
|
||||
@@ -2539,6 +2550,18 @@
|
||||
--c--components--forms-checkbox--font-size: var(
|
||||
--c--globals--font--sizes--sm
|
||||
);
|
||||
--c--components--forms-input--border-radius: 4px;
|
||||
--c--components--forms-input--border-radius--hover: 4px;
|
||||
--c--components--forms-input--border-radius--focus: 4px;
|
||||
--c--components--forms-select--border-radius: 4px;
|
||||
--c--components--forms-select--border-radius--hover: 4px;
|
||||
--c--components--forms-select--border-radius--focus: 4px;
|
||||
--c--components--forms-textarea--border-radius: 4px;
|
||||
--c--components--forms-textarea--border-radius--hover: 4px;
|
||||
--c--components--forms-textarea--border-radius--focus: 4px;
|
||||
--c--components--forms-datepicker--border-radius: 4px;
|
||||
--c--components--forms-datepicker--border-radius--hover: 4px;
|
||||
--c--components--forms-datepicker--border-radius--focus: 4px;
|
||||
--c--components--badge--font-size: var(--c--globals--font--sizes--xs);
|
||||
--c--components--badge--border-radius: 12px;
|
||||
--c--components--badge--padding-inline: var(--c--globals--spacings--xs);
|
||||
|
||||
@@ -372,7 +372,7 @@ export const tokens = {
|
||||
medium: 500,
|
||||
bold: 600,
|
||||
extrabold: 800,
|
||||
black: 900,
|
||||
black: 800,
|
||||
},
|
||||
families: {
|
||||
base: 'Inter Variable, Roboto Flex Variable, sans-serif',
|
||||
@@ -664,6 +664,26 @@ export const tokens = {
|
||||
'body--background-color-hover': '#F0F0F3',
|
||||
},
|
||||
'forms-checkbox': { 'font-size': '0.875rem' },
|
||||
'forms-input': {
|
||||
'border-radius': '4px',
|
||||
'border-radius--hover': '4px',
|
||||
'border-radius--focus': '4px',
|
||||
},
|
||||
'forms-select': {
|
||||
'border-radius': '4px',
|
||||
'border-radius--hover': '4px',
|
||||
'border-radius--focus': '4px',
|
||||
},
|
||||
'forms-textarea': {
|
||||
'border-radius': '4px',
|
||||
'border-radius--hover': '4px',
|
||||
'border-radius--focus': '4px',
|
||||
},
|
||||
'forms-datepicker': {
|
||||
'border-radius': '4px',
|
||||
'border-radius--hover': '4px',
|
||||
'border-radius--focus': '4px',
|
||||
},
|
||||
badge: {
|
||||
'font-size': '0.75rem',
|
||||
'border-radius': '12px',
|
||||
@@ -1334,7 +1354,7 @@ export const tokens = {
|
||||
'sm-alt': '3.5rem',
|
||||
'xs-alt': '3rem',
|
||||
},
|
||||
weights: { thin: 100, extrabold: 800, black: 900 },
|
||||
weights: { thin: 100, extrabold: 800 },
|
||||
families: {
|
||||
accent:
|
||||
'Marianne, Inter Variable, Roboto Flex Variable, sans-serif',
|
||||
@@ -1948,6 +1968,26 @@ export const tokens = {
|
||||
'body--background-color-hover': '#F0F0F3',
|
||||
},
|
||||
'forms-checkbox': { 'font-size': '0.875rem' },
|
||||
'forms-input': {
|
||||
'border-radius': '4px',
|
||||
'border-radius--hover': '4px',
|
||||
'border-radius--focus': '4px',
|
||||
},
|
||||
'forms-select': {
|
||||
'border-radius': '4px',
|
||||
'border-radius--hover': '4px',
|
||||
'border-radius--focus': '4px',
|
||||
},
|
||||
'forms-textarea': {
|
||||
'border-radius': '4px',
|
||||
'border-radius--hover': '4px',
|
||||
'border-radius--focus': '4px',
|
||||
},
|
||||
'forms-datepicker': {
|
||||
'border-radius': '4px',
|
||||
'border-radius--hover': '4px',
|
||||
'border-radius--focus': '4px',
|
||||
},
|
||||
badge: {
|
||||
'font-size': '0.75rem',
|
||||
'border-radius': '12px',
|
||||
|
||||
@@ -8,12 +8,16 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-id-pattern */
|
||||
body > #__next > .c__app > div:has(> .c__loader) {
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
* {
|
||||
|
||||
Reference in New Issue
Block a user