GroupButton component and docz

2020-05-15 13:35:00 +02:00
1 parent e0aba9fe88
commit bc7de7e528
@@ -0,0 +1,120 @@
+---
+name: ButtonGroup
+menu: Components
+route: components/buttonGroup
+---
+
+import { Playground, Props } from 'docz';
+import Button from '../Button';
+import IconButton from '../IconButton';
+import ButtonGroup from './';
+
+# ButtonGroup
+
+Group Button display buttons together sharing its configurations
+
+## Import
+
+```javascript
+import { ButtonGroup } from '@ohfi/ui';
+```
+
+## Basic button group
+
+<Playground>
+  <div className="flex flex-col items-center">
+    <ButtonGroup color="primary" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+    <ButtonGroup color="primary" variant="contained" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+    <ButtonGroup color="primary" variant="text" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+  </div>
+</Playground>
+
+## Group sizes and colorss
+
+<Playground>
+  <div className="flex flex-col items-center">
+    <ButtonGroup color="default" size="small" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+    <ButtonGroup color="primary" size="medium" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+    <ButtonGroup color="secondary" size="large" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+  </div>
+</Playground>
+
+## Group orientation
+
+<Playground>
+  <div className="flex flex-row justify-center">
+    <ButtonGroup orientation="vertical" color="primary" className="m-2">
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      orientation="vertical"
+      color="primary"
+      variant="contained"
+      className="m-2"
+    >
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+    <ButtonGroup
+      orientation="vertical"
+      color="primary"
+      variant="text"
+      className="m-2"
+    >
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Tree</Button>
+    </ButtonGroup>
+  </div>
+</Playground>
+
+## Split Button
+
+<Playground>
+  <div className="flex flex-col items-center">
+    <ButtonGroup color="primary" className="m-2">
+      <Button>Search</Button>
+      <IconButton className="mr-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+        >
+          <path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z" />
+        </svg>
+      </IconButton>
+    </ButtonGroup>
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={ButtonGroup} />