feat(commandbar): add option for gutter

Author: logonoff

workspaces/core/scss/components/_command-bar.scss

@@ -10,3 +10,8 @@
   align-items: center;
   color: var(--#{$shale}text-colour);
 }
+
+.#{$shale}command-bar--gutter {
+  padding-inline: var(--#{$shale}font-2);
+  padding-block: var(--#{$shale}font--1);
+}

workspaces/react/reports/react.api.md

@@ -17,6 +17,7 @@ export interface BaseButtonProps {
 // @alpha (undocumented)
 export interface BaseCommandBarProps {
     flexGrow?: boolean;
+    gutter?: boolean;
 }
 
 // @alpha (undocumented)
@@ -61,7 +62,7 @@ export interface CardProps {
 export const Code: PolymorphicComponent<"code">;
 
 // @alpha
-export const CommandBar: PolymorphicComponent<"div", BaseCommandBarProps>;
+export const CommandBar: PolymorphicComponent<typeof FlexContainer, BaseCommandBarProps>;
 
 // @alpha (undocumented)
 export type ComponentProp<C extends ElementType> = {

workspaces/react/src/components/CommandBar.tsx

@@ -1,10 +1,13 @@
 import type { PolymorphicComponent } from "../types/helpers";
 import { css } from "../utils/css";
+import { FlexContainer } from "./Container";
 
 /** @alpha */
 export interface BaseCommandBarProps {
   /** Whether to make the command bar grow to fill available space */
   flexGrow?: boolean;
+  /** Whether to add padding around the command bar */
+  gutter?: boolean;
 }
 
 /**
@@ -22,16 +25,16 @@ export interface BaseCommandBarProps {
  *
  * @alpha
  */
-export const CommandBar: PolymorphicComponent<"div", BaseCommandBarProps> = ({
-  Component = "div",
-  flexGrow,
-  ...props
-}) => (
+export const CommandBar: PolymorphicComponent<
+  typeof FlexContainer,
+  BaseCommandBarProps
+> = ({ Component = FlexContainer, flexGrow, gutter, ...props }) => (
   <Component
     {...props}
     className={css(
       "shale-v1-command-bar",
       { "shale-v1-flex-grow": flexGrow },
+      { "shale-v1-command-bar--gutter": gutter },
       props?.className,
     )}
   />