@charcoal-ui/react 3.7.0 → 3.8.0

package/src/components/DropdownSelector/MenuList/__snapshots__/index.story.storyshot

@@ -1,6 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots DropdownSelector/MenuList Basic 1`] = `
+exports[`Storybook Tests DropdownSelector/MenuList Basic 1`] = `
+.c0 {
+  padding: 0;
+  margin: 0;
+}
+
 .c1 {
   list-style: none;
 }
@@ -33,11 +38,6 @@ exports[`Storyshots DropdownSelector/MenuList Basic 1`] = `
   background-color: var(--charcoal-surface3);
 }
 
-.c0 {
-  padding: 0;
-  margin: 0;
-}
-
 <div
   data-dark={false}
 >
@@ -208,7 +208,12 @@ exports[`Storyshots DropdownSelector/MenuList Basic 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector/MenuList Disabled 1`] = `
+exports[`Storybook Tests DropdownSelector/MenuList Disabled 1`] = `
+.c0 {
+  padding: 0;
+  margin: 0;
+}
+
 .c1 {
   list-style: none;
 }
@@ -241,11 +246,6 @@ exports[`Storyshots DropdownSelector/MenuList Disabled 1`] = `
   background-color: var(--charcoal-surface3);
 }
 
-.c0 {
-  padding: 0;
-  margin: 0;
-}
-
 <div
   data-dark={false}
 >
@@ -287,7 +287,32 @@ exports[`Storyshots DropdownSelector/MenuList Disabled 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector/MenuList Group 1`] = `
+exports[`Storybook Tests DropdownSelector/MenuList Group 1`] = `
+.c0 {
+  padding: 0;
+  margin: 0;
+}
+
+.c2 {
+  display: block;
+  color: var(--charcoal-text3);
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 0 8px 16px;
+}
+
+.c3 {
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: hidden;
+}
+
+.c1 {
+  display: block;
+}
+
 .c4 {
   list-style: none;
 }
@@ -320,31 +345,6 @@ exports[`Storyshots DropdownSelector/MenuList Group 1`] = `
   background-color: var(--charcoal-surface3);
 }
 
-.c0 {
-  padding: 0;
-  margin: 0;
-}
-
-.c2 {
-  display: block;
-  color: var(--charcoal-text3);
-  font-size: 12px;
-  font-weight: bold;
-  padding: 12px 0 8px 16px;
-}
-
-.c3 {
-  padding-left: 0;
-  margin: 0;
-  box-sizing: border-box;
-  list-style: none;
-  overflow: hidden;
-}
-
-.c1 {
-  display: block;
-}
-
 <div
   data-dark={false}
 >

package/src/components/DropdownSelector/MenuList/index.story.tsx

@@ -1,13 +1,13 @@
 import { action } from '@storybook/addon-actions'
-import { Story } from '../../../_lib/compat'
-import MenuList, { MenuListProps } from '.'
+import MenuList from '.'
 import MenuItem from '../MenuItem'
 import MenuItemGroup from '../MenuItemGroup'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'DropdownSelector/MenuList',
   component: MenuList,
-}
+} as Meta<typeof MenuList>
 
 function makeList(n: number, offset = 0) {
   return [...(Array(n) as undefined[])].map((_, i) => {
@@ -20,32 +20,38 @@ function makeList(n: number, offset = 0) {
   })
 }
 
-export const Basic: Story<MenuListProps> = () => {
-  return (
-    <>
-      <MenuList onChange={action('onChange')}>{makeList(10)}</MenuList>
-    </>
-  )
+export const Basic: StoryObj<typeof MenuList> = {
+  render: () => {
+    return (
+      <>
+        <MenuList onChange={action('onChange')}>{makeList(10)}</MenuList>
+      </>
+    )
+  },
 }
 
-export const Disabled: Story<MenuListProps> = () => {
-  return (
-    <>
-      <MenuList onChange={action('onChange')}>
-        <MenuItem value="1">MenuItem</MenuItem>
-        <MenuItem value="2" disabled>
-          Disabled MenuItem
-        </MenuItem>
-      </MenuList>
-    </>
-  )
+export const Disabled: StoryObj<typeof MenuList> = {
+  render: () => {
+    return (
+      <>
+        <MenuList onChange={action('onChange')}>
+          <MenuItem value="1">MenuItem</MenuItem>
+          <MenuItem value="2" disabled>
+            Disabled MenuItem
+          </MenuItem>
+        </MenuList>
+      </>
+    )
+  },
 }
 
-export const Group: Story<MenuListProps> = () => {
-  return (
-    <MenuList onChange={action('onChange')} value="1">
-      <MenuItemGroup text="Section1">{makeList(5)}</MenuItemGroup>
-      <MenuItemGroup text="Section2">{makeList(5, 5)}</MenuItemGroup>
-    </MenuList>
-  )
+export const Group: StoryObj<typeof MenuList> = {
+  render: () => {
+    return (
+      <MenuList onChange={action('onChange')} value="1">
+        <MenuItemGroup text="Section1">{makeList(5)}</MenuItemGroup>
+        <MenuItemGroup text="Section2">{makeList(5, 5)}</MenuItemGroup>
+      </MenuList>
+    )
+  },
 }

package/src/components/DropdownSelector/Popover/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots DropdownSelector/Popover Basic 1`] = `
+exports[`Storybook Tests DropdownSelector/Popover Basic 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -71,13 +71,19 @@ exports[`Storyshots DropdownSelector/Popover Basic 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 

package/src/components/DropdownSelector/Popover/index.story.tsx

@@ -1,12 +1,12 @@
 import { useRef, CSSProperties, useState } from 'react'
-import { Story } from '../../../_lib/compat'
-import Popover, { PopoverProps } from '.'
+import Popover from '.'
 import Button from '../../Button'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'DropdownSelector/Popover',
   component: Popover,
-}
+} as Meta<typeof Popover>
 
 function Base(props: { style?: CSSProperties }) {
   const [isOpen, setIsOpen] = useState(false)
@@ -33,8 +33,8 @@ function Base(props: { style?: CSSProperties }) {
   )
 }
 
-export const Basic: Story<PopoverProps> = () => {
-  return (
+export const Basic: StoryObj = {
+  render: () => (
     <>
       <Base
         style={{
@@ -61,5 +61,5 @@ export const Basic: Story<PopoverProps> = () => {
         }}
       />
     </>
-  )
+  ),
 }

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots DropdownSelector Basic 1`] = `
+exports[`Storybook Tests DropdownSelector Basic 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -45,12 +45,18 @@ exports[`Storyshots DropdownSelector Basic 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -59,6 +65,11 @@ exports[`Storyshots DropdownSelector Basic 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c2 {
   text-align: left;
   font-size: 14px;
@@ -107,7 +118,7 @@ exports[`Storyshots DropdownSelector Basic 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector Custom Children 1`] = `
+exports[`Storybook Tests DropdownSelector CustomChildren 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -152,12 +163,18 @@ exports[`Storyshots DropdownSelector Custom Children 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -166,6 +183,11 @@ exports[`Storyshots DropdownSelector Custom Children 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c2 {
   text-align: left;
   font-size: 14px;
@@ -223,7 +245,7 @@ exports[`Storyshots DropdownSelector Custom Children 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector In Form Tag 1`] = `
+exports[`Storybook Tests DropdownSelector InFormTag 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -268,12 +290,18 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -282,6 +310,11 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c2 {
   text-align: left;
   font-size: 14px;
@@ -328,7 +361,7 @@ exports[`Storyshots DropdownSelector In Form Tag 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector In Modal 1`] = `
+exports[`Storybook Tests DropdownSelector InModal 1`] = `
 .c11 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -411,12 +444,18 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
 }
 
 .c8:not(:disabled):not([aria-disabled]):focus,
-.c8[aria-disabled='false']:focus,
-.c8:not(:disabled):not([aria-disabled]):active,
-.c8[aria-disabled='false']:active,
+.c8[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c8:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c8[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c8:not(:disabled):not([aria-disabled]):focus-visible,
 .c8[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -425,6 +464,11 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c8:not(:disabled):not([aria-disabled]):active,
+.c8[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c9 {
   text-align: left;
   font-size: 14px;
@@ -468,21 +512,27 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
 
 .c12:not(:disabled):not([aria-disabled]):hover,
 .c12[aria-disabled='false']:hover {
-  background-color: var( --charcoal-transparent-hover );
+  background-color: var(--charcoal-transparent-hover);
 }
 
 .c12:not(:disabled):not([aria-disabled]):active,
 .c12[aria-disabled='false']:active {
-  background-color: var( --charcoal-transparent-press );
+  background-color: var(--charcoal-transparent-press);
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus,
-.c12[aria-disabled='false']:focus,
-.c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled='false']:active,
+.c12[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c12[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c12:not(:disabled):not([aria-disabled]):focus-visible,
 .c12[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -652,7 +702,12 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
     <div
       className="c0"
       onPointerDown={[Function]}
-      style={Object {}}
+      style={
+        Object {
+          "backgroundColor": "rgba(0, 0, 0, 0)",
+          "overflow": "hidden",
+        }
+      }
     >
       <div
         className="c1"
@@ -660,7 +715,11 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
         onKeyDown={[Function]}
         role="dialog"
         size="M"
-        style={Object {}}
+        style={
+          Object {
+            "transform": " translateY(100%)",
+          }
+        }
         tabIndex={-1}
       >
         <div
@@ -751,7 +810,7 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector Long Names 1`] = `
+exports[`Storybook Tests DropdownSelector LongNames 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -796,12 +855,18 @@ exports[`Storyshots DropdownSelector Long Names 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -810,6 +875,11 @@ exports[`Storyshots DropdownSelector Long Names 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c2 {
   text-align: left;
   font-size: 14px;
@@ -858,7 +928,7 @@ exports[`Storyshots DropdownSelector Long Names 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector Playground 1`] = `
+exports[`Storybook Tests DropdownSelector Playground 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -929,13 +999,19 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
   height: 40px;
 }
 
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1000,12 +1076,18 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
 }
 
 .c3:not(:disabled):not([aria-disabled]):focus,
-.c3[aria-disabled='false']:focus,
-.c3:not(:disabled):not([aria-disabled]):active,
-.c3[aria-disabled='false']:active,
+.c3[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c3[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c3:not(:disabled):not([aria-disabled]):focus-visible,
 .c3[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1014,6 +1096,11 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c3:not(:disabled):not([aria-disabled]):active,
+.c3[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c4 {
   text-align: left;
   font-size: 14px;
@@ -1066,7 +1153,7 @@ exports[`Storyshots DropdownSelector Playground 1`] = `
 </div>
 `;
 
-exports[`Storyshots DropdownSelector Section List 1`] = `
+exports[`Storybook Tests DropdownSelector SectionList 1`] = `
 .c0 {
   display: inline-block;
   width: 100%;
@@ -1111,12 +1198,18 @@ exports[`Storyshots DropdownSelector Section List 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -1125,6 +1218,11 @@ exports[`Storyshots DropdownSelector Section List 1`] = `
   background-color: var(--charcoal-surface3-hover);
 }
 
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled='false']:active {
+  background-color: var(--charcoal-surface3-press);
+}
+
 .c2 {
   text-align: left;
   font-size: 14px;