@charcoal-ui/react 3.7.0 → 3.8.0

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots IconButton Default M 1`] = `
+exports[`Storybook Tests IconButton DefaultM 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -67,24 +67,135 @@ exports[`Storyshots IconButton Default M 1`] = `
 
 .c1:not(:disabled):not([aria-disabled]):hover,
 .c1[aria-disabled='false']:hover {
-  background-color: var( --charcoal-transparent-hover );
+  background-color: var(--charcoal-transparent-hover);
 }
 
 .c1:not(:disabled):not([aria-disabled]):active,
 .c1[aria-disabled='false']:active {
-  background-color: var( --charcoal-transparent-press );
+  background-color: var(--charcoal-transparent-press);
 }
 
 .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 {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
+<div
+  data-dark={false}
+>
+  <button
+    className="c0 c1"
+    title="close"
+  >
+    <pixiv-icon
+      name="24/Close"
+    />
+  </button>
+</div>
+`;
+
+exports[`Storybook Tests IconButton IsActive 1`] = `
+.c0 {
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c1 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  width: 40px;
+  height: 40px;
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: var(--charcoal-text3);
+  background-color: var(--charcoal-transparent);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
+}
+
+.c1:not(:disabled):not([aria-disabled]),
+.c1[aria-disabled='false'] {
+  background-color: var(--charcoal-transparent-press);
+}
+
+.c1:not(:disabled):not([aria-disabled]):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 {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
 .c1:disabled,
 .c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
@@ -104,7 +215,7 @@ exports[`Storyshots IconButton Default M 1`] = `
 </div>
 `;
 
-exports[`Storyshots IconButton Overlay M 1`] = `
+exports[`Storybook Tests IconButton OverlayM 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -171,21 +282,27 @@ exports[`Storyshots IconButton Overlay M 1`] = `
 
 .c1:not(:disabled):not([aria-disabled]):hover,
 .c1[aria-disabled='false']:hover {
-  background-color: var( --charcoal-surface4-hover );
+  background-color: var(--charcoal-surface4-hover);
 }
 
 .c1:not(:disabled):not([aria-disabled]):active,
 .c1[aria-disabled='false']:active {
-  background-color: var( --charcoal-surface4-press );
+  background-color: var(--charcoal-surface4-press);
 }
 
 .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);
 }
 

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

@@ -1,7 +1,7 @@
-import type { Story } from '../../_lib/compat'
 import '@charcoal-ui/icons'
 import IconButton from '.'
 import type { KnownIconType } from '@charcoal-ui/icons'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'IconButton',
@@ -19,32 +19,39 @@ export default {
         options: ['M', 'S', 'XS'],
       },
     },
+    isActive: {
+      control: {
+        type: 'boolean',
+      },
+    },
   },
-}
-
-type Props = {
-  variant?: 'Default' | 'Overlay'
-  size?: 'M' | 'S' | 'XS'
-}
+  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} />
+  },
+} as Meta<typeof IconButton>
 
-const Template: Story<Props> = (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} />
+export const DefaultM: StoryObj<typeof IconButton> = {
+  args: {
+    variant: 'Default',
+    size: 'M',
+  },
 }
 
-export const DefaultM: Story<Props> = Template.bind({})
-DefaultM.args = {
-  variant: 'Default',
-  size: 'M',
+export const IsActive: StoryObj<typeof IconButton> = {
+  args: {
+    isActive: true,
+  },
 }
 
-export const OverlayM: Story<Props> = Template.bind({})
-OverlayM.args = {
-  variant: 'Overlay',
-  size: 'M',
+export const OverlayM: StoryObj<typeof IconButton> = {
+  args: {
+    variant: 'Overlay',
+    size: 'M',
+  },
 }

package/src/components/IconButton/index.tsx

@@ -1,7 +1,8 @@
 import { forwardRef } from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import Clickable, { ClickableElement, ClickableProps } from '../Clickable'
 import type { KnownIconType } from '@charcoal-ui/icons'
+import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
 
 type Variant = 'Default' | 'Overlay'
 type Size = 'XS' | 'S' | 'M'
@@ -10,18 +11,31 @@ interface StyledProps {
   readonly variant?: Variant
   readonly size?: Size
   readonly icon: keyof KnownIconType
+  readonly isActive?: boolean
 }
 
 export type IconButtonProps = StyledProps & ClickableProps
 
 const IconButton = forwardRef<ClickableElement, IconButtonProps>(
   function IconButtonInner(
-    { variant = 'Default', size = 'M', icon, ...rest }: IconButtonProps,
+    {
+      variant = 'Default',
+      size = 'M',
+      icon,
+      isActive = false,
+      ...rest
+    }: IconButtonProps,
     ref
   ) {
     validateIconSize(size, icon)
     return (
-      <StyledIconButton {...rest} ref={ref} $size={size} $variant={variant}>
+      <StyledIconButton
+        {...rest}
+        ref={ref}
+        $size={size}
+        $variant={variant}
+        $isActive={isActive}
+      >
         <pixiv-icon name={icon} />
       </StyledIconButton>
     )
@@ -33,7 +47,7 @@ export default IconButton
 type StyledIconButtonProps = Required<{
   [key in keyof Pick<
     StyledProps,
-    'size' | 'variant'
+    'size' | 'variant' | 'isActive'
   > as `$${key}`]: StyledProps[key]
 }>
 
@@ -55,22 +69,20 @@ const StyledIconButton = styled(Clickable).attrs<
 
   &:not(:disabled):not([aria-disabled]),
   &[aria-disabled='false'] {
-    &:hover {
-      background-color: var(
-        ${({ $background }) => `--charcoal-${$background}-hover`}
-      );
-    }
-    &:active {
-      background-color: var(
-        ${({ $background }) => `--charcoal-${$background}-press`}
-      );
-    }
-    &:focus,
-    &:active,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
+    ${({ $isActive, $background }) =>
+      $isActive
+        ? css`
+            background-color: var(--charcoal-${$background}-press);
+          `
+        : css`
+            &:hover {
+              background-color: var(--charcoal-${$background}-hover);
+            }
+            &:active {
+              background-color: var(--charcoal-${$background}-press);
+            }
+          `}
+    ${focusVisibleFocusRingCss}
   }
 
   &:disabled,

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

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { LoadingSpinnerIcon } from '.'
+
+export default {
+  title: 'LoadingSpinnerIcon',
+  component: LoadingSpinnerIcon,
+  args: {
+    once: false,
+  },
+} as Meta<typeof LoadingSpinnerIcon>
+
+export const Icon: StoryObj<typeof LoadingSpinnerIcon> = {}

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

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storybook Tests LoadingSpinnerIcon Icon 1`] = `
+.c0 {
+  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;
+}
+
+.c0[data-reset-animation] {
+  -webkit-animation: none;
+  animation: none;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
+    role="presentation"
+  />
+</div>
+`;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots LoadingSpinner Basic 1`] = `
+exports[`Storybook Tests LoadingSpinner Default 1`] = `
 .c0 {
   box-sizing: content-box;
   margin: auto;
@@ -45,37 +45,3 @@ exports[`Storyshots LoadingSpinner Basic 1`] = `
   </div>
 </div>
 `;
-
-exports[`Storyshots LoadingSpinner Icon 1`] = `
-.c0 {
-  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;
-}
-
-.c0[data-reset-animation] {
-  -webkit-animation: none;
-  animation: none;
-}
-
-<div
-  data-dark={false}
->
-  <div
-    css="
-        font-size: 12px;
-        color: #B1CC29;
-      "
-  >
-    <div
-      className="c0"
-      role="presentation"
-    />
-  </div>
-</div>
-`;

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

@@ -1,58 +1,15 @@
-import {
-  boolean,
-  button,
-  number,
-  text,
-  withKnobs,
-} from '@storybook/addon-knobs'
-import { useRef } from 'react'
-import LoadingSpinner, {
-  LoadingSpinnerIcon,
-  LoadingSpinnerIconHandler,
-} from '.'
+import { Meta, StoryObj } from '@storybook/react'
+import LoadingSpinner from '.'
 
 export default {
   title: 'LoadingSpinner',
   component: LoadingSpinner,
-  decorators: [withKnobs],
-}
-
-export function Basic() {
-  const size = number('size', 48)
-  const padding = number('padding', 16)
-  const transparent = boolean('transparent', false)
-  const className = text('className', 'basic')
-
-  return (
-    <LoadingSpinner
-      size={size}
-      padding={padding}
-      transparent={transparent}
-      className={className}
-    />
-  )
-}
-
-export function Icon() {
-  return <IconComponent />
-}
-
-function IconComponent() {
-  const size = number('size', 12)
-  const color = text('color', '#B1CC29')
-  const once = boolean('once', false)
-  button('restart', () => ref.current?.restart())
-
-  const ref = useRef<LoadingSpinnerIconHandler>(null)
-
-  return (
-    <div
-      css={`
-        font-size: ${size}px;
-        color: ${color};
-      `}
-    >
-      <LoadingSpinnerIcon once={once} ref={ref} />
-    </div>
-  )
-}
+  args: {
+    size: 48,
+    padding: 16,
+    transparent: false,
+    className: 'basic',
+  },
+} as Meta<typeof LoadingSpinner>
+
+export const Default: StoryObj<typeof LoadingSpinner> = {}

package/src/components/LoadingSpinner/index.tsx

@@ -72,7 +72,7 @@ const Icon = styled.div.attrs({ role: 'presentation' })<{ once: boolean }>`
   }
 `
 
-interface Props {
+type Props = {
   once?: boolean
 }