@charcoal-ui/react 3.2.0 → 3.3.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.2.0",
+  "version": "3.3.0-beta.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -19,14 +19,15 @@
   },
   "devDependencies": {
     "@react-types/switch": "^3.1.2",
-    "@storybook/addon-actions": "^6.4.17",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addons": "^6.4.17",
-    "@storybook/api": "^6.4.17",
-    "@storybook/components": "^6.4.17",
-    "@storybook/core-events": "^6.4.17",
-    "@storybook/react": "^6.4.17",
-    "@storybook/theming": "^6.4.17",
+    "@storybook/addon-actions": "^7.4.1",
+    "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addons": "^7.4.1",
+    "@storybook/api": "^7.4.1",
+    "@storybook/components": "^7.4.1",
+    "@storybook/core-events": "^7.4.1",
+    "@storybook/react": "^7.4.1",
+    "@storybook/react-webpack5": "^7.4.1",
+    "@storybook/theming": "^7.4.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -44,15 +45,16 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
+    "storybook": "^7.4.1",
     "styled-components": "^5.3.3",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^3.2.0",
-    "@charcoal-ui/styled": "^3.2.0",
-    "@charcoal-ui/theme": "^3.2.0",
-    "@charcoal-ui/utils": "^3.2.0",
+    "@charcoal-ui/icons": "^3.3.0-beta.0",
+    "@charcoal-ui/styled": "^3.3.0-beta.0",
+    "@charcoal-ui/theme": "^3.3.0-beta.0",
+    "@charcoal-ui/utils": "^3.3.0-beta.0",
     "@react-aria/button": "^3.7.0",
     "@react-aria/checkbox": "^3.8.0",
     "@react-aria/dialog": "^3.5.0",
@@ -88,5 +90,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "495dc492d64a159618461a074b2315547eeda99f"
+  "gitHead": "aa4321ee5b76734602f8e135caa5e91388ca9403"
 }

package/src/components/Button/index.test.tsx

@@ -1,12 +1,12 @@
 import 'jest-styled-components'
 
 import Button from '.'
-import renderder from 'react-test-renderer'
+import renderer from 'react-test-renderer'
 import { ThemeProvider } from 'styled-components'
 import { light } from '@charcoal-ui/theme'
 
 export function render(children: JSX.Element) {
-  return renderder
+  return renderer
     .create(<ThemeProvider theme={light}>{children}</ThemeProvider>)
     .toJSON()
 }

package/src/components/Button/index.tsx

@@ -58,7 +58,7 @@ const StyledButton = styled(Clickable)<StyledProps>`
   ${(p) =>
     theme((o) => [
       o.font[variantToFont(p.$variant)].hover.press,
-      o.bg[variantToBackgraund(p.$variant)].hover.press,
+      o.bg[variantToBackground(p.$variant)].hover.press,
       o.typography(14).bold.preserveHalfLeading,
       o.padding.horizontal(p.$size === 'M' ? 24 : 16),
       o.disabled,
@@ -70,7 +70,7 @@ const StyledButton = styled(Clickable)<StyledProps>`
   height: ${(p) => (p.$size === 'M' ? 40 : 32)}px;
 `
 
-function variantToBackgraund(variant: Variant) {
+function variantToBackground(variant: Variant) {
   switch (variant) {
     case 'Overlay':
       return 'surface4'

package/src/components/Checkbox/performance.test.tsx

@@ -2,12 +2,12 @@ import { light } from '@charcoal-ui/theme'
 import 'jest-styled-components'
 
 import React from 'react'
-import renderder from 'react-test-renderer'
+import renderer from 'react-test-renderer'
 import { ThemeProvider } from 'styled-components'
 import Checkbox from '.'
 
 export function render(children: JSX.Element) {
-  return renderder
+  return renderer
     .create(<ThemeProvider theme={light}>{children}</ThemeProvider>)
     .toJSON()
 }

package/src/components/LoadingSpinner/index.tsx

@@ -50,7 +50,7 @@ const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
     ])}
 `
 
-const scaleout = keyframes`
+const scaleOut = keyframes`
   from {
     transform: scale(0);
     opacity: 1;
@@ -67,7 +67,7 @@ const Icon = styled.div.attrs({ role: 'presentation' })<{ once: boolean }>`
   height: 1em;
   border-radius: 1em;
   background-color: currentColor;
-  animation: ${scaleout} 1s both ease-out;
+  animation: ${scaleOut} 1s both ease-out;
   animation-iteration-count: ${(p) => (p.once ? 1 : 'infinite')};
 
   &[data-reset-animation] {

package/src/core/CharcoalProvider.tsx

@@ -3,7 +3,7 @@ import { ThemeProvider } from 'styled-components'
 import ComponentAbstraction, { Components } from './ComponentAbstraction'
 import { TokenInjector } from '@charcoal-ui/styled'
 import { ThemeMap } from '@charcoal-ui/styled/src/TokenInjector'
-import { CharcoalTheme } from '@charcoal-ui/theme'
+import { CharcoalTheme, ThemeColor } from '@charcoal-ui/theme'
 
 import { OverlayProvider } from './OverlayProvider'
 import { SSRProvider } from './SSRProvider'
@@ -13,6 +13,7 @@ export type CharcoalProviderProps = React.PropsWithChildren<{
   defaultTheme?: CharcoalTheme
   injectTokens?: boolean
   components?: Partial<Components>
+  background?: keyof ThemeColor
 }>
 
 export function CharcoalProvider({
@@ -21,11 +22,14 @@ export function CharcoalProvider({
   components = {},
   injectTokens = true,
   children,
+  background,
 }: CharcoalProviderProps) {
   return (
     <SSRProvider>
       <ThemeProvider theme={defaultTheme}>
-        {injectTokens && <TokenInjector theme={themeMap} />}
+        {injectTokens && (
+          <TokenInjector theme={themeMap} background={background} />
+        )}
         <ComponentAbstraction components={components}>
           <OverlayProvider>{children}</OverlayProvider>
         </ComponentAbstraction>