Add Set component

jxom · Nov 16, 2018 · f25d702 · LukeSilva · Nov 16, 2018 · jxom
1 parent 8b0dd71
commit f25d702
Show file tree

Hide file tree

Showing 24 changed files with 772 additions and 190 deletions.
diff --git a/src/Button/Button.mdx b/src/Button/Button.mdx
@@ -6,15 +6,14 @@ menu: Components
 
 import { Playground, PropsTable } from 'docz';
 import Button from './index';
-import Buttons from './Buttons';
 import { Button as ButtonProps } from './Button';
 import Group from '../Group';
 
-# Buttons
+# Button
 
 ## Import
 
-`import { Button, Buttons } from 'fannypack'`
+`import { Button } from 'fannypack'`
 
 ## Basic Usage
 
@@ -28,63 +27,63 @@ Button, by default, renders a `<button>` element.
 However, you are able to change it to a custom element using the `as` prop. See more [here](https://reakit.io/components/button).
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button>Default</Button>
     <Button as="a" href="#">Anchor</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
 ## Colors
 
 Colors can be added to a button with the `palette` prop.
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button>Default</Button>
     <Button palette="primary">Primary</Button>
     <Button palette="secondary">Secondary</Button>
     <Button palette="success">Success</Button>
     <Button palette="danger">Danger</Button>
     <Button palette="warning">Warning</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
 ## Loading
 
 To indicate a button is loading, use the `isLoading` prop.
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button isLoading>Default</Button>
     <Button palette="primary" isLoading>Primary</Button>
     <Button palette="primary" isLoading type="link">Primary</Button>
     <Button palette="success" isLoading type="outlined">Success</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
 ## Outlines
 
 An outline can be placed on a button by assigning `"outlined"` to the `type` prop.
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button palette="primary" type="outlined">Primary</Button>
     <Button palette="success" type="outlined">Success</Button>
     <Button palette="danger" type="outlined">Danger</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
 ## Sizes
 
 Buttons are available in four different sizes and can be added with a `size` prop.
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button size="small">Small</Button>
     <Button>Default</Button>
     <Button size="medium">Medium</Button>
     <Button size="large">Large</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
 ## Links
@@ -109,24 +108,24 @@ To make a button non-interactable, add the `isStatic` prop.
 To indicate a button as disabled, use the `disabled` prop.
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button disabled>Default</Button>
     <Button palette="primary" disabled>Primary</Button>
     <Button palette="success" disabled>Success</Button>
     <Button palette="danger" disabled>Danger</Button>
     <Button palette="warning" disabled>Warning</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
-## Lists
+## Sets
 
-To display a list of buttons, use the `<Buttons>` component.
+To display a set of buttons, use the [`<Set>` component](/components/set).
 
 <Playground>
-  <Buttons>
+  <Set>
     <Button>Previous</Button>
     <Button>Next</Button>
-  </Buttons>
+  </Set>
 </Playground>
 
 ## Group
@@ -150,10 +149,6 @@ To group a set of buttons together, use the `<Group>` component.
 
 <PropsTable of={ButtonProps} />
 
-## `<Buttons>` Props
-
-<PropsTable of={Buttons} />
-
 ## Theming
 
 ### Schema

diff --git a/src/Button/Buttons.js b/src/Button/Buttons.js
diff --git a/src/Button/__tests__/Button.test.js b/src/Button/__tests__/Button.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import render from '../../_utils/tests/render';
 import Button from '../Button';
-import Buttons from '../Buttons';
+import Set from '../../Set';
 import Group from '../../Group';
 import 'jest-styled-components';
 
@@ -73,11 +73,11 @@ it('renders correctly for a disabled button', () => {
 
 it('renders correctly for a list of buttons', () => {
   const { container } = render(
-    <Buttons>
+    <Set>
       <Button>Test</Button>
       <Button>Test 2</Button>
       <Button>Test 3</Button>
-    </Buttons>
+    </Set>
   );
   expect(container.firstChild).toMatchSnapshot();
 });

diff --git a/src/Button/__tests__/__snapshots__/Button.test.js.snap b/src/Button/__tests__/__snapshots__/Button.test.js.snap
@@ -1101,7 +1101,7 @@ exports[`renders correctly for a list of buttons 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1146,7 +1146,7 @@ exports[`renders correctly for a list of buttons 1`] = `
   display: flex;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1171,57 +1171,53 @@ exports[`renders correctly for a list of buttons 1`] = `
   text-decoration: none;
 }
 
-.c5:focus {
+.c4:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c5[disabled] {
+.c4[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: #efefef;
 }
 
-.c5:hover:active {
+.c4:hover:active {
   background-color: #e3e3e3;
 }
 
 .c2 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-box-pack: start;
   -webkit-justify-content: flex-start;
   -ms-flex-pack: start;
   justify-content: flex-start;
+  margin-left: -0.5rem;
+  margin-top: -0.5rem;
 }
 
-.c2 > .c4:not(:last-child) {
-  margin-right: 0.5rem;
-}
-
-.c2 > .c4 {
-  margin-bottom: 0.5rem;
+.c2 > * {
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
 }
 
 <div
   class="c0 c1"
 >
   <div
     class="c2 c3 c1"
+    spacing="xxsmall"
   >
     <button
-      class="c4 c5 c6"
+      class="c4 c5"
       style="size: default;"
       type="default"
     >
@@ -1230,7 +1226,7 @@ exports[`renders correctly for a list of buttons 1`] = `
       </span>
     </button>
     <button
-      class="c4 c5 c6"
+      class="c4 c5"
       style="size: default;"
       type="default"
     >
@@ -1239,7 +1235,7 @@ exports[`renders correctly for a list of buttons 1`] = `
       </span>
     </button>
     <button
-      class="c4 c5 c6"
+      class="c4 c5"
       style="size: default;"
       type="default"
     >
@@ -1568,7 +1564,7 @@ exports[`renders correctly for grouped buttons 1`] = `
   color: inherit;
 }
 
-.c6 {
+.c5 {
   margin: unset;
   padding: unset;
   border: unset;
@@ -1606,7 +1602,7 @@ exports[`renders correctly for grouped buttons 1`] = `
   outline-offset: 2px;
 }
 
-.c5 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1631,35 +1627,27 @@ exports[`renders correctly for grouped buttons 1`] = `
   text-decoration: none;
 }
 
-.c5:focus {
+.c4:focus {
   outline: unset;
   z-index: 2;
   box-shadow: #7467c0 0px 0px 0px 2px;
 }
 
-.c5[disabled] {
+.c4[disabled] {
   cursor: not-allowed;
   opacity: 0.7;
   outline: unset;
   pointer-events: unset;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: #efefef;
 }
 
-.c5:hover:active {
+.c4:hover:active {
   background-color: #e3e3e3;
 }
 
-.c7 > .c4:not(:last-child) {
-  margin-right: 0.5rem;
-}
-
-.c7 > .c4 {
-  margin-bottom: 0.5rem;
-}
-
 .c3 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1724,7 +1712,7 @@ exports[`renders correctly for grouped buttons 1`] = `
     role="group"
   >
     <button
-      class="c4 c5 c6"
+      class="c4 c5"
       style="size: default;"
       type="default"
     >
@@ -1733,7 +1721,7 @@ exports[`renders correctly for grouped buttons 1`] = `
       </span>
     </button>
     <button
-      class="c4 c5 c6"
+      class="c4 c5"
       style="size: default;"
       type="default"
     >
@@ -1742,7 +1730,7 @@ exports[`renders correctly for grouped buttons 1`] = `
       </span>
     </button>
     <button
-      class="c4 c5 c6"
+      class="c4 c5"
       style="size: default;"
       type="default"
     >

diff --git a/src/Button/index.js b/src/Button/index.js
@@ -1,3 +1,2 @@
 export { default } from './Button';
 export { default as Button } from './Button';
-export { default as Buttons } from './Buttons';
diff --git a/src/Button/styled.js b/src/Button/styled.js
@@ -4,7 +4,6 @@ import { palette, theme } from 'styled-tools';
 import { darken } from 'polished';
 import _Button from 'reakit/Button';
 import styled from 'reakit/styled';
-import { Flex } from '../primitives';
 
 const sizeProperties = {
   small: css`
@@ -163,21 +162,4 @@ const Button = styled(_Button)`
   }
 `;
 
-export const Buttons = styled(Flex)`
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  & > ${Button}:not(:last-child) {
-    margin-right: ${theme('fannypack.layout.spacing.xxsmall')}rem;
-  }
-  & > ${Button} {
-    margin-bottom: ${theme('fannypack.layout.spacing.xxsmall')}rem;
-  }
-
-  & {
-    ${theme('fannypack.Buttons.base')};
-  }
-`;
-
 export default Button;