fix: change inline to variant

tremorlabs · Jan 15, 2023 · 0df977d · 0df977d
1 parent 1243a9d
commit 0df977d
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 15 deletions.
diff --git a/src/components/input-elements/Button/Button.tsx b/src/components/input-elements/Button/Button.tsx
@@ -129,12 +129,6 @@ const Button = ({
       "DeprecationWarning: The `importance` property is deprecated and will be removed in the next major release. Please use `variant` instead."
     );
   }
-  if (importance) {
-    console.warn(
-      "DeprecationWarning: The `importance` property is deprecated and will be removed \
-            in the next major release. Please use `variant` instead."
-    );
-  }
 
   const Icon = icon;
   const buttonImportance = importance ?? Importances.Primary;
@@ -154,7 +148,7 @@ const Button = ({
     iconSizes[buttonSize].width
   );
   const buttonShapeStyles =
-    variant !== "inline"
+    variant !== "light"
       ? classNames(borderRadius.md.all, border.sm.all, boxShadow.sm)
       : "";
   const buttonColorStyles = isBaseColor(color)

diff --git a/src/components/input-elements/Button/styles.ts b/src/components/input-elements/Button/styles.ts
@@ -34,7 +34,7 @@ export const iconSizes: { [size: string]: Sizing } = {
 };
 
 export const getButtonProportions = (variant: ButtonVariant) => {
-  if (!(variant === "inline")) {
+  if (!(variant === "light")) {
     return {
       xs: {
         paddingLeft: spacing.md.paddingLeft,
@@ -159,7 +159,7 @@ export const getButtonColors = (variant: ButtonVariant, color: Color) => {
           getColorTheme(color).ring
         ).focusRingColor,
       };
-    case "inline":
+    case "light":
       return {
         textColor: getColorVariantsFromColorThemeValue(
           getColorTheme(color).text

diff --git a/src/components/input-elements/ButtonInline/ButtonInline.tsx b/src/components/input-elements/ButtonInline/ButtonInline.tsx
@@ -1,6 +1,6 @@
 /**
  * NOTE: The ButtonInline component is deprecated and will be removed in the next major release.
- * Please refer to the variant="inline" property of the Button component instead.
+ * Please refer to the variant="light" property of the Button component instead.
  */
 
 import React from "react";
@@ -65,7 +65,7 @@ const ButtonInline = ({
   children,
 }: ButtonInlineProps) => {
   console.warn(
-    "DeprecationWarning: The `ButtonInline` component is deprecated and will be removed in the next major release. Please use `<Button variant='inline'>` instead."
+    "DeprecationWarning: The `ButtonInline` component is deprecated and will be removed in the next major release. Please use `<Button variant='light'>` instead."
   );
 
   if (handleClick) {

diff --git a/src/lib/inputTypes.ts b/src/lib/inputTypes.ts
@@ -20,7 +20,7 @@ export type VerticalPosition = "top" | "bottom";
 
 export type Importance = "primary" | "secondary";
 
-export type ButtonVariant = "primary" | "secondary" | "inline";
+export type ButtonVariant = "primary" | "secondary" | "light";
 
 export type RelativeFilterOption = "tdy" | "w" | "t" | "m" | "y" | null;
 

diff --git a/src/lib/primitives.ts b/src/lib/primitives.ts
@@ -67,7 +67,7 @@ export const Importances: { [key: string]: Importance } = {
 export const ButtonVariants: { [key: string]: ButtonVariant } = {
   Primary: "primary",
   Secondary: "secondary",
-  Inline: "inline",
+  Light: "light",
 };
 
 export const HorizontalPositions: { [key: string]: HorizontalPosition } = {

diff --git a/src/stories/input-elements/Button.stories.tsx b/src/stories/input-elements/Button.stories.tsx
@@ -44,7 +44,7 @@ const SizesTemplate: ComponentStory<typeof Button> = (args) => (
             {...args}
             size={size}
             text="Button"
-            variant="inline"
+            variant="light"
             icon={MyIcon}
             iconPosition="right"
           />
@@ -62,7 +62,7 @@ const ColorsTemplate: ComponentStory<typeof Button> = (args) => (
           <Button {...args} color={color} text={color} />
           <Button {...args} color={color} text={color} icon={MyIcon} />
           <Button {...args} color={color} text={color} variant="secondary" />
-          <Button {...args} color={color} text={color} variant="inline" />
+          <Button {...args} color={color} text={color} variant="light" />
         </>
       ))}
     </ColGrid>