agroptima-design-system 1.2.39-beta.0 → 1.2.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.2.39-beta.0",
+  "version": "1.2.39",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/CardsTable/CardsTable.scss

@@ -144,14 +144,6 @@
   @media only screen and (max-width: breakpoints.$large) {
     .cards-table-head {
       display: none;
-
-      &:has(.desktop-only) {
-        display: table-header-group;
-
-        .cards-table-row {
-          display: table-row;
-        }
-      }
     }
 
     .cards-table-row {

package/src/atoms/CardsTable/CardsTableHeader.tsx

@@ -4,7 +4,6 @@ import { Alignment } from './CardsTableCell'
 export interface CardsTableHeaderProps extends React.ComponentPropsWithoutRef<'th'> {
   align?: Alignment
   actions?: boolean
-  desktopOnly?: boolean
 }
 
 export function CardsTableHeader({
@@ -12,17 +11,10 @@ export function CardsTableHeader({
   className,
   align = Alignment.Left,
   actions = false,
-  desktopOnly = false,
   ...props
 }: CardsTableHeaderProps) {
   return (
-    <th
-      role="columnheader"
-      className={classNames('cards-table-header', {
-        'desktop-only': desktopOnly,
-      })}
-      {...props}
-    >
+    <th role="columnheader" className="cards-table-header" {...props}>
       <div
         className={classNames(
           'cards-table-inner-cell',

package/src/atoms/Modal/ModalDialog.tsx

@@ -29,14 +29,14 @@ export function ModalDialog({
   }
 
   useEffect(() => {
+    if (!isOpen) return
+
     keepScrollbarSpace()
-    window.addEventListener('resize', keepScrollbarSpace)
 
     return () => {
       removeScrollbarSpace()
-      window.removeEventListener('resize', keepScrollbarSpace)
     }
-  }, [])
+  }, [isOpen])
 
   useEffect(() => {
     const dialog = dialogRef.current

package/src/stories/Changelog.mdx

@@ -6,7 +6,8 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 ## 1.2.39
 
-* Add `desktopOnly` prop to CardsTableHeader
+* Fix Modal scroll lock not being cleared when the component stays mounted and `isOpen` toggles to `false`
+* Fix Modal scroll lock width flickering on window resize while open, caused by recalculating the scrollbar width after `overflow: hidden` had already removed it
 
 ## 1.2.38
 

package/src/stories/Modal.stories.tsx

@@ -37,7 +37,7 @@ const meta = {
           '  <li>Require a response from the user</li>' +
           '  <li>Notify the user of any related information</li>' +
           '  <li>Confirm a user decision</li>' +
-          "  <li>It's opened/closed through `isOpen` prop. If we don't want it to be part of the DOM, we can also add a conditional render on the frontend project.</li>" +
+          "  <li>It's opened/closed through `isOpen` prop — the component can be left mounted and toggled. If we don't want it to be part of the DOM at all (e.g. to avoid rendering its contents until needed), we can also add a conditional render on the frontend project.</li>" +
           '  <li>Natively, focus is set on the first nested focusable element and explicitly indicated by default by the browser</li>' +
           "  <li>When nesting a Form inside Modal component, remember to add `type='button'` to all Cancel buttons to not to be considered as submitable</li>" +
           '</ul>',

package/tests/CardsTable.spec.tsx

@@ -128,23 +128,4 @@ describe('CardsTable', () => {
     expect(getAllByRole('row').length).toBeGreaterThan(1)
     expect(getAllByRole('cell').length).toBeGreaterThan(1)
   })
-
-  it('marks a header as desktop-only', () => {
-    const { getByRole } = render(
-      <CardsTable>
-        <CardsTableHead>
-          <CardsTableRow>
-            <CardsTableHeader desktopOnly>Game title</CardsTableHeader>
-          </CardsTableRow>
-        </CardsTableHead>
-        <CardsTableBody>
-          <CardsTableRow>
-            <CardsTableCell>Tekken 8</CardsTableCell>
-          </CardsTableRow>
-        </CardsTableBody>
-      </CardsTable>,
-    )
-
-    expect(getByRole('columnheader').className).toContain('desktop-only')
-  })
 })

package/tests/Modal.spec.tsx

@@ -145,4 +145,50 @@ describe('Modal', () => {
     expect(screen.queryAllByRole('option')).toHaveLength(3)
     expect(screen.getByRole('option', { name: 'Item 3' })).toBeInTheDocument()
   })
+
+  it('clears the scroll lock when isOpen toggles to false while the modal stays mounted', async () => {
+    const originalInnerWidth = window.innerWidth
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: 1024,
+    })
+    Object.defineProperty(document.documentElement, 'clientWidth', {
+      configurable: true,
+      value: 1000,
+    })
+
+    const user = userEvent.setup()
+    const ToggleableModal = () => {
+      const [isOpen, setIsOpen] = React.useState(true)
+
+      return (
+        <Modal
+          id="scroll-lock-modal"
+          isOpen={isOpen}
+          title="Scroll lock modal"
+          buttons={[
+            {
+              label: 'Close',
+              onClick: () => setIsOpen(false),
+            },
+          ]}
+        >
+          content
+        </Modal>
+      )
+    }
+
+    render(<ToggleableModal />)
+
+    expect(document.documentElement).toHaveClass('modal-scroll')
+
+    await user.click(screen.getByRole('button', { name: 'Close' }))
+
+    expect(document.documentElement).not.toHaveClass('modal-scroll')
+
+    Object.defineProperty(window, 'innerWidth', {
+      configurable: true,
+      value: originalInnerWidth,
+    })
+  })
 })