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

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;
+}

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

@@ -1,18 +1,19 @@
 import { forwardRef } from 'react'
 import * as React from 'react'
-import styled, { css } from 'styled-components'
 import { useDialog } from '@react-aria/dialog'
-import { columnSystem, COLUMN_UNIT, GUTTER_UNIT } from '@charcoal-ui/foundation'
-import { unreachable } from '../../../_lib'
-import { maxWidth } from '@charcoal-ui/utils'
-import { animated } from 'react-spring'
 import { useForwardedRef } from '../../../_lib/useForwardedRef'
 import { Size, BottomSheet } from '..'
 
+import './index.css'
+import { useClassNames } from '../../../_lib/useClassNames'
+
 export const Dialog = forwardRef<
   HTMLDivElement,
-  React.ComponentProps<typeof AnimatedStyledDialogDiv>
->(function Dialog(props, forwardRef) {
+  React.ComponentPropsWithoutRef<'div'> & {
+    size: Size
+    bottomSheet: BottomSheet
+  }
+>(function Dialog({ size, bottomSheet, css, className, ...props }, forwardRef) {
   const ref = useForwardedRef(forwardRef)
   const { dialogProps } = useDialog(
     {
@@ -21,62 +22,17 @@ export const Dialog = forwardRef<
     ref
   )
 
+  const classNames = useClassNames('charcoal-modal-dialog', className)
   return (
-    <AnimatedStyledDialogDiv
-      {...props}
+    <div
+      className={classNames}
       role={dialogProps.role}
+      data-bottom-sheet={bottomSheet}
       tabIndex={dialogProps.tabIndex}
       aria-labelledby={dialogProps['aria-labelledby']}
       onBlur={dialogProps.onBlur}
       ref={ref}
+      {...props}
     />
   )
 })
-
-const AnimatedStyledDialogDiv = animated(styled.div<{
-  size: Size
-  bottomSheet: BottomSheet
-}>`
-  margin: auto;
-  position: relative;
-  height: fit-content;
-  width: ${(p) => {
-    switch (p.size) {
-      case 'S': {
-        return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      }
-      case 'M': {
-        return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      }
-      case 'L': {
-        return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      }
-      default: {
-        return unreachable(p.size)
-      }
-    }
-  }}px;
-
-  background-color: var(--charcoal-surface1);
-  border-radius: 24px;
-
-  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
-    max-width: 440px;
-    width: calc(100% - 48px);
-    ${(p) =>
-      p.bottomSheet !== false &&
-      css`
-        max-width: unset;
-        width: 100%;
-        border-radius: 0;
-        margin: auto 0 0 0;
-        ${p.bottomSheet === 'full' &&
-        css`
-          min-height: 100%;
-        `}
-      `}
-  }
-  :focus {
-    outline: none;
-  }
-`)

package/src/components/Modal/ModalPlumbing.css

@@ -0,0 +1,40 @@
+.charcoal-modal-header-root {
+  height: 64px;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+}
+
+@media (max-width: 743px) {
+  .charcoal-modal-header-root[data-bottom-sheet='true'],
+  .charcoal-modal-header-root[data-bottom-sheet='full'] {
+    height: 48px;
+  }
+}
+
+.charcoal-modal-header-title {
+  color: var(--charcoal-text1);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: bold;
+  display: flow-root;
+}
+
+.charcoal-modal-align {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.charcoal-modal-body {
+  padding-bottom: 40px;
+}
+
+.charcoal-modal-buttons {
+  display: grid;
+  grid-auto-flow: row;
+  grid-row-gap: 8px;
+
+  padding-top: 16px;
+  padding-left: 16px;
+  padding-right: 16px;
+}

package/src/components/Modal/ModalPlumbing.tsx

@@ -1,71 +1,32 @@
-import { BottomSheet, ModalContext, ModalTitle } from '.'
-import styled, { css } from 'styled-components'
-import { useContext } from 'react'
-import { maxWidth } from '@charcoal-ui/utils'
+import { ModalContext } from '.'
+import { forwardRef, useContext } from 'react'
+import { useClassNames } from '../../_lib/useClassNames'
+
+import './ModalPlumbing.css'
 
 export function ModalHeader() {
   const modalCtx = useContext(ModalContext)
   return (
-    <ModalHeaderRoot $bottomSheet={modalCtx.bottomSheet}>
-      <StyledModalTitle />
-    </ModalHeaderRoot>
+    <div
+      className="charcoal-modal-header-root"
+      data-bottom-sheet={modalCtx.bottomSheet}
+    >
+      <div className="charcoal-modal-header-title">{modalCtx.title}</div>
+    </div>
   )
 }
 
-const ModalHeaderRoot = styled.div<{
-  $bottomSheet: BottomSheet
-}>`
-  height: 64px;
-  display: grid;
-  align-content: center;
-  justify-content: center;
-  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
-    ${(p) =>
-      p.$bottomSheet !== false &&
-      css`
-        height: 48px;
-      `}
-  }
-`
-
-const StyledModalTitle = styled(ModalTitle)`
-  color: var(--charcoal-text1);
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: bold;
-  display: flow-root;
-
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
-`
+export const ModalAlign = createDivComponent('charcoal-modal-align')
 
-export const ModalAlign = styled.div`
-  padding-left: 16px;
-  padding-right: 16px;
-`
+export const ModalBody = createDivComponent('charcoal-modal-body')
 
-export const ModalBody = styled.div`
-  padding-bottom: 40px;
-`
+export const ModalButtons = createDivComponent('charcoal-modal-buttons')
 
-export const ModalButtons = styled.div`
-  display: grid;
-  grid-auto-flow: row;
-  grid-row-gap: 8px;
-
-  padding-top: 16px;
-  padding-left: 16px;
-  padding-right: 16px;
-`
+function createDivComponent(mainClassName: string) {
+  return forwardRef<HTMLDivElement, React.ComponentPropsWithRef<'div'>>(
+    function DivComponent({ className, ...props }, ref) {
+      const classNames = useClassNames(mainClassName, className)
+      return <div className={classNames} ref={ref} {...props} />
+    }
+  )
+}