switched from 'flat' flag to 'variant' prop in components

Mrpanquecas · May 20, 2019 · aac7218 · aac7218
1 parent 21cf361
commit aac7218
Show file tree

Hide file tree

Showing 17 changed files with 96 additions and 84 deletions.
diff --git a/src/components/Bar/Bar.stories.js b/src/components/Bar/Bar.stories.js
@@ -21,10 +21,8 @@ storiesOf("Bar", module)
     <AppBar>
       <Toolbar>
         <Bar />
-        <Button flat accent>
-          Edit
-        </Button>
-        <Button flat accent disabled>
+        <Button variant="menu">Edit</Button>
+        <Button variant="menu" disabled>
           Save
         </Button>
         <Bar />

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -27,26 +27,26 @@ const commonButtonStyles = css`
 `;
 
 const StyledButton = styled.button`
-  ${({ flat }) =>
-    flat
+  ${({ variant }) =>
+    variant === "flat"
       ? css`
           ${createFlatBoxStyles()} /* background: none; */
         `
       : css`
           ${createBoxStyles()};
-          ${({ srat, active }) =>
-            srat
+          ${({ variant, active }) =>
+            variant === "menu"
               ? null
               : active
               ? createBorderStyles(true)
               : createBorderStyles(false)}
           ${({ isDisabled }) =>
             isDisabled && createDisabledTextStyles()}
       &:active {
-            ${({ isDisabled, srat }) =>
-              !isDisabled && !srat && createBorderStyles(true)}
+            ${({ isDisabled, variant }) =>
+              !isDisabled && variant !== "menu" && createBorderStyles(true)}
           }
-          ${({ srat }) => srat && "border: none;"}
+          ${({ variant }) => variant === "menu" && "border: none;"}
         `}
   ${commonButtonStyles}
 `;
@@ -60,24 +60,22 @@ const Button = ({
   size,
   square,
   active,
-  flat,
-  srat,
+  variant,
   className,
   children,
   ...otherProps
 }) => {
   return (
     <StyledButton
       type={type}
+      variant={variant}
       onClick={disabled ? undefined : onClick}
       style={style}
       isDisabled={disabled}
       fullWidth={fullWidth}
       size={size}
       square={square}
       active={active}
-      flat={flat}
-      srat={srat}
       className={className}
       style={style}
       // onTouchStart below to enable button :active style on iOS
@@ -98,8 +96,7 @@ Button.defaultProps = {
   size: "md",
   square: false,
   active: false,
-  flat: false,
-  srat: false
+  variant: "default"
 };
 
 Button.propTypes = {
@@ -111,8 +108,7 @@ Button.propTypes = {
   size: propTypes.oneOf(["sm", "md", "lg"]),
   square: propTypes.bool,
   active: propTypes.bool,
-  flat: propTypes.bool,
-  srat: propTypes.bool,
+  variant: propTypes.oneOf(["default", "menu", "flat"]),
   className: propTypes.string,
   children: propTypes.node.isRequired
 };

diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
@@ -45,12 +45,12 @@ storiesOf("Button", module)
       💖
     </Button>
   ))
-  .add("srat", () => (
-    <Button {...actions} srat size="sm" accent>
+  .add("menu button", () => (
+    <Button {...actions} variant="menu" size="sm" accent>
       File
     </Button>
   ))
-  .add("flat", () => (
+  .add("flat button", () => (
     <Window>
       <WindowContent>
         <Cutout
@@ -66,10 +66,10 @@ storiesOf("Button", module)
             }}
           >
             <Toolbar>
-              <Button {...actions} flat fullWidth accent>
+              <Button {...actions} variant="flat" fullWidth accent>
                 OK
               </Button>
-              <Button {...actions} flat disabled fullWidth accent>
+              <Button {...actions} variant="flat" disabled fullWidth accent>
                 Cancel
               </Button>
             </Toolbar>

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -75,7 +75,7 @@ const Checkbox = ({
   onChange,
   label,
   disabled,
-  flat,
+  variant,
   value,
   checked,
   defaultChecked,
@@ -87,7 +87,7 @@ const Checkbox = ({
 }) => {
   let Input, isChecked;
 
-  const Checkmark = flat ? StyledFlatCheckmark : StyledCheckmark;
+  const Checkmark = variant === "flat" ? StyledFlatCheckmark : StyledCheckmark;
   if (defaultChecked || checked === undefined) {
     const [state, setState] = useState(defaultChecked || false);
 
@@ -139,7 +139,7 @@ Checkbox.defaultProps = {
   value: null,
   label: "",
   disabled: false,
-  flat: false,
+  variant: "default",
   shadow: true
 };
 
@@ -154,7 +154,7 @@ Checkbox.propTypes = {
   label: propTypes.oneOfType([propTypes.string, propTypes.number]),
   checked: propTypes.bool,
   disabled: propTypes.bool,
-  flat: propTypes.bool,
+  variant: propTypes.oneOf(["default", "flat"]),
   shadow: propTypes.bool,
   style: propTypes.object
 };

diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
@@ -29,13 +29,13 @@ storiesOf("Checkbox", module)
       </p>
       <div style={{ marginTop: "1rem" }}>
         <Checkbox
-          flat
+          variant="flat"
           defaultChecked={true}
           value="single"
           label="Earth is flat 🌍"
         />
         <Checkbox
-          flat
+          variant="flat"
           defaultChecked={false}
           value="single"
           label="Reptilians rule the world 🦎"

diff --git a/src/components/Fieldset/Fieldset.js b/src/components/Fieldset/Fieldset.js
@@ -8,12 +8,13 @@ import { fontSizes, padding } from "../common/system";
 const StyledFieldset = styled.fieldset`
   position: relative;
   border: 2px solid
-    ${({ theme, flat }) => (flat ? theme.flatDark : theme.borderLightest)};
+    ${({ theme, variant }) =>
+      variant === "flat" ? theme.flatDark : theme.borderLightest};
   padding: ${padding.md};
   font-size: ${fontSizes.md};
   color: ${({ theme }) => theme.text};
-  ${({ flat }) =>
-    !flat &&
+  ${({ variant }) =>
+    variant !== "flat" &&
     css`
       box-shadow: -1px -1px 0 1px ${({ theme }) => theme.borderDark},
         inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
@@ -27,7 +28,8 @@ const StyledLegend = styled.legend`
   padding: 0 ${padding.sm};
 
   font-size: ${fontSizes.md};
-  background: ${({ theme, flat }) => (flat ? theme.canvas : theme.material)};
+  background: ${({ theme, variant }) =>
+    variant === "flat" ? theme.canvas : theme.material};
 `;
 
 const StyledFieldsetContent = styled.div`
@@ -37,7 +39,7 @@ const StyledFieldsetContent = styled.div`
 const Fieldset = ({
   label,
   disabled,
-  flat,
+  variant,
   children,
   className,
   style,
@@ -46,12 +48,12 @@ const Fieldset = ({
   return (
     <StyledFieldset
       isDisabled={disabled}
-      flat={flat}
+      variant={variant}
       style={style}
       className={className}
       {...otherProps}
     >
-      {label && <StyledLegend flat={flat}>{label}</StyledLegend>}
+      {label && <StyledLegend variant={variant}>{label}</StyledLegend>}
       <StyledFieldsetContent isDisabled={disabled}>
         {children}
       </StyledFieldsetContent>
@@ -61,7 +63,7 @@ const Fieldset = ({
 
 Fieldset.defaultProps = {
   disabled: false,
-  flat: false
+  variant: "default"
 };
 
 Fieldset.propTypes = {
@@ -74,7 +76,7 @@ Fieldset.propTypes = {
   style: propTypes.object,
   children: propTypes.node,
   disabled: propTypes.bool,
-  flat: propTypes.bool
+  variant: propTypes.oneOf(["default", "flat"])
 };
 
 export default Fieldset;
diff --git a/src/components/Fieldset/Fieldset.stories.js b/src/components/Fieldset/Fieldset.stories.js
@@ -49,10 +49,10 @@ const FlatFieldset = () => {
             }}
           >
             <Fieldset
-              flat
+              variant="flat"
               label={
                 <Checkbox
-                  flat
+                  variant="flat"
                   style={{ margin: 0 }}
                   label="Enable"
                   checked={!state}
@@ -70,7 +70,7 @@ const FlatFieldset = () => {
     </Window>
   );
 };
-const DisabledFieldset = ({ flat }) => {
+const DisabledFieldset = () => {
   const [state, setState] = useState(true);
   return (
     <Window>

diff --git a/src/components/ListItem/ListItem.stories.js b/src/components/ListItem/ListItem.stories.js
@@ -2,10 +2,9 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
-import ListItem from "./ListItem";
-import List from "../List/List";
+import { ListItem, List, Divider } from "../";
 
-export const actions = { onClick: action("onClick") };
+const actions = { onClick: action("onClick") };
 
 storiesOf("ListItem", module)
   .addDecorator(story => (
@@ -51,6 +50,17 @@ storiesOf("ListItem", module)
       </ListItem>
     </List>
   ))
+  .add("size small", () => (
+    <List>
+      <ListItem size="sm">View</ListItem>
+      <Divider />
+      <ListItem size="sm">Paste</ListItem>
+      <ListItem size="sm">Paste Shortcut</ListItem>
+      <ListItem size="sm">Undo Copy</ListItem>
+      <Divider />
+      <ListItem size="sm">Properties</ListItem>
+    </List>
+  ))
   .add("render as link", () => (
     <List>
       <ListItem {...actions}>Normal item</ListItem>

diff --git a/src/components/Radio/Radio.js b/src/components/Radio/Radio.js
@@ -98,7 +98,7 @@ const Radio = ({
   onChange,
   label,
   disabled,
-  flat,
+  variant,
   value,
   checked,
   name,
@@ -107,7 +107,7 @@ const Radio = ({
   shadow,
   ...otherProps
 }) => {
-  const Checkmark = flat ? StyledFlatCheckmark : StyledCheckmark;
+  const Checkmark = variant === "flat" ? StyledFlatCheckmark : StyledCheckmark;
 
   return (
     <StyledLabel isDisabled={disabled} className={className} style={style}>
@@ -132,7 +132,7 @@ Radio.defaultProps = {
   value: null,
   label: "",
   disabled: false,
-  flat: false,
+  variant: "default",
   shadow: true
 };
 
@@ -147,8 +147,8 @@ Radio.propTypes = {
   label: propTypes.oneOfType([propTypes.string, propTypes.number]),
   checked: propTypes.bool,
   disabled: propTypes.bool,
-  flat: propTypes.bool,
   shadow: propTypes.bool,
+  variant: propTypes.oneOf(["default", "flat"]),
   style: propTypes.object
 };
 

diff --git a/src/components/Radio/Radio.stories.js b/src/components/Radio/Radio.stories.js
@@ -91,7 +91,7 @@ class FlatRadioGroup extends React.Component {
               }}
             >
               <Radio
-                flat
+                variant="flat"
                 checked={checkedValue === "Pear"}
                 onChange={this.handleChange}
                 value="Pear"
@@ -100,7 +100,7 @@ class FlatRadioGroup extends React.Component {
               />
               <br />
               <Radio
-                flat
+                variant="flat"
                 checked={checkedValue === "Orange"}
                 onChange={this.handleChange}
                 value="Orange"
@@ -109,7 +109,7 @@ class FlatRadioGroup extends React.Component {
               />
               <br />
               <Radio
-                flat
+                variant="flat"
                 checked={checkedValue === "Kiwi"}
                 onChange={this.handleChange}
                 value="Kiwi"
@@ -118,7 +118,7 @@ class FlatRadioGroup extends React.Component {
               />
               <br />
               <Radio
-                flat
+                variant="flat"
                 checked={checkedValue === "Grape"}
                 onChange={this.handleChange}
                 value="Grape"