Add justify prop to toolbar

sippy-platform · Jul 20, 2022 · 066a821 · 066a821
1 parent d8b3b6f
commit 066a821
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/src/components/Toolbar/Toolbar.tsx b/src/components/Toolbar/Toolbar.tsx
@@ -7,6 +7,10 @@ export interface ToolbarProps {
    * Custom classes for the label
    */
   className?: string;
+  /**
+   * Custom classes for the label
+   */
+  justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
   /**
    * Button contents.
    */
@@ -19,12 +23,16 @@ export interface ToolbarProps {
 export function Toolbar({
   children,
   className,
+  justify = 'start',
   ...props
 }: ToolbarProps) {
   return (
     <div
       className={clsx(
         'toolbar',
+        {
+          [`justify-content-${justify}`]: justify !== 'start'
+        },
         className
       )}
       role="toolbar"

diff --git a/src/docs/pages/Components/DialogDemo.tsx b/src/docs/pages/Components/DialogDemo.tsx
@@ -7,6 +7,7 @@ import {
   CloseButton,
   Dialog,
   DialogBody,
+  DialogFooter,
   DialogHeader,
 } from "@components";
 
@@ -29,6 +30,9 @@ export default function GridDemo() {
                 data will be permanently removed. This action cannot be undone.
               </p>
             </DialogBody>
+            <DialogFooter>
+              <Button onClick={() => setOpen(false)}>Dismiss</Button>
+            </DialogFooter>
           </Dialog>
         </div>
       </DemoBox>

diff --git a/src/docs/pages/Components/ToolbarDemo.tsx b/src/docs/pages/Components/ToolbarDemo.tsx
@@ -58,6 +58,22 @@ export default function ToolbarDemo() {
           <Button>Search</Button>
         </Toolbar>
       </DemoBox>
+      <h3>Positioning</h3>
+      <p>You can justify the content in a toolbar with the <code>justify</code> prop. This is practically a shorthand for the various <code>justify-content-*</code> classes.</p>
+      <DemoBox>
+        <Toolbar justify="center">
+          <ButtonGroup>
+            <Button>Button</Button>
+            <Button>Groups</Button>
+            <Button>In</Button>
+          </ButtonGroup>
+          <ButtonGroup>
+            <Button>A</Button>
+            <Button>Toolbar</Button>
+          </ButtonGroup>
+          <Button color="red" variant="hover">Single</Button>
+        </Toolbar>
+      </DemoBox>
     </>
   );
 }