variation > variant prop name

gnosis · Nov 23, 2020 · 1a85999 · 1a85999
1 parent d6804f0
commit 1a85999
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 14 deletions.
diff --git a/src/components/common/Button/index.stories.tsx b/src/components/common/Button/index.stories.tsx
@@ -12,7 +12,7 @@ export default {
   decorators: [ThemeToggler],
   argTypes: {
     label: { control: 'text' },
-    variation: { control: 'radio' },
+    variant: { control: 'radio' },
     size: { control: 'inline-radio' },
     as: { control: null },
     theme: { control: null },
@@ -27,56 +27,56 @@ const Template: Story<ButtonBaseProps & { label?: React.ReactNode }> = (args) =>
 export const PrimaryButton = Template.bind({})
 PrimaryButton.args = {
   label: 'Main Button',
-  variation: 'default',
+  variant: 'default',
 }
 
 export const SecondaryButton = Template.bind({})
 SecondaryButton.args = {
   label: 'Secondary Button',
-  variation: 'secondary',
+  variant: 'secondary',
 }
 
 export const SuccessButton = Template.bind({})
 SuccessButton.args = {
   label: 'Success Button',
-  variation: 'success',
+  variant: 'success',
 }
 
 export const WarningButton = Template.bind({})
 WarningButton.args = {
   label: 'Warning Button',
-  variation: 'warning',
+  variant: 'warning',
 }
 
 export const DangerButton = Template.bind({})
 DangerButton.args = {
   label: 'Danger Button',
-  variation: 'danger',
+  variant: 'danger',
 }
 
 export const CancelButton = Template.bind({})
 CancelButton.args = {
   label: 'Cancel Button',
-  variation: 'cancel',
+  variant: 'cancel',
 }
 
 export const DisabledButton = Template.bind({})
 DisabledButton.args = {
   label: 'Disabled Button',
-  variation: 'disabled',
+  variant: 'disabled',
   disabled: true,
 }
 
 export const BigButton = Template.bind({})
 BigButton.args = {
   label: 'Big Button',
-  variation: 'primary',
+  variant: 'primary',
   size: 'big',
 }
 
 export const SmolButton = Template.bind({})
 SmolButton.args = {
   label: 'Smol Button',
-  variation: 'primary',
+  variant: 'primary',
   size: 'small',
 }
diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/index.tsx
@@ -26,7 +26,7 @@ const {
 const { borderRadius, buttonBorder, buttonFontSize } = BASE_STYLES
 
 export interface ButtonBaseProps extends React.ButtonHTMLAttributes<Element> {
-  variation?: ButtonVariations
+  variant?: ButtonVariations
   size?: ButtonSizeVariations
 }
 
@@ -48,7 +48,7 @@ export type ButtonSizeVariations = 'default' | 'small' | 'big'
 // Create our variated Button Theme
 // 'kind' refers to a prop on button
 // <ButtonBase kind="danger" />
-export const ButtonTheme = variants('mode', 'variation', {
+export const ButtonTheme = variants('mode', 'variant', {
   default: {
     light: css`
       color: ${white};
@@ -271,10 +271,10 @@ export const ThemeToggle: React.FC<
   ButtonBaseProps & {
     mode: boolean
   }
-> = ({ mode, size = 'small', variation = 'theme', children, ...rest }) => {
+> = ({ mode, size = 'small', variant = 'theme', children, ...rest }) => {
   return (
     <ThemeButtonToggleWrapper $mode={mode}>
-      <ButtonBase {...rest} size={size} variation={variation}>
+      <ButtonBase {...rest} size={size} variant={variant}>
         {children}
       </ButtonBase>
     </ThemeButtonToggleWrapper>