feat(components): add padding props to SwirlAppBar

getflip · May 16, 2024 · 28cb467 · 28cb467
1 parent 273c2dc
commit 28cb467
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 4 deletions.
diff --git a/.changeset/brave-schools-clap.md b/.changeset/brave-schools-clap.md
@@ -0,0 +1,7 @@
+---
+"@getflip/swirl-components": minor
+"@getflip/swirl-components-angular": minor
+"@getflip/swirl-components-react": minor
+---
+
+Add padding props to swirl-app-bar
diff --git a/packages/swirl-components/src/components.d.ts b/packages/swirl-components/src/components.d.ts
@@ -7,6 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { SwirlHeadingLevel } from "./components/swirl-heading/swirl-heading";
 import { SwirlActionListItemIntent, SwirlActionListItemSize } from "./components/swirl-action-list-item/swirl-action-list-item";
+import { SwirlAppBarPadding } from "./components/swirl-app-bar/swirl-app-bar";
 import { SwirlAppLayoutMobileView } from "./components/swirl-app-layout/swirl-app-layout";
 import { SwirlAutocompleteSuggestion, SwirlAutocompleteValue } from "./components/swirl-autocomplete/swirl-autocomplete";
 import { SwirlTextInputMode } from "./components/swirl-text-input/swirl-text-input";
@@ -70,6 +71,7 @@ import { SwirlToolbarOrientation } from "./components/swirl-toolbar/swirl-toolba
 import { SwirlTooltipPosition } from "./components/swirl-tooltip/swirl-tooltip";
 export { SwirlHeadingLevel } from "./components/swirl-heading/swirl-heading";
 export { SwirlActionListItemIntent, SwirlActionListItemSize } from "./components/swirl-action-list-item/swirl-action-list-item";
+export { SwirlAppBarPadding } from "./components/swirl-app-bar/swirl-app-bar";
 export { SwirlAppLayoutMobileView } from "./components/swirl-app-layout/swirl-app-layout";
 export { SwirlAutocompleteSuggestion, SwirlAutocompleteValue } from "./components/swirl-autocomplete/swirl-autocomplete";
 export { SwirlTextInputMode } from "./components/swirl-text-input/swirl-text-input";
@@ -185,6 +187,8 @@ export namespace Components {
         "backButtonLabel"?: string;
         "closeButtonIcon"?: string;
         "closeButtonLabel"?: string;
+        "paddingInlineEnd"?: SwirlAppBarPadding;
+        "paddingInlineStart"?: SwirlAppBarPadding;
         "showBackButton"?: boolean;
         "showCloseButton"?: boolean;
         "showStepperControls"?: boolean;
@@ -5180,6 +5184,8 @@ declare namespace LocalJSX {
         "onCloseButtonClick"?: (event: SwirlAppBarCustomEvent<MouseEvent>) => void;
         "onStepDownButtonClick"?: (event: SwirlAppBarCustomEvent<MouseEvent>) => void;
         "onStepUpButtonClick"?: (event: SwirlAppBarCustomEvent<MouseEvent>) => void;
+        "paddingInlineEnd"?: SwirlAppBarPadding;
+        "paddingInlineStart"?: SwirlAppBarPadding;
         "showBackButton"?: boolean;
         "showCloseButton"?: boolean;
         "showStepperControls"?: boolean;

diff --git a/packages/swirl-components/src/components/swirl-app-bar/swirl-app-bar.spec.tsx b/packages/swirl-components/src/components/swirl-app-bar/swirl-app-bar.spec.tsx
@@ -25,7 +25,7 @@ describe("swirl-app-bar", () => {
     expect(page.root).toEqualHtml(`
       <swirl-app-bar>
         <mock:shadow-root>
-          <div class="app-bar app-bar--has-cta app-bar--has-right-controls">
+          <div class="app-bar app-bar--has-cta app-bar--has-right-controls" style="padding-inline-end: 16; padding-inline-start: 16;">
             <div class="app-bar__cta">
               <slot name="cta"></slot>
             </div>
@@ -79,7 +79,7 @@ describe("swirl-app-bar", () => {
     expect(page.root).toEqualHtml(`
       <swirl-app-bar show-stepper-controls="true">
         <mock:shadow-root>
-          <div class="app-bar">
+          <div class="app-bar" style="padding-inline-end: 16; padding-inline-start: 16;">
             <div class="app-bar__left-controls">
               <div class="app-bar__stepper-controls">
                 <swirl-button hidelabel="" icon="<swirl-icon-arrow-upward></swirl-icon-arrow-upward>" label="Previous item"></swirl-button>
@@ -123,7 +123,7 @@ describe("swirl-app-bar", () => {
     expect(page.root).toEqualHtml(`
       <swirl-app-bar show-close-button="true">
         <mock:shadow-root>
-          <div class="app-bar">
+          <div class="app-bar" style="padding-inline-end: 16; padding-inline-start: 16;">
             <div class="app-bar__left-controls">
               <div class="app-bar__main-navigation-control">
                 <swirl-button hidelabel="" icon="<swirl-icon-close></swirl-icon-close>" label="Close"></swirl-button>

diff --git a/packages/swirl-components/src/components/swirl-app-bar/swirl-app-bar.tsx b/packages/swirl-components/src/components/swirl-app-bar/swirl-app-bar.tsx
@@ -10,6 +10,17 @@ import {
 } from "@stencil/core";
 import classnames from "classnames";
 
+export type SwirlAppBarPadding =
+  | "0"
+  | "2"
+  | "4"
+  | "8"
+  | "12"
+  | "16"
+  | "20"
+  | "24"
+  | "32";
+
 /**
  * @slot heading - The app bar's heading element
  * @slot center-controls - Container for controls displayed in the center
@@ -27,6 +38,8 @@ export class SwirlAppBar {
   @Prop() backButtonLabel?: string = "Go back";
   @Prop() closeButtonIcon?: string = "<swirl-icon-close></swirl-icon-close>";
   @Prop() closeButtonLabel?: string = "Close";
+  @Prop() paddingInlineEnd?: SwirlAppBarPadding = "16";
+  @Prop() paddingInlineStart?: SwirlAppBarPadding = "16";
   @Prop() stepUpButtonLabel?: string = "Previous item";
   @Prop() stepDownButtonLabel?: string = "Next item";
   @Prop() showBackButton?: boolean;
@@ -91,9 +104,14 @@ export class SwirlAppBar {
       "app-bar--has-right-controls": hasRightControls,
     });
 
+    const styles = {
+      paddingInlineEnd: this.paddingInlineEnd,
+      paddingInlineStart: this.paddingInlineStart,
+    };
+
     return (
       <Host>
-        <div class={className}>
+        <div class={className} style={styles}>
           {showLeftControls && (
             <div class="app-bar__left-controls">
               {(this.showBackButton || this.showCloseButton) && (

diff --git a/packages/swirl-components/vscode-data.json b/packages/swirl-components/vscode-data.json
@@ -155,6 +155,72 @@
           "name": "close-button-label",
           "description": ""
         },
+        {
+          "name": "padding-inline-end",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
+        {
+          "name": "padding-inline-start",
+          "description": "",
+          "values": [
+            {
+              "name": "0"
+            },
+            {
+              "name": "12"
+            },
+            {
+              "name": "16"
+            },
+            {
+              "name": "2"
+            },
+            {
+              "name": "20"
+            },
+            {
+              "name": "24"
+            },
+            {
+              "name": "32"
+            },
+            {
+              "name": "4"
+            },
+            {
+              "name": "8"
+            }
+          ]
+        },
         {
           "name": "show-back-button",
           "description": ""