From 28cb4676bc994e41932f41af4dc3e8b427a96aa3 Mon Sep 17 00:00:00 2001 From: Philipp Siekmann Date: Thu, 16 May 2024 13:47:46 +0200 Subject: [PATCH] feat(components): add padding props to SwirlAppBar --- .changeset/brave-schools-clap.md | 7 ++ packages/swirl-components/src/components.d.ts | 6 ++ .../swirl-app-bar/swirl-app-bar.spec.tsx | 6 +- .../swirl-app-bar/swirl-app-bar.tsx | 20 +++++- packages/swirl-components/vscode-data.json | 66 +++++++++++++++++++ 5 files changed, 101 insertions(+), 4 deletions(-) create mode 100644 .changeset/brave-schools-clap.md diff --git a/.changeset/brave-schools-clap.md b/.changeset/brave-schools-clap.md new file mode 100644 index 000000000..806bc3048 --- /dev/null +++ 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 index 64220c2c9..0f6564cbe 100644 --- 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) => void; "onStepDownButtonClick"?: (event: SwirlAppBarCustomEvent) => void; "onStepUpButtonClick"?: (event: SwirlAppBarCustomEvent) => 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 index 8538b2fcb..d7c4e48cf 100644 --- 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(` -
+
@@ -79,7 +79,7 @@ describe("swirl-app-bar", () => { expect(page.root).toEqualHtml(` -
+
@@ -123,7 +123,7 @@ describe("swirl-app-bar", () => { expect(page.root).toEqualHtml(` -
+
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 index af4af9af4..3016f7ce4 100644 --- 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 = ""; @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 ( -
+
{showLeftControls && (
{(this.showBackButton || this.showCloseButton) && ( diff --git a/packages/swirl-components/vscode-data.json b/packages/swirl-components/vscode-data.json index 9747cdc6b..2291afb3d 100644 --- 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": ""