@charcoal-ui/react 4.0.0-beta.11 → 4.0.0-beta.13

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

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > AssistiveText 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "width": 288,
       }
     }
@@ -17,7 +17,7 @@ exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
       <div
         className="charcoal-field-label-root"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -46,7 +46,7 @@ exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -113,13 +113,13 @@ exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > CustomChildren 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "width": 288,
       }
     }
@@ -130,7 +130,7 @@ exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
       <div
         className="charcoal-field-label-root"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -159,7 +159,7 @@ exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -208,7 +208,7 @@ exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
         >
           <div
             style={
-              {
+              Object {
                 "fontWeight": "bold",
               }
             }
@@ -226,13 +226,13 @@ exports[`Storybook Tests react/DropdownSelector CustomChildren 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector Default 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > Default 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "width": 288,
       }
     }
@@ -243,7 +243,7 @@ exports[`Storybook Tests react/DropdownSelector Default 1`] = `
       <div
         className="charcoal-field-label-root"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -270,7 +270,7 @@ exports[`Storybook Tests react/DropdownSelector Default 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -327,13 +327,13 @@ exports[`Storybook Tests react/DropdownSelector Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector Disabled 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > Disabled 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "width": 288,
       }
     }
@@ -345,7 +345,7 @@ exports[`Storybook Tests react/DropdownSelector Disabled 1`] = `
       <div
         className="charcoal-field-label-root"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -374,7 +374,7 @@ exports[`Storybook Tests react/DropdownSelector Disabled 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -434,13 +434,13 @@ exports[`Storybook Tests react/DropdownSelector Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector DisabledItem 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > DisabledItem 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "width": 288,
       }
     }
@@ -451,7 +451,7 @@ exports[`Storybook Tests react/DropdownSelector DisabledItem 1`] = `
       <div
         className="charcoal-field-label-root"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -480,7 +480,7 @@ exports[`Storybook Tests react/DropdownSelector DisabledItem 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -550,14 +550,14 @@ exports[`Storybook Tests react/DropdownSelector DisabledItem 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector InFormTag 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > InFormTag 1`] = `
 <div
   data-dark={false}
 >
   <form
     onSubmit={[Function]}
     style={
-      {
+      Object {
         "display": "flex",
         "width": 288,
       }
@@ -569,7 +569,7 @@ exports[`Storybook Tests react/DropdownSelector InFormTag 1`] = `
       <div
         className="charcoal-field-label-root"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -598,7 +598,7 @@ exports[`Storybook Tests react/DropdownSelector InFormTag 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -658,7 +658,7 @@ exports[`Storybook Tests react/DropdownSelector InFormTag 1`] = `
       className="charcoal-button"
       data-variant="Primary"
       style={
-        {
+        Object {
           "marginLeft": 16,
         }
       }
@@ -670,13 +670,13 @@ exports[`Storybook Tests react/DropdownSelector InFormTag 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector InModal 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > InModal 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "height": "10px",
       }
     }
@@ -690,13 +690,13 @@ exports[`Storybook Tests react/DropdownSelector InModal 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > Invalid 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "width": 288,
       }
     }
@@ -707,7 +707,7 @@ exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
       <div
         className="charcoal-field-label-root"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -736,7 +736,7 @@ exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -796,13 +796,13 @@ exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > InvalidAssistiveText 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "width": 288,
       }
     }
@@ -813,7 +813,7 @@ exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
       <div
         className="charcoal-field-label-root"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -842,7 +842,7 @@ exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -910,13 +910,13 @@ exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector Label 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > Label 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "width": 288,
       }
     }
@@ -942,7 +942,7 @@ exports[`Storybook Tests react/DropdownSelector Label 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -1001,13 +1001,13 @@ exports[`Storybook Tests react/DropdownSelector Label 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector LongNames 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > LongNames 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "width": 288,
       }
     }
@@ -1018,7 +1018,7 @@ exports[`Storybook Tests react/DropdownSelector LongNames 1`] = `
       <div
         className="charcoal-field-label-root"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -1047,7 +1047,7 @@ exports[`Storybook Tests react/DropdownSelector LongNames 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -1106,13 +1106,13 @@ exports[`Storybook Tests react/DropdownSelector LongNames 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector RequiredText 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > RequiredText 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "width": 288,
       }
     }
@@ -1143,7 +1143,7 @@ exports[`Storybook Tests react/DropdownSelector RequiredText 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -1202,13 +1202,13 @@ exports[`Storybook Tests react/DropdownSelector RequiredText 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector Section 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > Section 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "width": 288,
       }
     }
@@ -1219,7 +1219,7 @@ exports[`Storybook Tests react/DropdownSelector Section 1`] = `
       <div
         className="charcoal-field-label-root"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -1248,7 +1248,7 @@ exports[`Storybook Tests react/DropdownSelector Section 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
@@ -1322,13 +1322,13 @@ exports[`Storybook Tests react/DropdownSelector Section 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/DropdownSelector SubLabel 1`] = `
+exports[`Storybook Tests > react/DropdownSelector > SubLabel 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "width": 288,
       }
     }
@@ -1356,7 +1356,7 @@ exports[`Storybook Tests react/DropdownSelector SubLabel 1`] = `
       <div
         aria-hidden="true"
         style={
-          {
+          Object {
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/Icon Default 1`] = `
+exports[`Storybook Tests > react/Icon > Default 1`] = `
 <div
   data-dark={false}
 >

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/IconButton Default 1`] = `
+exports[`Storybook Tests > react/IconButton > Default 1`] = `
 <div
   data-dark={false}
 >
@@ -18,7 +18,7 @@ exports[`Storybook Tests react/IconButton Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/IconButton IsActive 1`] = `
+exports[`Storybook Tests > react/IconButton > IsActive 1`] = `
 <div
   data-dark={false}
 >
@@ -35,7 +35,7 @@ exports[`Storybook Tests react/IconButton IsActive 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/IconButton Overlay 1`] = `
+exports[`Storybook Tests > react/IconButton > Overlay 1`] = `
 <div
   data-dark={false}
 >

package/src/components/IconButton/index.tsx

@@ -12,8 +12,7 @@ export type IconButtonProps<T extends React.ElementType = 'button'> = {
   readonly size?: Size
   readonly icon: keyof KnownIconType
   readonly isActive?: boolean
-  as?: T
-  componentAs?: React.ComponentPropsWithRef<T>['as']
+  component?: T
 } & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>
 
 const IconButton = forwardRef(function IconButtonInner<
@@ -24,20 +23,18 @@ const IconButton = forwardRef(function IconButtonInner<
     size = 'M',
     icon,
     isActive = false,
-    componentAs,
-    as,
+    component,
     ...rest
   }: IconButtonProps<T>,
   ref: ForwardedRef<HTMLButtonElement>
 ) {
   validateIconSize(size, icon)
-  const Component = useMemo(() => as ?? 'button', [as])
+  const Component = useMemo(() => component ?? 'button', [component])
   const classNames = useClassNames('charcoal-icon-button', rest.className)
 
   return (
     <Component
       {...rest}
-      as={componentAs}
       ref={ref}
       className={classNames}
       data-size={size}

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/LoadingSpinner Default 1`] = `
+exports[`Storybook Tests > react/LoadingSpinner > Default 1`] = `
 <div
   data-dark={false}
 >
@@ -9,7 +9,7 @@ exports[`Storybook Tests react/LoadingSpinner Default 1`] = `
     data-transparent={false}
     role="progressbar"
     style={
-      {
+      Object {
         "--charcoal-loading-spinner-padding": "16px",
         "--charcoal-loading-spinner-size": "48px",
       }
@@ -24,7 +24,7 @@ exports[`Storybook Tests react/LoadingSpinner Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/LoadingSpinner Padding 1`] = `
+exports[`Storybook Tests > react/LoadingSpinner > Padding 1`] = `
 <div
   data-dark={false}
 >
@@ -33,7 +33,7 @@ exports[`Storybook Tests react/LoadingSpinner Padding 1`] = `
     data-transparent={false}
     role="progressbar"
     style={
-      {
+      Object {
         "--charcoal-loading-spinner-padding": "24px",
         "--charcoal-loading-spinner-size": "48px",
       }
@@ -48,7 +48,7 @@ exports[`Storybook Tests react/LoadingSpinner Padding 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/LoadingSpinner Size 1`] = `
+exports[`Storybook Tests > react/LoadingSpinner > Size 1`] = `
 <div
   data-dark={false}
 >
@@ -57,7 +57,7 @@ exports[`Storybook Tests react/LoadingSpinner Size 1`] = `
     data-transparent={false}
     role="progressbar"
     style={
-      {
+      Object {
         "--charcoal-loading-spinner-padding": "16px",
         "--charcoal-loading-spinner-size": "128px",
       }
@@ -72,7 +72,7 @@ exports[`Storybook Tests react/LoadingSpinner Size 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/LoadingSpinner Transparent 1`] = `
+exports[`Storybook Tests > react/LoadingSpinner > Transparent 1`] = `
 <div
   data-dark={false}
 >
@@ -81,7 +81,7 @@ exports[`Storybook Tests react/LoadingSpinner Transparent 1`] = `
     data-transparent={true}
     role="progressbar"
     style={
-      {
+      Object {
         "--charcoal-loading-spinner-padding": "16px",
         "--charcoal-loading-spinner-size": "48px",
       }