From 7bf4040aecef40c2b6dfcc8858ff1846d17dafe8 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Mon, 24 Feb 2025 11:57:35 -0800 Subject: [PATCH 1/7] feat(searchbar): add shapes for ionic theme --- .../components/searchbar/searchbar.ionic.scss | 15 +++++++ core/src/components/searchbar/searchbar.tsx | 26 ++++++++++++ .../searchbar/test/shape/index.html | 42 +++++++++++++++++++ 3 files changed, 83 insertions(+) create mode 100644 core/src/components/searchbar/test/shape/index.html diff --git a/core/src/components/searchbar/searchbar.ionic.scss b/core/src/components/searchbar/searchbar.ionic.scss index 0e009634e94..35040d293d9 100644 --- a/core/src/components/searchbar/searchbar.ionic.scss +++ b/core/src/components/searchbar/searchbar.ionic.scss @@ -157,3 +157,18 @@ cursor: default; pointer-events: none; } + +// Searchbar Shapes +// -------------------------------------------------- + +:host(.searchbar-shape-soft) { + --border-radius: #{globals.$ion-border-radius-200}; +} + +:host(.searchbar-shape-round) { + --border-radius: #{globals.$ion-border-radius-400}; +} + +:host(.searchbar-shape-rectangular) { + --border-radius: #{globals.$ion-border-radius-0}; +} diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx index 868cd067049..b862821e3e4 100644 --- a/core/src/components/searchbar/searchbar.tsx +++ b/core/src/components/searchbar/searchbar.tsx @@ -216,6 +216,14 @@ export class Searchbar implements ComponentInterface { */ @Prop({ mutable: true }) value?: string | null = ''; + /** + * Set to `"soft"` for a searchbar with slightly rounded corners, + * `"round"` for a searchbar with fully rounded corners, + * or `"rectangular"` for a searchbar without rounded corners. + * Defaults to `"round"` for the ionic theme, and `undefined` for all other themes. + */ + @Prop() shape?: 'soft' | 'round' | 'rectangular'; + /** * Emitted when the `value` of the `ion-searchbar` element has changed. */ @@ -612,6 +620,22 @@ export class Searchbar implements ComponentInterface { return true; } + private getShape() { + const theme = getIonTheme(this); + const { shape } = this; + + // TODO(ROU-11677): Remove theme check when shapes are defined for all themes. + if (theme !== 'ionic') { + return undefined; + } + + if (shape === undefined) { + return 'round'; + } + + return shape; + } + /** * Get the icon to use for the clear icon. * If an icon is set on the component, use that. @@ -698,6 +722,7 @@ export class Searchbar implements ComponentInterface { const animated = this.animated && config.getBoolean('animated', true); const theme = getIonTheme(this); const shouldShowCancelButton = this.shouldShowCancelButton(); + const shape = this.getShape(); const cancelButton = this.showCancelButton !== 'never' && (