better prop names (#1637)

1. kind > $type 2. size > $size
gnosis · Nov 20, 2020 · e23e076 · e23e076
1 parent 7b5dd8c
commit e23e076
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 20 deletions.
diff --git a/src/components/common/Button/index.stories.tsx b/src/components/common/Button/index.stories.tsx
@@ -12,8 +12,8 @@ export default {
   decorators: [ThemeToggler],
   argTypes: {
     label: { control: 'text' },
-    kind: { control: 'radio' },
-    size: { control: 'inline-radio' },
+    $type: { control: 'radio' },
+    $size: { control: 'inline-radio' },
     as: { control: null },
     theme: { control: null },
     forwardedAs: { control: null },
@@ -27,56 +27,56 @@ const Template: Story<ButtonBaseProps & { label?: string | React.ReactNode }> =
 export const PrimaryButton = Template.bind({})
 PrimaryButton.args = {
   label: 'Main Button',
-  kind: 'default',
+  $type: 'default',
 }
 
 export const SecondaryButton = Template.bind({})
 SecondaryButton.args = {
   label: 'Secondary Button',
-  kind: 'secondary',
+  $type: 'secondary',
 }
 
 export const SuccessButton = Template.bind({})
 SuccessButton.args = {
   label: 'Success Button',
-  kind: 'success',
+  $type: 'success',
 }
 
 export const WarningButton = Template.bind({})
 WarningButton.args = {
   label: 'Warning Button',
-  kind: 'warning',
+  $type: 'warning',
 }
 
 export const DangerButton = Template.bind({})
 DangerButton.args = {
   label: 'Danger Button',
-  kind: 'danger',
+  $type: 'danger',
 }
 
 export const CancelButton = Template.bind({})
 CancelButton.args = {
   label: 'Cancel Button',
-  kind: 'cancel',
+  $type: 'cancel',
 }
 
 export const DisabledButton = Template.bind({})
 DisabledButton.args = {
   label: 'Disabled Button',
-  kind: 'disabled',
+  $type: 'disabled',
   disabled: true,
 }
 
 export const BigButton = Template.bind({})
 BigButton.args = {
   label: 'Big Button',
-  kind: 'primary',
-  size: 'big',
+  $type: 'primary',
+  $size: 'big',
 }
 
 export const SmolButton = Template.bind({})
 SmolButton.args = {
   label: 'Smol Button',
-  kind: 'primary',
-  size: 'small',
+  $type: 'primary',
+  $size: 'small',
 }
diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/index.tsx
@@ -5,8 +5,8 @@ import StyledButton, { ButtonVariations, ButtonSizeVariations } from 'styles/com
 import styles from 'styles/styles'
 
 export interface ButtonBaseProps extends React.ButtonHTMLAttributes<Element> {
-  kind?: ButtonVariations
-  size?: ButtonSizeVariations
+  $type?: ButtonVariations
+  $size?: ButtonSizeVariations
 }
 
 export const ButtonBase = styled(StyledButton)<ButtonBaseProps>`
@@ -40,11 +40,11 @@ const ThemeButtonToggleWrapper = styled.div<{ $mode: boolean }>`
 
 export const ThemeButton: React.FC<
   ButtonBaseProps & {
-    mode: boolean
+    $mode: boolean
   }
 > = (props) => {
   return (
-    <ThemeButtonToggleWrapper $mode={props.mode}>
+    <ThemeButtonToggleWrapper $mode={props.$mode}>
       <ButtonBase {...props} />
     </ThemeButtonToggleWrapper>
   )

diff --git a/src/storybook/decorators.tsx b/src/storybook/decorators.tsx
@@ -29,7 +29,7 @@ export const ThemeToggler = (DecoratedStory: () => JSX.Element): JSX.Element =>
       <ThemeProvider theme={theme}>
         <Frame style={{ background: darkMode ? COLOURS.bgDark : COLOURS.bgLight }}>{DecoratedStory()}</Frame>
         {/* Cheeky use of ButtonBase here :P */}
-        <ThemeButton size="small" kind="theme" onClick={handleDarkMode} mode={darkMode}>
+        <ThemeButton $size="small" $type="theme" onClick={handleDarkMode} $mode={darkMode}>
           <FontAwesomeIcon icon={darkMode ? faMoon : faSun} />
         </ThemeButton>
         <br />

diff --git a/src/styles/common/StyledButton.tsx b/src/styles/common/StyledButton.tsx
@@ -50,7 +50,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<'kind', ButtonVariations>('mode', 'kind', {
+export const ButtonTheme = variants<'$type', ButtonVariations>('mode', '$type', {
   default: {
     light: css`
       color: ${white};
@@ -204,7 +204,7 @@ export const ButtonTheme = variants<'kind', ButtonVariations>('mode', 'kind', {
 })
 
 // Created a 'size' prop on buttons, default | small | big
-const ButtonSizes = variants('component', 'size', {
+const ButtonSizes = variants('component', '$size', {
   default: {
     buttons: '',
   },