diff --git a/core/api.txt b/core/api.txt index b70c7e2f0c..3248784030 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1886,6 +1886,7 @@ ion-searchbar,prop,mode,"ios" | "md",undefined,false,false ion-searchbar,prop,name,string,this.inputId,false,false ion-searchbar,prop,placeholder,string,'Search',false,false ion-searchbar,prop,searchIcon,string | undefined,undefined,false,false +ion-searchbar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false ion-searchbar,prop,showCancelButton,"always" | "focus" | "never",'never',false,false ion-searchbar,prop,showClearButton,"always" | "focus" | "never",'always',false,false ion-searchbar,prop,spellcheck,boolean,false,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index fa663fea9f..d1e2462378 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3107,6 +3107,10 @@ export namespace Components { * Sets focus on the native `input` in `ion-searchbar`. Use this method instead of the global `input.focus()`. Developers who wish to focus an input when a page enters should call `setFocus()` in the `ionViewDidEnter()` lifecycle method. Developers who wish to focus an input when an overlay is presented should call `setFocus` after `didPresent` has resolved. See [managing focus](/docs/developing/managing-focus) for more information. */ "setFocus": () => Promise; + /** + * 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. + */ + "shape"?: 'soft' | 'round' | 'rectangular'; /** * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. */ @@ -8514,6 +8518,10 @@ declare namespace LocalJSX { * The icon to use as the search icon. Defaults to `"search-outline"` in the `"ios"` theme and `"search-sharp"` in the `"md"` and `"ionic"` themes. */ "searchIcon"?: string; + /** + * 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. + */ + "shape"?: 'soft' | 'round' | 'rectangular'; /** * Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. */ diff --git a/core/src/components/searchbar/searchbar.ionic.scss b/core/src/components/searchbar/searchbar.ionic.scss index 0e009634e9..35040d293d 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 868cd06704..352a534a16 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' && (