From f8a45bce8415ae275340b3347ce6c1f4735f2874 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 13 Nov 2024 11:14:45 -0800 Subject: [PATCH] feat(select): add shapes for ionic theme --- core/api.txt | 2 +- core/src/components.d.ts | 8 +-- core/src/components/select/select.ionic.scss | 27 +++++++- core/src/components/select/select.tsx | 24 +++++-- .../components/select/test/shape/index.html | 69 +++++++++++++++++++ 5 files changed, 119 insertions(+), 11 deletions(-) create mode 100644 core/src/components/select/test/shape/index.html diff --git a/core/api.txt b/core/api.txt index e035f35494c..48aab763bea 100644 --- a/core/api.txt +++ b/core/api.txt @@ -2064,7 +2064,7 @@ ion-select,prop,name,string,this.inputId,false,false ion-select,prop,okText,string,'OK',false,false ion-select,prop,placeholder,string | undefined,undefined,false,false ion-select,prop,selectedText,null | string | undefined,undefined,false,false -ion-select,prop,shape,"round" | undefined,undefined,false,false +ion-select,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false ion-select,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-select,prop,toggleIcon,string | undefined,undefined,false,false ion-select,prop,value,any,undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 8d3c764b41e..63eab17e530 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3280,9 +3280,9 @@ export namespace Components { */ "selectedText"?: string | null; /** - * The shape of the select. If "round" it will have an increased border radius. + * Set to `"soft"` for a select with slightly rounded corners, `"round"` for a select with fully rounded corners, or `"rectangular"` for a select without rounded corners. Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes. */ - "shape"?: 'round'; + "shape"?: 'soft' | 'round' | 'rectangular'; /** * The theme determines the visual appearance of the component. */ @@ -8704,9 +8704,9 @@ declare namespace LocalJSX { */ "selectedText"?: string | null; /** - * The shape of the select. If "round" it will have an increased border radius. + * Set to `"soft"` for a select with slightly rounded corners, `"round"` for a select with fully rounded corners, or `"rectangular"` for a select without rounded corners. Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes. */ - "shape"?: 'round'; + "shape"?: 'soft' | 'round' | 'rectangular'; /** * The theme determines the visual appearance of the component. */ diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss index 5a7a17f488e..49607376ab0 100644 --- a/core/src/components/select/select.ionic.scss +++ b/core/src/components/select/select.ionic.scss @@ -10,7 +10,6 @@ // TODO(ROU-10778, ROU-10875): Sync the color names to the design system of // ios and md. This will allow us to have a single color map. --border-color: #{globals.current-color(neutral)}; - --border-radius: #{globals.$ion-border-radius-400}; --border-width: #{globals.$ion-border-size-025}; --padding-start: #{globals.$ion-space-400}; --padding-end: #{globals.$ion-space-400}; @@ -170,7 +169,7 @@ // ---------------------------------------------------------------- // Disabled -// ---------------------------------------------------------------- +// --------------------------------------------- :host(.select-disabled) { --background: #{globals.$ion-primitives-neutral-100}; @@ -183,3 +182,27 @@ :host(.select-disabled) .select-icon { color: globals.$ion-primitives-neutral-500; } + +// Shapes +// ---------------------------------------------------------------- + +// Soft +// --------------------------------------------- + +:host(.select-shape-soft) { + --border-radius: #{globals.$ion-border-radius-200}; +} + +// Round +// --------------------------------------------- + +:host(.select-shape-round) { + --border-radius: #{globals.$ion-border-radius-400}; +} + +// Rectangular +// --------------------------------------------- + +:host(.select-shape-rectangular) { + --border-radius: #{globals.$ion-border-radius-0}; +} diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 3efd9c8acb3..209f65f70a4 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -191,9 +191,13 @@ export class Select implements ComponentInterface { @Prop() expandedIcon?: string; /** - * The shape of the select. If "round" it will have an increased border radius. + * Set to `"soft"` for a select with slightly rounded corners, + * `"round"` for a select with fully rounded corners, + * or `"rectangular"` for a select without rounded corners. + * + * Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes. */ - @Prop() shape?: 'round'; + @Prop() shape?: 'soft' | 'round' | 'rectangular'; /** * The value of the select. @@ -990,6 +994,18 @@ export class Select implements ComponentInterface { ); } + private getShape(): string | undefined { + const theme = getIonTheme(this); + const { shape } = this; + + // TODO(ROU-11366): Remove theme check when shapes are defined for all themes. + if (theme === 'ionic' && shape === undefined) { + return 'round'; + } + + return shape; + } + /** * Get the icon to use for the expand icon. * If an icon is set on the component, use that. @@ -1046,9 +1062,9 @@ export class Select implements ComponentInterface { } render() { - const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } = - this; + const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, name, value } = this; const theme = getIonTheme(this); + const shape = this.getShape(); const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked'; const shouldRenderOuterIcon = theme !== 'ionic' && hasFloatingOrStackedLabel; const shouldRenderInnerIcon = theme === 'ionic' || !hasFloatingOrStackedLabel; diff --git a/core/src/components/select/test/shape/index.html b/core/src/components/select/test/shape/index.html new file mode 100644 index 00000000000..a7d9e8f1b35 --- /dev/null +++ b/core/src/components/select/test/shape/index.html @@ -0,0 +1,69 @@ + + + + + Select - Shape + + + + + + + + + + + + + + + Select - Shape + + + + +
+
+

Default

+ + Filled text + +
+ +
+

Soft

+ + Filled text + +
+ +
+

Round

+ + Filled text + +
+ +
+

Rectangular

+ + Filled text + +
+
+ + + +