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

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

@@ -1,5 +1,5 @@
 import '@charcoal-ui/icons'
-import IconButton from '.'
+import IconButton, { IconButtonProps } from '.'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
@@ -8,7 +8,7 @@ export default {
   parameters: {
     layout: 'centered',
   },
-} as Meta<typeof IconButton>
+} as Meta<IconButtonProps<'button'>>
 
 export const Default: StoryObj<typeof IconButton> = {
   args: {

package/src/components/IconButton/index.tsx

@@ -1,135 +1,58 @@
-import { forwardRef } from 'react'
-import styled, { css } from 'styled-components'
-import Clickable, { ClickableElement, ClickableProps } from '../Clickable'
+import React, { ForwardedRef, forwardRef, useMemo } from 'react'
+import { useClassNames } from '../../_lib/useClassNames'
 import type { KnownIconType } from '@charcoal-ui/icons'
-import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
+
+import './index.css'
 
 type Variant = 'Default' | 'Overlay'
 type Size = 'XS' | 'S' | 'M'
 
-interface StyledProps {
+export type IconButtonProps<T extends React.ElementType = 'button'> = {
   readonly variant?: Variant
   readonly size?: Size
   readonly icon: keyof KnownIconType
   readonly isActive?: boolean
-}
+  as?: T
+  componentAs?: React.ComponentPropsWithRef<T>['as']
+} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>
 
-export type IconButtonProps = StyledProps & ClickableProps
+const IconButton = forwardRef(function IconButtonInner<
+  T extends React.ElementType
+>(
+  {
+    variant = 'Default',
+    size = 'M',
+    icon,
+    isActive = false,
+    componentAs,
+    as,
+    ...rest
+  }: IconButtonProps<T>,
+  ref: ForwardedRef<HTMLButtonElement>
+) {
+  validateIconSize(size, icon)
+  const Component = useMemo(() => as ?? 'button', [as])
+  const classNames = useClassNames('charcoal-icon-button', rest.className)
 
-const IconButton = forwardRef<ClickableElement, IconButtonProps>(
-  function IconButtonInner(
-    {
-      variant = 'Default',
-      size = 'M',
-      icon,
-      isActive = false,
-      ...rest
-    }: IconButtonProps,
-    ref
-  ) {
-    validateIconSize(size, icon)
-    return (
-      <StyledIconButton
-        {...rest}
-        ref={ref}
-        $size={size}
-        $variant={variant}
-        $isActive={isActive}
-      >
-        <pixiv-icon name={icon} />
-      </StyledIconButton>
-    )
-  }
-)
+  return (
+    <Component
+      {...rest}
+      as={componentAs}
+      ref={ref}
+      className={classNames}
+      data-size={size}
+      data-active={isActive}
+      data-variant={variant}
+    >
+      <pixiv-icon name={icon} />
+    </Component>
+  )
+}) as <T extends React.ElementType = 'button'>(
+  p: IconButtonProps<T>
+) => JSX.Element
 
 export default IconButton
 
-type StyledIconButtonProps = Required<{
-  [key in keyof Pick<
-    StyledProps,
-    'size' | 'variant' | 'isActive'
-  > as `$${key}`]: StyledProps[key]
-}>
-
-const StyledIconButton = styled(Clickable).attrs<
-  StyledIconButtonProps,
-  ReturnType<typeof styledProps>
->(styledProps)<StyledIconButtonProps>`
-  user-select: none;
-
-  width: ${(p) => p.$width}px;
-  height: ${(p) => p.$height}px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(${({ $font }) => `--charcoal-${$font}`});
-  background-color: var(${({ $background }) => `--charcoal-${$background}`});
-  border-radius: 999999px;
-  transition: 0.2s background-color, 0.2s box-shadow;
-
-  &:not(:disabled):not([aria-disabled]),
-  &[aria-disabled='false'] {
-    ${({ $isActive, $background, $font }) =>
-      $isActive
-        ? css`
-            color: var(--charcoal-${$font}-press);
-            background-color: var(--charcoal-${$background}-press);
-          `
-        : css`
-            &:hover {
-              color: var(--charcoal-${$font}-hover);
-              background-color: var(--charcoal-${$background}-hover);
-            }
-            &:active {
-              color: var(--charcoal-${$font}-press);
-              background-color: var(--charcoal-${$background}-press);
-            }
-          `}
-    ${focusVisibleFocusRingCss}
-  }
-
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    opacity: 0.32;
-  }
-`
-
-function styledProps({ $size, $variant }: StyledIconButtonProps) {
-  return {
-    ...variantToProps($variant),
-    ...sizeToProps($size),
-  }
-}
-
-function variantToProps(variant: Variant) {
-  switch (variant) {
-    case 'Default':
-      return { $font: 'text3', $background: 'transparent' } as const
-    case 'Overlay':
-      return { $font: 'text5', $background: 'surface4' } as const
-  }
-}
-
-function sizeToProps(size: Size) {
-  switch (size) {
-    case 'XS':
-      return {
-        $width: 20,
-        $height: 20,
-      }
-    case 'S':
-      return {
-        $width: 32,
-        $height: 32,
-      }
-    case 'M':
-      return {
-        $width: 40,
-        $height: 40,
-      }
-  }
-}
-
 /**
  * validates matches of size and icon
  */

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

@@ -1,27 +1,12 @@
 // 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"
+    className="charcoal-loading-spinner-icon"
+    data-once={false}
     role="presentation"
   />
 </div>

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

@@ -1,45 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storybook Tests LoadingSpinner Default 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-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"
+    className="charcoal-loading-spinner"
+    data-transparent={false}
     role="progressbar"
-    size={48}
+    style={
+      Object {
+        "--charcoal-loading-spinner-padding": "16px",
+        "--charcoal-loading-spinner-size": "48px",
+      }
+    }
   >
     <div
-      className="c1"
+      className="charcoal-loading-spinner-icon"
+      data-once={false}
       role="presentation"
     />
   </div>
@@ -47,45 +25,23 @@ exports[`Storybook Tests LoadingSpinner Default 1`] = `
 `;
 
 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"
+    className="charcoal-loading-spinner"
+    data-transparent={false}
     role="progressbar"
-    size={48}
+    style={
+      Object {
+        "--charcoal-loading-spinner-padding": "24px",
+        "--charcoal-loading-spinner-size": "48px",
+      }
+    }
   >
     <div
-      className="c1"
+      className="charcoal-loading-spinner-icon"
+      data-once={false}
       role="presentation"
     />
   </div>
@@ -93,45 +49,23 @@ exports[`Storybook Tests LoadingSpinner Padding 1`] = `
 `;
 
 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"
+    className="charcoal-loading-spinner"
+    data-transparent={false}
     role="progressbar"
-    size={128}
+    style={
+      Object {
+        "--charcoal-loading-spinner-padding": "16px",
+        "--charcoal-loading-spinner-size": "128px",
+      }
+    }
   >
     <div
-      className="c1"
+      className="charcoal-loading-spinner-icon"
+      data-once={false}
       role="presentation"
     />
   </div>
@@ -139,45 +73,23 @@ exports[`Storybook Tests LoadingSpinner Size 1`] = `
 `;
 
 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"
+    className="charcoal-loading-spinner"
+    data-transparent={true}
     role="progressbar"
-    size={48}
+    style={
+      Object {
+        "--charcoal-loading-spinner-padding": "16px",
+        "--charcoal-loading-spinner-size": "48px",
+      }
+    }
   >
     <div
-      className="c1"
+      className="charcoal-loading-spinner-icon"
+      data-once={false}
       role="presentation"
     />
   </div>

package/src/components/LoadingSpinner/index.css

@@ -0,0 +1,42 @@
+.charcoal-loading-spinner {
+  box-sizing: content-box;
+  margin: auto;
+  padding: var(--charcoal-loading-spinner-padding);
+  border-radius: 8px;
+  font-size: var(--charcoal-loading-spinner-size);
+  width: var(--charcoal-loading-spinner-size);
+  height: var(--charcoal-loading-spinner-size);
+  opacity: 0.84;
+  color: var(--charcoal-text4);
+  background-color: var(--charcoal-background1);
+}
+.charcoal-loading-spinner[data-transparent='true'] {
+  background-color: var(--charcoal-transparent);
+}
+
+@keyframes charcoal-loading-spinner-icon-scale-out {
+  from {
+    transform: scale(0);
+    opacity: 1;
+  }
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.charcoal-loading-spinner-icon {
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;
+  animation-iteration-count: infinite;
+}
+
+.charcoal-loading-spinner-icon[data-reset-animation] {
+  animation: none;
+}
+.charcoal-loading-spinner-icon[data-once='true'] {
+  animation-iteration-count: 1;
+}

package/src/components/LoadingSpinner/index.tsx

@@ -1,5 +1,7 @@
 import { forwardRef, useImperativeHandle, useRef, memo } from 'react'
-import styled, { keyframes } from 'styled-components'
+import { useClassNames } from '../../_lib/useClassNames'
+
+import './index.css'
 
 export type LoadingSpinnerProps = {
   readonly size?: number
@@ -10,68 +12,33 @@ export type LoadingSpinnerProps = {
 
 const LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(
   function LoadingSpinnerInner(
-    { size = 48, padding = 16, transparent = false, className },
+    { size = 48, padding = 16, transparent = false, ...props },
     ref
   ) {
+    const classNames = useClassNames(
+      'charcoal-loading-spinner',
+      props.className
+    )
+
     return (
-      <LoadingSpinnerRoot
-        size={size}
-        padding={padding}
-        transparent={transparent}
-        className={className}
+      <div
+        role="progressbar"
+        style={{
+          '--charcoal-loading-spinner-size': `${size}px`,
+          '--charcoal-loading-spinner-padding': `${padding}px`,
+        }}
+        data-transparent={transparent}
+        className={classNames}
         ref={ref}
       >
         <LoadingSpinnerIcon />
-      </LoadingSpinnerRoot>
+      </div>
     )
   }
 )
 
 export default memo(LoadingSpinner)
 
-const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
-  size: number
-  padding: number
-  transparent: boolean
-}>`
-  box-sizing: content-box;
-  margin: auto;
-  padding: ${(props) => props.padding}px;
-  border-radius: 8px;
-  font-size: ${(props) => props.size}px;
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-  opacity: 0.84;
-  color: var(--charcoal-text4);
-  background-color: ${({ transparent }) =>
-    `var(--charcoal-${transparent ? 'transparent' : 'background1'})`};
-`
-
-const scaleOut = keyframes`
-  from {
-    transform: scale(0);
-    opacity: 1;
-  }
-
-  to {
-    transform: scale(1);
-    opacity: 0;
-  }
-`
-
-const Icon = styled.div.attrs({ role: 'presentation' })<{ once: boolean }>`
-  width: 1em;
-  height: 1em;
-  border-radius: 1em;
-  background-color: currentColor;
-  animation: ${scaleOut} 1s both ease-out;
-  animation-iteration-count: ${(p) => (p.once ? 1 : 'infinite')};
-
-  &[data-reset-animation] {
-    animation: none;
-  }
-`
-
 type Props = {
   once?: boolean
 }
@@ -96,6 +63,13 @@ export const LoadingSpinnerIcon = forwardRef<LoadingSpinnerIconHandler, Props>(
       },
     }))
 
-    return <Icon ref={iconRef} once={once} />
+    return (
+      <div
+        role="presentation"
+        ref={iconRef}
+        data-once={once}
+        className="charcoal-loading-spinner-icon"
+      />
+    )
   }
 )

package/src/components/Modal/Dialog/index.css

@@ -0,0 +1,44 @@
+.charcoal-modal-dialog {
+  margin: auto;
+  position: relative;
+  height: fit-content;
+  width: 440px;
+
+  background-color: var(--charcoal-surface1);
+  border-radius: 24px;
+}
+
+.charcoal-modal-dialog[data-size='S'] {
+  width: 336px;
+}
+
+.charcoal-modal-dialog[data-size='M'] {
+  width: 440px;
+}
+
+.charcoal-modal-dialog[data-size='L'] {
+  width: 648px;
+}
+
+@media (max-width: 743px) {
+  .charcoal-modal-dialog {
+    max-width: 440px;
+    width: calc(100% - 48px);
+  }
+
+  .charcoal-modal-dialog[data-bottom-sheet='true'],
+  .charcoal-modal-dialog[data-bottom-sheet='full'] {
+    max-width: unset;
+    width: 100%;
+    border-radius: 0;
+    margin: auto 0 0 0;
+  }
+
+  .charcoal-modal-dialog[data-bottom-sheet='full'] {
+    min-height: 100%;
+  }
+}
+
+.charcoal-modal-dialog:focus {
+  outline: none;
+}