feat(select): add shapes for ionic theme

ionic-team · Nov 13, 2024 · f8a45bc · f8a45bc
1 parent a1f3fcc
commit f8a45bc
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Select - Shape</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      h2 {
+        font-size: 12px;
+        font-weight: normal;
+
+        color: #6f7378;
+
+        margin-top: 10px;
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Select - Shape</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Default</h2>
+            <ion-select shape="round" fill="outline" label="Label" label-placement="stacked" value="filledText">
+              <ion-select-option value="filledText">Filled text</ion-select-option>
+            </ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Soft</h2>
+            <ion-select shape="soft" fill="outline" label="Label" label-placement="stacked" value="filledText">
+              <ion-select-option value="filledText">Filled text</ion-select-option>
+            </ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Round</h2>
+            <ion-select shape="round" fill="outline" label="Label" label-placement="stacked" value="filledText">
+              <ion-select-option value="filledText">Filled text</ion-select-option>
+            </ion-select>
+          </div>
+
+          <div class="grid-item">
+            <h2>Rectangular</h2>
+            <ion-select shape="rectangular" fill="outline" label="Label" label-placement="stacked" value="filledText">
+              <ion-select-option value="filledText">Filled text</ion-select-option>
+            </ion-select>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>