diff --git a/.changeset/silly-chefs-crash.md b/.changeset/silly-chefs-crash.md new file mode 100644 index 00000000..637078ad --- /dev/null +++ b/.changeset/silly-chefs-crash.md @@ -0,0 +1,7 @@ +--- +'@smile/react-front-kit-table': minor +'@smile/react-front-kit': minor +'storybook-pages': minor +--- + +Fixed and adjusted mobile styles for Breadcrumbs, Pagination, SearchBar, FoldableColumnLayout, InfoCard, Table. Modified example pages. Added test file to FilterList. diff --git a/packages/react-front-kit-table/src/Components/Table/__snapshots__/Table.test.tsx.snap b/packages/react-front-kit-table/src/Components/Table/__snapshots__/Table.test.tsx.snap index f93346a2..488e13be 100644 --- a/packages/react-front-kit-table/src/Components/Table/__snapshots__/Table.test.tsx.snap +++ b/packages/react-front-kit-table/src/Components/Table/__snapshots__/Table.test.tsx.snap @@ -1209,11 +1209,11 @@ exports[`Table matches snapshot 1`] = ` class="mantine-1cw9ra3" />
+
+
+`; diff --git a/packages/react-front-kit/src/Components/HeaderSearch/__snapshots__/HeaderSearch.test.tsx.snap b/packages/react-front-kit/src/Components/HeaderSearch/__snapshots__/HeaderSearch.test.tsx.snap index 3adbaed3..9a0f01e7 100644 --- a/packages/react-front-kit/src/Components/HeaderSearch/__snapshots__/HeaderSearch.test.tsx.snap +++ b/packages/react-front-kit/src/Components/HeaderSearch/__snapshots__/HeaderSearch.test.tsx.snap @@ -10,21 +10,21 @@ exports[`HeaderSearch matches snapshot 1`] = ` >
diff --git a/packages/react-front-kit/src/Components/InfoCard/InfoCard.style.tsx b/packages/react-front-kit/src/Components/InfoCard/InfoCard.style.tsx index 8d16a2af..759ebeb0 100644 --- a/packages/react-front-kit/src/Components/InfoCard/InfoCard.style.tsx +++ b/packages/react-front-kit/src/Components/InfoCard/InfoCard.style.tsx @@ -5,10 +5,9 @@ import { createStyles } from '@mantine/core'; export const useStyles = createStyles( (theme, responsiveBreakpoint: IMantineBreakpoint) => ({ collapseButton: { - [`@media screen and (max-width: ${theme.breakpoints[responsiveBreakpoint]})`]: - { - margin: 'auto', - }, + [theme.fn.smallerThan(responsiveBreakpoint)]: { + margin: 'auto', + }, margin: '12px', }, collapseButtonCenter: { @@ -20,12 +19,11 @@ export const useStyles = createStyles( width: '100%', }, container: { - [`@media screen and (max-width: ${theme.breakpoints[responsiveBreakpoint]})`]: - { - flexDirection: 'column', - margin: 'auto', - width: 'fit-content', - }, + [theme.fn.smallerThan(responsiveBreakpoint)]: { + flexDirection: 'column', + margin: 'auto', + width: 'fit-content', + }, display: 'flex', flexWarp: 'wrap', gap: 10, @@ -48,10 +46,10 @@ export const useStyles = createStyles( maxWidth: 175, }, contentItems: { - [`@media screen and (max-width: ${theme.breakpoints[responsiveBreakpoint]})`]: - { - minWidth: '0px', - }, + [theme.fn.smallerThan(responsiveBreakpoint)]: { + marginBottom: '16px', + minWidth: '0px', + }, columnGap: 40, display: 'flex', flexWrap: 'wrap', @@ -60,10 +58,9 @@ export const useStyles = createStyles( rowGap: 10, }, leftContainer: { - [`@media screen and (max-width: ${theme.breakpoints[responsiveBreakpoint]})`]: - { - minWidth: '0px !important', - }, + [theme.fn.smallerThan(responsiveBreakpoint)]: { + minWidth: '0px !important', + }, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', @@ -76,15 +73,17 @@ export const useStyles = createStyles( zIndex: 0, }, rightContainer: { - [`@media screen and (max-width: ${theme.breakpoints[responsiveBreakpoint]})`]: - { - maxWidth: 440, - }, + [theme.fn.smallerThan(responsiveBreakpoint)]: { + maxWidth: 440, + }, display: 'flex', height: '100%', width: '100%', }, root: { + [theme.fn.smallerThan(responsiveBreakpoint)]: { + padding: '20px 16px', + }, overflow: 'hidden', padding: '24px 48px', position: 'relative', @@ -94,9 +93,16 @@ export const useStyles = createStyles( 'h1, h2, h3, h4 h5, p': { fontSize: '26px', fontWeight: 700, + margin: 0, + [theme.fn.smallerThan(responsiveBreakpoint)]: { + fontSize: '18px', + }, }, }, topContent: { + [theme.fn.smallerThan(responsiveBreakpoint)]: { + rowGap: '8px', + }, display: 'flex', flexDirection: 'column', rowGap: 24, diff --git a/packages/react-front-kit/src/Components/InfoCard/__snapshots__/InfoCard.test.tsx.snap b/packages/react-front-kit/src/Components/InfoCard/__snapshots__/InfoCard.test.tsx.snap index f6f88c82..8da580fb 100644 --- a/packages/react-front-kit/src/Components/InfoCard/__snapshots__/InfoCard.test.tsx.snap +++ b/packages/react-front-kit/src/Components/InfoCard/__snapshots__/InfoCard.test.tsx.snap @@ -3,7 +3,7 @@ exports[`InfoCard matches snapshot 1`] = `
+
+ +
+
+
- Gérer les filtres - - - } - /> + } + topContent={ + + + + } + /> +
+
+ + } + topContent={ + + + + } + /> +
({ fontWeight: 600, marginBottom: '4px', }, + documentListContainer: { + [theme.fn.smallerThan('sm')]: { + padding: '24px 16px 32px 16px', + }, + borderRadius: 16, + padding: '48px 56px', + }, periodContainer: { padding: '6px 0', }, select: { + [theme.fn.smallerThan('sm')]: { + input: { + fontSize: '14px', + padding: '0 16px', + }, + }, ':focus, :focus-within': { outline: `${rem(2)} solid ${theme.colors.orange[5]}`, }, borderRadius: '1.5rem', }, + selectDropdown: { + left: '0 !important', + maxWidth: 'calc(100vw - 48px)', + width: '100% !important', + }, + selectRight: { + width: '1.5rem', + }, })); diff --git a/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx b/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx index b8e514a1..74327b6a 100644 --- a/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx +++ b/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx @@ -436,6 +436,10 @@ export function SearchResults(): ReactElement { leftSection={