@charcoal-ui/react 4.0.0-beta.3 → 4.0.0-beta.4

package/src/components/IconButton/index.story.tsx

@@ -1,57 +1,34 @@
 import '@charcoal-ui/icons'
 import IconButton from '.'
-import type { KnownIconType } from '@charcoal-ui/icons'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'IconButton',
   component: IconButton,
-  argTypes: {
-    variant: {
-      control: {
-        type: 'inline-radio',
-        options: ['Default', 'Overlay'],
-      },
-    },
-    size: {
-      control: {
-        type: 'inline-radio',
-        options: ['M', 'S', 'XS'],
-      },
-    },
-    isActive: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  render: (props) => {
-    const { size } = props
-    const icon: keyof KnownIconType = {
-      XS: '16/Remove' as const,
-      S: '24/Close' as const,
-      M: '24/Close' as const,
-    }[size ?? 'M']
-    return <IconButton title="close" {...props} icon={icon} />
+  parameters: {
+    layout: 'centered',
   },
 } as Meta<typeof IconButton>
 
-export const DefaultM: StoryObj<typeof IconButton> = {
+export const Default: StoryObj<typeof IconButton> = {
   args: {
-    variant: 'Default',
-    size: 'M',
+    icon: '16/Add',
+  },
+  render: (props) => {
+    const title = props.icon.split('/').at(1)?.toLocaleLowerCase()
+
+    return <IconButton title={title} {...props} />
   },
 }
 
 export const IsActive: StoryObj<typeof IconButton> = {
-  args: {
-    isActive: true,
+  render: () => {
+    return <IconButton icon="16/Add" isActive />
   },
 }
 
-export const OverlayM: StoryObj<typeof IconButton> = {
-  args: {
-    variant: 'Overlay',
-    size: 'M',
+export const Overlay: StoryObj<typeof IconButton> = {
+  render: () => {
+    return <IconButton icon="16/Add" variant="Overlay" />
   },
 }

package/src/components/LoadingSpinner/__snapshots__/index.story.storyshot

@@ -34,7 +34,145 @@ exports[`Storybook Tests LoadingSpinner Default 1`] = `
   data-dark={false}
 >
   <div
-    className="c0 basic"
+    className="c0"
+    role="progressbar"
+    size={48}
+  >
+    <div
+      className="c1"
+      role="presentation"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests LoadingSpinner Padding 1`] = `
+.c0 {
+  box-sizing: content-box;
+  margin: auto;
+  padding: 24px;
+  border-radius: 8px;
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
+  opacity: 0.84;
+  color: var(--charcoal-text4);
+  background-color: var(--charcoal-background1);
+}
+
+.c1 {
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  -webkit-animation: cNZOgq 1s both ease-out;
+  animation: cNZOgq 1s both ease-out;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.c1[data-reset-animation] {
+  -webkit-animation: none;
+  animation: none;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
+    role="progressbar"
+    size={48}
+  >
+    <div
+      className="c1"
+      role="presentation"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests LoadingSpinner Size 1`] = `
+.c0 {
+  box-sizing: content-box;
+  margin: auto;
+  padding: 16px;
+  border-radius: 8px;
+  font-size: 128px;
+  width: 128px;
+  height: 128px;
+  opacity: 0.84;
+  color: var(--charcoal-text4);
+  background-color: var(--charcoal-background1);
+}
+
+.c1 {
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  -webkit-animation: cNZOgq 1s both ease-out;
+  animation: cNZOgq 1s both ease-out;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.c1[data-reset-animation] {
+  -webkit-animation: none;
+  animation: none;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
+    role="progressbar"
+    size={128}
+  >
+    <div
+      className="c1"
+      role="presentation"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests LoadingSpinner Transparent 1`] = `
+.c0 {
+  box-sizing: content-box;
+  margin: auto;
+  padding: 16px;
+  border-radius: 8px;
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
+  opacity: 0.84;
+  color: var(--charcoal-text4);
+  background-color: var(--charcoal-transparent);
+}
+
+.c1 {
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  -webkit-animation: cNZOgq 1s both ease-out;
+  animation: cNZOgq 1s both ease-out;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.c1[data-reset-animation] {
+  -webkit-animation: none;
+  animation: none;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
     role="progressbar"
     size={48}
   >

package/src/components/LoadingSpinner/index.story.tsx

@@ -4,13 +4,24 @@ import LoadingSpinner from '.'
 export default {
   title: 'LoadingSpinner',
   component: LoadingSpinner,
-  args: {
-    size: 48,
-    padding: 16,
-    transparent: false,
-    className: 'basic',
-  },
   tags: ['skip-test'],
+  parameters: {
+    layout: 'centered',
+  },
 } as Meta<typeof LoadingSpinner>
 
-export const Default: StoryObj<typeof LoadingSpinner> = {}
+export const Default: StoryObj<typeof LoadingSpinner> = {
+  render: (props) => <LoadingSpinner {...props} />,
+}
+
+export const Transparent: StoryObj<typeof LoadingSpinner> = {
+  render: () => <LoadingSpinner transparent />,
+}
+
+export const Size: StoryObj<typeof LoadingSpinner> = {
+  render: () => <LoadingSpinner size={128} />,
+}
+
+export const Padding: StoryObj<typeof LoadingSpinner> = {
+  render: () => <LoadingSpinner padding={24} />,
+}

package/src/components/Modal/index.tsx

@@ -2,7 +2,7 @@ import { useContext, forwardRef, memo } from 'react'
 import * as React from 'react'
 import { AriaModalOverlayProps, Overlay } from '@react-aria/overlays'
 import styled, { css, useTheme } from 'styled-components'
-import { AriaDialogProps } from '@react-types/dialog'
+import type { AriaDialogProps } from '@react-types/dialog'
 import { maxWidth } from '@charcoal-ui/utils'
 import { useMedia } from '@charcoal-ui/styled'
 import { animated, useTransition, easings } from 'react-spring'

package/src/components/Modal/useCustomModalOverlay.tsx

@@ -5,8 +5,8 @@ import {
   ariaHideOutside,
   useOverlay,
   useOverlayFocusContain,
-  usePreventScroll,
 } from '@react-aria/overlays'
+import { usePreventScroll } from '../DropdownSelector/Popover/usePreventScroll'
 
 /**
  * We want to enable scrolling on the modal background,
@@ -28,9 +28,10 @@ export function useCharcoalModalOverlay(
     ref
   )
 
-  usePreventScroll({
-    isDisabled: !state.isOpen,
-  })
+  usePreventScroll(
+    typeof document !== 'undefined' ? document.body : null,
+    state.isOpen
+  )
 
   useOverlayFocusContain()
 

package/src/components/MultiSelect/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests MultiSelect Default 1`] = `
+exports[`Storybook Tests MultiSelect Basic 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -136,7 +136,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
   data-dark={false}
 >
   <div
-    aria-label=""
+    aria-label="label"
     className="c0"
     data-testid="SelectGroup"
   >
@@ -149,7 +149,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
         checked={true}
         className="c2"
         disabled={false}
-        name=""
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -166,8 +166,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        1
+        選択肢1
       </div>
     </label>
     <label
@@ -179,7 +178,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name=""
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -196,8 +195,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        2
+        選択肢2
       </div>
     </label>
     <label
@@ -209,7 +207,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
         checked={true}
         className="c2"
         disabled={false}
-        name=""
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -226,8 +224,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        3
+        選択肢3
       </div>
     </label>
     <label
@@ -239,7 +236,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name=""
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"
@@ -256,8 +253,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        4
+        選択肢4
       </div>
     </label>
   </div>
@@ -405,7 +401,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
   data-dark={false}
 >
   <div
-    aria-label=""
+    aria-label="label"
     className="c0"
     data-testid="SelectGroup"
   >
@@ -418,7 +414,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -435,8 +431,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        1
+        選択肢1
       </div>
     </label>
     <label
@@ -448,7 +443,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -465,8 +460,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        2
+        選択肢2
       </div>
     </label>
     <label
@@ -478,7 +472,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -495,8 +489,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        3
+        選択肢3
       </div>
     </label>
     <label
@@ -508,7 +501,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"
@@ -525,8 +518,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        4
+        選択肢4
       </div>
     </label>
   </div>
@@ -673,7 +665,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
   data-dark={false}
 >
   <div
-    aria-label=""
+    aria-label="label"
     className="c0"
     data-testid="SelectGroup"
   >
@@ -686,7 +678,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -703,8 +695,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        1
+        選択肢1
       </div>
     </label>
     <label
@@ -716,7 +707,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -733,8 +724,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        2
+        選択肢2
       </div>
     </label>
     <label
@@ -746,7 +736,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -763,8 +753,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        3
+        選択肢3
       </div>
     </label>
     <label
@@ -776,7 +765,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"
@@ -793,8 +782,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        4
+        選択肢4
       </div>
     </label>
   </div>
@@ -950,7 +938,7 @@ exports[`Storybook Tests MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -980,7 +968,7 @@ exports[`Storybook Tests MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -1010,7 +998,7 @@ exports[`Storybook Tests MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -1040,7 +1028,7 @@ exports[`Storybook Tests MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"