Fix/responsive fixes (#107)

* fix(redmine 1273153): multiple mobile style fixes
Smile-SA · Jan 12, 2024 · ce44552 · ce44552
1 parent 4915a4b
commit ce44552
Show file tree

Hide file tree

Showing 27 changed files with 542 additions and 192 deletions.
diff --git a/.changeset/silly-chefs-crash.md 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
@@ -1209,11 +1209,11 @@ exports[`Table matches snapshot 1`] = `
     class="mantine-1cw9ra3"
   />
   <div
-    class="mantine-z9baz5"
+    class="mantine-brykyr"
     data-testid="pagination"
   >
     <div
-      class="mantine-Group-root mantine-11nlj0o"
+      class="mantine-Group-root mantine-uxw5g5"
       data-testid="pagination-page"
     >
       <button

diff --git a/...ct-front-kit-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap b/...ct-front-kit-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap
@@ -2012,11 +2012,11 @@ exports[`TableGridView matches snapshot 1`] = `
         class="mantine-1cw9ra3"
       />
       <div
-        class="mantine-z9baz5"
+        class="mantine-brykyr"
         data-testid="pagination"
       >
         <div
-          class="mantine-Group-root mantine-11nlj0o"
+          class="mantine-Group-root mantine-uxw5g5"
           data-testid="pagination-page"
         >
           <button

diff --git a/packages/react-front-kit/src/Components/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/react-front-kit/src/Components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -20,13 +20,13 @@ export const Breadcrumbs: IStory = {
   args: {
     children: [
       <a key={1} data-testid="Breadcrumbs-first-element" href="test">
-        test
+        test string
       </a>,
       <a key={2} data-testid="Breadcrumbs-second-element" href="test">
-        test
+        another string
       </a>,
       <a key={3} data-testid="Breadcrumbs-last-element" href="test">
-        test
+        a slightly longer string
       </a>,
     ],
   },

diff --git a/packages/react-front-kit/src/Components/Breadcrumbs/Breadcrumbs.tsx b/packages/react-front-kit/src/Components/Breadcrumbs/Breadcrumbs.tsx
@@ -44,13 +44,22 @@ export function Breadcrumbs(props: IBreadcrumbsProps): ReactElement {
       marginRight: '1em',
       textDecoration: 'none',
       textTransform: 'capitalize',
+      [theme.fn.smallerThan('md')]: {
+        marginLeft: '0',
+        marginRight: '0',
+      },
+    },
+    container: {
+      flexWrap: 'wrap',
+      rowGap: '5px',
     },
   }));
 
   const { classes } = useStyles();
 
   return (
     <MantineBreadcrumbs
+      className={classes.container}
       classNames={{
         breadcrumb: classes.breadcrumb,
       }}

diff --git a/packages/react-front-kit/src/Components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap b/packages/react-front-kit/src/Components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`Breadcrumbs matches snapshot 1`] = `
 <div>
   <div
-    class="mantine-Breadcrumbs-root mantine-1ujbd2v"
+    class="mantine-Breadcrumbs-root mantine-1f07axn"
     data-testid="Breadcrumbs"
   >
     <a
-      class="mantine-Breadcrumbs-breadcrumb mantine-eg71k5"
+      class="mantine-Breadcrumbs-breadcrumb mantine-1tn4w6e"
       href="test"
     >
       test
@@ -31,7 +31,7 @@ exports[`Breadcrumbs matches snapshot 1`] = `
       </svg>
     </div>
     <a
-      class="mantine-Breadcrumbs-breadcrumb mantine-eg71k5"
+      class="mantine-Breadcrumbs-breadcrumb mantine-1tn4w6e"
       href="test"
     >
       test

diff --git a/packages/react-front-kit/src/Components/FilterList/FilterList.test.tsx b/packages/react-front-kit/src/Components/FilterList/FilterList.test.tsx
@@ -0,0 +1,17 @@
+import { renderWithProviders } from '@smile/react-front-kit-shared/test-utils';
+
+import { FilterList } from './FilterList';
+import { filtersMock } from './FilterList.mock';
+
+describe('FilterList', () => {
+  beforeEach(() => {
+    // Prevent mantine random ID
+    Math.random = () => 0.42;
+  });
+  it('matches snapshot', () => {
+    const { container } = renderWithProviders(
+      <FilterList filters={filtersMock} />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-front-kit/src/Components/FilterList/__snapshots__/FilterList.test.tsx.snap b/packages/react-front-kit/src/Components/FilterList/__snapshots__/FilterList.test.tsx.snap
@@ -0,0 +1,109 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FilterList matches snapshot 1`] = `
+<div>
+  <div
+    class="mantine-Group-root mantine-8k3bl3"
+  >
+    <span
+      class="mantine-1eieff6"
+    >
+      <div
+        class="mantine-InputWrapper-root mantine-TextInput-root mantine-q6oiko"
+      >
+        <div
+          class="mantine-Input-wrapper mantine-TextInput-wrapper mantine-1v7s5f8"
+        >
+          <input
+            aria-invalid="false"
+            class="mantine-Input-input mantine-TextInput-input mantine-1qswl1p"
+            id="mantine-f4bipx4bi"
+            placeholder="some value"
+            type="text"
+          />
+        </div>
+      </div>
+    </span>
+    <span
+      class="mantine-1eieff6"
+    >
+      <div
+        class="mantine-InputWrapper-root mantine-Select-root mantine-q6oiko"
+      >
+        <div
+          aria-controls="mantine-f4bipx4bi"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          class=""
+          role="combobox"
+          tabindex="-1"
+        >
+          <input
+            type="hidden"
+            value="another value"
+          />
+          <div
+            class="mantine-Input-wrapper mantine-Select-wrapper mantine-1v7s5f8"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-invalid="false"
+              autocomplete="off"
+              class="mantine-Input-input mantine-Select-input mantine-kkodi1"
+              data-mantine-stop-propagation="false"
+              id="mantine-f4bipx4bi"
+              readonly=""
+              type="search"
+              value="Another value"
+            />
+            <div
+              class="mantine-1qj7q0z mantine-Input-rightSection mantine-Select-rightSection"
+            >
+              <svg
+                data-chevron="true"
+                fill="none"
+                style="color: rgb(134, 142, 150); width: 1.125rem; height: 1.125rem;"
+                viewBox="0 0 15 15"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.35753 11.9939 7.64245 11.9939 7.81819 11.8182L10.0682 9.56819Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </span>
+    <button
+      class="mantine-UnstyledButton-root mantine-Button-root mantine-13kxxue"
+      data-button="true"
+      type="button"
+    >
+      <div
+        class="mantine-1wpc1xj mantine-Button-inner"
+      >
+        <span
+          class="mantine-Button-label mantine-1bj6mez"
+        >
+          <svg
+            fill="#25262b"
+            height="12"
+            viewBox="0 0 256 256"
+            width="12"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"
+            />
+          </svg>
+          Manage filters
+        </span>
+      </div>
+    </button>
+  </div>
+</div>
+`;
diff --git a/...ages/react-front-kit/src/Components/HeaderSearch/__snapshots__/HeaderSearch.test.tsx.snap b/...ages/react-front-kit/src/Components/HeaderSearch/__snapshots__/HeaderSearch.test.tsx.snap
@@ -10,21 +10,21 @@ exports[`HeaderSearch matches snapshot 1`] = `
     >
       <div
         aria-invalid="false"
-        class="mantine-Input-input mantine-htzl2s"
+        class="mantine-Input-input mantine-1dmg58i"
       >
         <form
-          class="mantine-1r7r49a"
+          class="mantine-whzeux"
         >
           <div
-            class="mantine-InputWrapper-root mantine-TextInput-root mantine-1gq3695"
+            class="mantine-InputWrapper-root mantine-TextInput-root mantine-12ka740"
           >
             <div
-              class="mantine-Input-wrapper mantine-TextInput-wrapper mantine-1v7s5f8"
+              class="mantine-Input-wrapper mantine-TextInput-wrapper mantine-8qx5cx"
             >
               <input
                 aria-invalid="false"
                 aria-label="Search"
-                class="mantine-Input-input mantine-TextInput-input mantine-moncl8"
+                class="mantine-Input-input mantine-TextInput-input mantine-oxqjuq"
                 id="header-search-test"
                 type="text"
               />

diff --git 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
@@ -3,7 +3,7 @@
 exports[`InfoCard matches snapshot 1`] = `
 <div>
   <div
-    class="mantine-Paper-root mantine-1c9cez"
+    class="mantine-Paper-root mantine-qohb4"
   >
     <div
       class="mantine-3ceds6"
@@ -83,13 +83,13 @@ exports[`InfoCard matches snapshot 1`] = `
       </svg>
     </div>
     <div
-      class="mantine-16i2ou0"
+      class="mantine-zgf7o4"
     >
       <div
-        class="mantine-1ix8z3a"
+        class="mantine-n2dg4j"
       >
         <div
-          class="mantine-fs5sma"
+          class="mantine-1nzzzm4"
         >
           <div
             aria-hidden="false"
@@ -111,12 +111,12 @@ exports[`InfoCard matches snapshot 1`] = `
           style="opacity: 1; transition: opacity 200ms ease;"
         >
           <div
-            class="mantine-mdtrmb"
+            class="mantine-12iozhk"
           />
         </div>
       </div>
       <button
-        class="mantine-UnstyledButton-root mantine-ActionIcon-root false mantine-17zqvpa"
+        class="mantine-UnstyledButton-root mantine-ActionIcon-root false mantine-d111cq"
         type="button"
       >
         <svg