wip: update poc types and rendering

packages/components/src/__actions__/Button/v3/Button.module.scss

@@ -7,6 +7,9 @@
     #{var(--spacing-8)} - #{var(--border-solid-border-width)}
   );
   --button-icon-size: var(--spacing-24);
+  --button-bg-color: var(--color-blue-500);
+  --button-border-color: var(--color-blue-500);
+  --button-text-color: var(--color-white);
 
   // RESET
   appearance: none;
@@ -16,9 +19,12 @@
   margin: 0;
   border: none;
   // RESET
+  background-color: var(--button-bg-color);
   border: var(--border-solid-border-width) var(--border-solid-border-style);
+  border-color: var(--button-border-color);
   border-radius: var(--border-solid-border-radius);
   box-sizing: border-box;
+  color: var(--button-text-color);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -53,7 +59,56 @@
   }
 }
 
-.default {
+.primary {
+  &[data-hovered],
+  &[data-focus-visible] {
+    --button-bg-color: var(--color-blue-400);
+    --button-border-color: var(--color-blue-400);
+  }
+  &[data-pressed] {
+    --button-bg-color: var(--color-blue-600);
+    --button-border-color: var(--color-blue-600);
+  }
+}
+
+.secondary {
+  --button-bg-color: var(--color-gray-500);
+  --button-border-color: var(--color-purple-800);
+  --button-text-color: var(--color-purple-800);
+
+  &[data-hovered],
+  &[data-focus-visible],
+  &[data-pressed] {
+    background-color: var(--color-gray-200);
+    border-color: var(--color-purple-800);
+  }
+
+  &[data-disabled] {
+    opacity: 0.3;
+  }
+
+  &.reversed {
+    background-color: transparent;
+    border-color: rgba(var(--color-white-rgb), 0.65);
+    color: var(--color-white);
+
+    &[data-hovered],
+    &[data-focus-visible] {
+      background-color: rgba(var(--color-white-rgb), 0.1);
+      border-color: var(--color-white);
+    }
+
+    &[data-focus-visible]::after {
+      border-color: var(--color-blue-300);
+    }
+
+    &[data-disabled]::after {
+      border-color: var(--color-gray-400);
+    }
+  }
+}
+
+.secondary {
   border-color: var(--color-gray-500);
   color: var(--color-purple-800);
 

packages/components/src/__actions__/Button/v3/Button.tsx

@@ -9,13 +9,58 @@ import { mergeClassNames } from "~components/utils/mergeClassNames"
 import styles from "./Button.module.scss"
 
 export type ButtonVariants = "primary" | "secondary" | "tertiary"
+export type ButtonSizes = "small" | "medium" | "large"
 
-type SharedButtonProps = {
+// type ButtonPendingProps = {
+//   isPending?: false
+//   /** Rendered as the child while `pendingLabel` is `true` */
+//   pendingLabel?: string
+//   /** Hides the `pendingLabel` and renders only the loading spinner if `isPending` is `true`. This will still be used as the accessible label.
+//    * @default false
+//    */
+//   isPendingLabelVisible?: boolean
+// }
+
+// type ButtonContentProps = {
+//   /** The visual label of Button. */
+//   label?: string
+//   icon?: JSX.Element
+//   /** `iconPosition` will only control icons passed in as a prop
+//    * @default "start"
+//    */
+//   iconPosition?: "start" | "end"
+//   /** The visual size of the button. `medium` was formerly `regular`
+//    * @default "primary"
+//    */
+//   children?: never
+// } & ButtonPendingProps
+
+// type ButtonContentWithChildrenProps = {
+//   children: RACButtonProps["children"]
+//   label?: never
+//   icon?: never
+//   iconPosition?: never
+// } & ButtonPendingProps
+
+export type ButtonBaseProps = {
+  /** The visual label of Button. */
+  label?: string
+  icon?: JSX.Element
+  /** `iconPosition` will only control icons passed in as a prop
+   * @default "start"
+   */
+  iconPosition?: "start" | "end"
+  /** The visual size of the button. `medium` was formerly `regular`
+   * @default "primary"
+   */
   variant?: ButtonVariants
   /** The visual size of the button. `medium` was formerly `regular`
    * @default "medium"
    */
-  size?: "small" | "medium" | "large"
+  size?: ButtonSizes
+  /** Determines if the button should fill the width of its container
+   * @default false
+   */
   isFullWidth?: boolean
   /** Triggers a pending state and stops additional press events while waiting for a server response
    * @default false
@@ -27,58 +72,19 @@ type SharedButtonProps = {
    * @default false
    */
   isPendingLabelVisible?: boolean
-}
+} & Omit<RACButtonProps, "children">
 
-export type ButtonWithoutChildren = SharedButtonProps &
-  Omit<RACButtonProps, "children"> & {
-    /** The visual label of Button. */
-    label: string
-    icon: JSX.Element
-    /** `iconPosition` will only control icons passed in as a prop
-     * @default "start"
-     */
-    iconPosition?: "start" | "end"
-    /** Determines if the button should fill the width of its container
-     * @default false
-     */
-  }
+export type ButtonWithoutChildren = ButtonBaseProps & {
+  label: string
+  children?: never
+}
 
-export type ButtonWithChildren = SharedButtonProps & RACButtonProps
+export type ButtonWithChildren = ButtonBaseProps & {
+  label?: never
+  children: RACButtonProps["children"]
+}
 
-export type ButtonProps = ButtonWithChildren | ButtonWithoutChildren
-
-// export type ButtonProps = RACButtonProps & {
-//   /** The visual label of Button. */
-//   label?: string
-//   /** The visual style of the button.
-//    * @default "primary"
-//    */
-//   variant?: ButtonVariants
-//   /** The visual size of the button. `medium` was formerly `regular`
-//    * @default "medium"
-//    */
-//   size?: "small" | "medium" | "large"
-//   /** renders an JSX icon at the start or end of the button component */
-//   icon?: JSX.Element
-//   /** `iconPosition` will only control icons passed in as a prop
-//    * @default "start"
-//    */
-//   iconPosition?: "start" | "end"
-//   /** Determines if the button should fill the width of its container
-//    * @default false
-//    */
-//   isFullWidth?: boolean
-//   /** Triggers a pending state and stops additional press events while waiting for a server response
-//    * @default false
-//    */
-//   isPending?: false
-//   /** Rendered as the child while `pendingLabel` is `true` */
-//   pendingLabel?: string
-//   /** Hides the `pendingLabel` and renders only the loading spinner if `isPending` is `true`. This will still be used as the accessible label.
-//    * @default false
-//    */
-//   isPendingLabelVisible?: boolean
-// }
+export type ButtonProps = ButtonWithoutChildren | ButtonWithChildren
 
 export type PendingButtonProps = Omit<
   ButtonProps,
@@ -94,7 +100,7 @@ export type PendingButtonProps = Omit<
   isPendingLabelVisible?: boolean
 }
 
-// TODO: smart way to define the content width based on the total size of the button content - if there's a way not to have to pass in all of button props that would be good
+// TODO: the content width based on the total size of the button content
 const PendingContent = ({
   pendingLabel,
   isPendingLabelVisible,
@@ -110,25 +116,39 @@ const PendingContent = ({
 
   return (
     <>
+      {/* TODO: the loading spinner will need to take size */}
       <LoadingSpinner size="md" accessibilityLabel={pendingLabel} />
     </>
   )
 }
 
+const ButtonContent = (props: ButtonProps): JSX.Element => {
+  const hasChildren = "children" in props
+
+  return hasChildren ? (
+    <>{props.children}</>
+  ) : (
+    <>
+      {props.iconPosition !== "end" && props.icon}
+      {props.label}
+      {props.iconPosition === "end" && props.icon}
+    </>
+  )
+}
+
 export const Button = ({
   variant = "primary",
   className,
   size = "medium",
   isFullWidth,
-  isPending,
+  // isPending,
   ...otherProps
-}: ButtonProps | PendingButtonProps): JSX.Element => {
+}: ButtonProps): JSX.Element => {
   const isReversed = useReversedColors()
-  const hasChildren = "children" in otherProps
 
   return (
     <RACButton
-      aria-live={"workingLabel" in otherProps ? "polite" : undefined}
+      aria-live={"pendingLabel" in otherProps ? "polite" : undefined}
       className={mergeClassNames(
         styles.button,
         styles[variant],
@@ -139,12 +159,7 @@ export const Button = ({
       )}
       {...otherProps}
     >
-      {/* TODO: maybe children is always there just visually hidden and removed from the a11y dom when it is pending */}
-      {isPending ? (
-        <PendingContent {...(otherProps as PendingButtonProps)} />
-      ) : (
-        hasChildren && otherProps.children
-      )}
+      <ButtonContent {...otherProps} />
     </RACButton>
   )
 }

packages/components/src/__actions__/Button/v3/_docs/ApiSpecification.mdx

@@ -3,7 +3,7 @@ import { ResourceLinks, SbContent, KAIOInstallation } from "~storybook/component
 import * as docsStories from "./Button.docs.stories"
 import * as exampleStories from "./Button.stories"
 
-<Meta title="Actions/Button/v3/API Specification" />
+<Meta title="Actions/Button/Button (v3)/API Specification" />
 
 <SbContent>
   # Button API Specification (v3)
@@ -30,7 +30,6 @@ import * as exampleStories from "./Button.stories"
 <SbContent>
   <KAIOInstallation exportNames={["Tooltip", "TooltipTrigger" ]} family="actions" version="3" />
 
-
   ## Overview
 
 </SbContent>
@@ -52,7 +51,22 @@ import * as exampleStories from "./Button.stories"
 </SbContent>
 
 
-<Controls of={exampleStories.Playground} className="mb-64" />
+<Controls
+  of={exampleStories.Playground}
+  className="mb-64"
+  include={[
+    "label",
+    "variant",
+    "size",
+    "icon",
+    "iconPosition",
+    "children",
+    "isFullWidth",
+    "isPending",
+    "pendingLabel",
+    "isPendingLabelVisible"
+  ]}
+/>
 
 <SbContent className="mb-64">
   ### onPress vs onClick

packages/components/src/__actions__/Button/v3/_docs/Button.docs.stories.tsx

@@ -5,7 +5,7 @@ import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
 import { Button } from "../index"
 
 const meta = {
-  title: "Actions/Button/v3/Doc Assets",
+  title: "Actions/Button/Button (v3)/Doc Assets",
   component: Button,
   args: {
     children: "Label",

packages/components/src/__actions__/Button/v3/_docs/Button.mdx

@@ -2,7 +2,7 @@ import { Canvas, Meta, Controls } from "@storybook/blocks"
 import { ResourceLinks, SbContent, Installation } from "~storybook/components"
 import * as Button from "./Button.stories"
 
-<Meta title="Actions/Button/v3/Usage Guidelines" />
+<Meta title="Actions/Button/Button (v3)/Usage Guidelines" />
 
 <SbContent>
   # Button (v3)

packages/components/src/__actions__/Button/v3/_docs/Button.spec.stories.tsx

@@ -14,7 +14,7 @@ import { Button } from "../index"
 const onPressEvent = fn()
 
 const meta = {
-  title: "Actions/Button/v3/Tests",
+  title: "Actions/Button/Button (v3)/Tests",
   component: Button,
   args: {
     children: "Label",

packages/components/src/__actions__/Button/v3/_docs/Button.stickersheet.stories.tsx

@@ -9,7 +9,7 @@ import {
 import { Button } from "../index"
 
 export default {
-  title: "Actions/Button/v3/Tests",
+  title: "Actions/Button/Button (v3)/Tests",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },