Add deprecated isReversed prop to Button (#5325)

* add deprecated isReversed props to Button * update type description and how reversed variant is set * Update packages/components/src/__actions__/Button/v3/Button.tsx Co-authored-by: Cassandra <cassandra.tam@cultureamp.com> --------- Co-authored-by: Cassandra <cassandra.tam@cultureamp.com>
cultureamp · Dec 3, 2024 · 92c228f · 92c228f
1 parent 4a78769
commit 92c228f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/.changeset/hot-deers-sneeze.md b/.changeset/hot-deers-sneeze.md
@@ -0,0 +1,8 @@
+---
+"@kaizen/components": patch
+---
+
+Add a deprecated isReversed prop to Button v3 to allow for safe migration path to the ReversedColors Provider.
+
+* `isReversed` to allow users to toggle the reversed variants with a `boolean`.
+* Adds `@deprecated` flag to prompt user to use the `ReverseColors` Provider instead.
diff --git a/packages/components/src/__actions__/Button/v3/Button.tsx b/packages/components/src/__actions__/Button/v3/Button.tsx
@@ -26,6 +26,11 @@ type ButtonBaseProps = Omit<RACButtonProps, "children"> & {
   iconPosition?: "start" | "end"
   /** Controls if the button inherits width from its parent. @default "false" */
   isFullWidth?: boolean
+  /**
+   * Controls the reversed style of Button
+   * @deprecated Use the ReversedColors Provider instead. This is here to support gradual migration to the ReversedColors Provider and will take precedence if a value is provided. {@link https://cultureamp.design/?path=/docs/actions-button-button-v3-api-specification--docs#variants}
+   */
+  isReversed?: boolean
 }
 
 export type ButtonProps = ButtonBaseProps & PendingButtonProps
@@ -45,11 +50,13 @@ export const Button = forwardRef(
       isPending,
       hasHiddenPendingLabel: propsHasHiddenPendingLabel = false,
       pendingLabel,
+      isReversed,
       ...restProps
     }: ButtonProps,
     ref: React.ForwardedRef<HTMLButtonElement>
   ) => {
-    const isReversed = useReversedColors()
+    const shouldUseReverse = useReversedColors()
+    const isReversedVariant = isReversed ?? shouldUseReverse
     const pendingProps: PendingButtonProps = isPending
       ? {
           isPending,
@@ -71,7 +78,7 @@ export const Button = forwardRef(
           styles[size],
           hasHiddenLabel && styles[`${size}IconButton`],
           isDisabled && styles.isDisabled,
-          isReversed ? styles[`${variant}Reversed`] : styles[variant],
+          isReversedVariant ? styles[`${variant}Reversed`] : styles[variant],
           isFullWidth && styles.fullWidth,
           className
         )}

diff --git a/packages/components/src/__actions__/Button/v3/_docs/Button--api-specification.mdx b/packages/components/src/__actions__/Button/v3/_docs/Button--api-specification.mdx
@@ -25,7 +25,7 @@ The following example and table showcases the essential props that enable the co
 
 <Canvas of={exampleStories.Playground} />
 
-<Controls of={exampleStories.Playground} className="mb-64" include={["children", "hasHiddenLabel", "className",  "size", "variant", "onPress", "icon", "iconPosition", "isFullWidth", "isDisabled", "isPending","pendingLabel", "hasHiddenPendingLabel" ]} />
+<Controls of={exampleStories.Playground} className="mb-64" include={["children", "hasHiddenLabel", "className",  "size", "variant", "isReversed", "onPress", "icon", "iconPosition", "isFullWidth", "isDisabled", "isPending","pendingLabel", "hasHiddenPendingLabel" ]} />
 
 ## Buttons and links
 
@@ -43,7 +43,7 @@ This is built on top of [React Aria's Button component](https://react-spectrum.a
 
 <Canvas of={exampleStories.ButtonVariants} />
 
-Reversed variants are handled via the `ReversedColors` Provider - read more on this in the [reversed colors section](#reversed-colors).
+Reversed variants are handled via the `ReversedColors` Provider.
 
 <DocsStory of={exampleStories.ButtonVariantsReversed} expanded={false} />