mirror of
https://github.com/suitenumerique/docs.git
synced 2026-08-17 21:25:43 +02:00
🚨(frontend) adapt code to ui-kit v0.28
ui-kit v0.28 breaks some UI components. This commit updates the relevant files to ensure compatibility with the new version of ui-kit. We update the cunningham-tokens.css and cunningham-tokens.ts files to reflect the changes in the design tokens.
This commit is contained in:
@@ -18,10 +18,10 @@ describe('<Box />', () => {
|
||||
);
|
||||
|
||||
expect(screen.getByText('My Box')).toHaveStyle(`
|
||||
padding-left: 2.5rem;
|
||||
padding-right: 2.5rem;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 0.5rem;`);
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 8px;`);
|
||||
});
|
||||
|
||||
it('has the margin from prop', () => {
|
||||
@@ -46,7 +46,7 @@ describe('<Box />', () => {
|
||||
expect(screen.getByText('My Box')).toHaveStyle(`
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 1.625rem;
|
||||
margin-top: 26px;
|
||||
margin-bottom: 100%;`);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -849,6 +849,9 @@
|
||||
--c--components--datagrid--body--background-color-hover: var(
|
||||
--c--contextuals--background--semantic--neutral--tertiary
|
||||
);
|
||||
--c--components--forms-fileuploader--border-style: solid;
|
||||
--c--components--forms-fileuploader--border-radius: 4px;
|
||||
--c--components--forms-fileuploader--border-width: 1px;
|
||||
--c--components--forms-checkbox--font-size: var(
|
||||
--c--globals--font--sizes--sm
|
||||
);
|
||||
@@ -2553,6 +2556,9 @@
|
||||
--c--components--datagrid--body--background-color-hover: var(
|
||||
--c--contextuals--background--semantic--neutral--tertiary
|
||||
);
|
||||
--c--components--forms-fileuploader--border-style: solid;
|
||||
--c--components--forms-fileuploader--border-radius: 4px;
|
||||
--c--components--forms-fileuploader--border-width: 1px;
|
||||
--c--components--forms-checkbox--font-size: var(
|
||||
--c--globals--font--sizes--sm
|
||||
);
|
||||
|
||||
@@ -664,6 +664,11 @@ export const tokens = {
|
||||
'header--weight': '500',
|
||||
'body--background-color-hover': '#F0F0F3',
|
||||
},
|
||||
'forms-fileuploader': {
|
||||
'border-style': 'solid',
|
||||
'border-radius': '4px',
|
||||
'border-width': '1px',
|
||||
},
|
||||
'forms-checkbox': { 'font-size': '0.875rem' },
|
||||
'forms-input': {
|
||||
'border-radius': '4px',
|
||||
@@ -1969,6 +1974,11 @@ export const tokens = {
|
||||
'header--weight': '500',
|
||||
'body--background-color-hover': '#F0F0F3',
|
||||
},
|
||||
'forms-fileuploader': {
|
||||
'border-style': 'solid',
|
||||
'border-radius': '4px',
|
||||
'border-width': '1px',
|
||||
},
|
||||
'forms-checkbox': { 'font-size': '0.875rem' },
|
||||
'forms-input': {
|
||||
'border-radius': '4px',
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { UserMenu } from '@gouvfr-lasuite/ui-kit';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { createGlobalStyle } from 'styled-components';
|
||||
|
||||
import { Box, SeparatedSection } from '@/components';
|
||||
import { Waffle } from '@/components/Waffle';
|
||||
@@ -9,6 +10,12 @@ import { gotoLogout } from '@/features/auth/utils';
|
||||
import { HelpMenu } from '@/features/help';
|
||||
import { LanguagePicker } from '@/features/language/components/LanguagePicker';
|
||||
|
||||
const LeftPanelFooterGlobalStyle = createGlobalStyle`
|
||||
.user-menu__actions .c__language-picker{
|
||||
width: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
export const LeftPanelFooter = () => {
|
||||
const { t } = useTranslation();
|
||||
const { user } = useAuth();
|
||||
@@ -20,6 +27,7 @@ export const LeftPanelFooter = () => {
|
||||
|
||||
return (
|
||||
<SeparatedSection showSeparator="top" $margin={{ top: 'auto' }}>
|
||||
<LeftPanelFooterGlobalStyle />
|
||||
<Box
|
||||
$padding={{ horizontal: 'sm' }}
|
||||
$justify="space-between"
|
||||
|
||||
Reference in New Issue
Block a user