@charcoal-ui/react 3.7.0 → 3.9.0

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

@@ -1,6 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
+exports[`Storybook Tests DropdownSelector/ListItem Basic 1`] = `
+.c0 {
+  list-style: none;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: 40px;
+  cursor: pointer;
+  outline: none;
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.c1:hover,
+.c1:focus,
+.c1:focus-within {
+  background-color: var(--charcoal-surface3);
+}
+
 .c3 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -18,10 +50,6 @@ exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
   cursor: default;
 }
 
-.c3:active > input {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c4 {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -55,6 +83,15 @@ exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
 }
 
 .c4:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c4:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c4:focus-visible {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -105,38 +142,6 @@ exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
   transition: transform 0.2s;
 }
 
-.c0 {
-  list-style: none;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 40px;
-  cursor: pointer;
-  outline: none;
-  padding-right: 16px;
-  padding-left: 16px;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c1:hover,
-.c1:focus,
-.c1:focus-within {
-  background-color: var(--charcoal-surface3);
-}
-
 .c2 {
   color: red;
 }

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

@@ -1,20 +1,20 @@
 import { useState } from 'react'
-import { Story } from '../../../_lib/compat'
 import Icon from '../../Icon'
 import Switch from '../../Switch'
-import ListItem, { ListItemProps } from '.'
+import ListItem from '.'
 import styled from 'styled-components'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'DropdownSelector/ListItem',
   component: ListItem,
-}
+} as Meta<typeof ListItem>
 
 const CustomLink = styled.a`
   color: red;
 `
 
-export const Basic: Story<ListItemProps> = () => {
+const BasicRender = () => {
   const [checked, setChecked] = useState(false)
   const handleCheck = () => {
     setChecked((v) => !v)
@@ -49,3 +49,7 @@ export const Basic: Story<ListItemProps> = () => {
     </>
   )
 }
+
+export const Basic: StoryObj<typeof ListItem> = {
+  render: BasicRender,
+}

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> = () => {
         }}
       />
     </>
-  )
+  ),
 }