refactor(select): set the default justify-content as a style (#29804)

- Remove the default property value in favor of setting the default style in the CSS to match the other form controls.
- Updates the e2e test for `label` to remove the explicit width & add more examples with long labels and a default select without justify set.

Author: brandyscarney

core/api.txt

@@ -1615,7 +1615,7 @@ ion-select,prop,expandedIcon,string | undefined,undefined,false,false
 ion-select,prop,fill,"outline" | "solid" | undefined,undefined,false,false
 ion-select,prop,interface,"action-sheet" | "alert" | "popover",'alert',false,false
 ion-select,prop,interfaceOptions,any,{},false,false
-ion-select,prop,justify,"end" | "space-between" | "start",'space-between',false,false
+ion-select,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
 ion-select,prop,label,string | undefined,undefined,false,false
 ion-select,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start" | undefined,'start',false,false
 ion-select,prop,mode,"ios" | "md",undefined,false,false

core/src/components.d.ts

@@ -2748,7 +2748,7 @@ export namespace Components {
         /**
           * How to pack the label and select within a line. `justify` does not apply when the label and select are on different lines when `labelPlacement` is set to `"floating"` or `"stacked"`. `"start"`: The label and select will appear on the left in LTR and on the right in RTL. `"end"`: The label and select will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and select will appear on opposite ends of the line with space between the two elements.
          */
-        "justify": 'start' | 'end' | 'space-between';
+        "justify"?: 'start' | 'end' | 'space-between';
         /**
           * The visible label associated with the select.  Use this if you need to render a plaintext label.  The `label` property will take priority over the `label` slot if both are used.
          */

core/src/components/select/select.scss

@@ -203,6 +203,7 @@ button {
   flex-grow: 1;
 
   align-items: center;
+  justify-content: space-between;
 
   height: inherit;
 

core/src/components/select/select.tsx

@@ -125,7 +125,7 @@ export class Select implements ComponentInterface {
    * `"space-between"`: The label and select will appear on opposite
    * ends of the line with space between the two elements.
    */
-  @Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
+  @Prop() justify?: 'start' | 'end' | 'space-between';
 
   /**
    * The visible label associated with the select.
@@ -942,7 +942,7 @@ export class Select implements ComponentInterface {
       this;
     const mode = getIonMode(this);
     const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
-    const justifyEnabled = !hasFloatingOrStackedLabel;
+    const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined;
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
     const inItem = hostContext('ion-item', this.el);
     const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem;

core/src/components/select/test/label/select.e2e.ts

@@ -2,21 +2,44 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * By default ion-select only takes up
- * as much space as it needs. Justification is
- * used for when the select takes up the full
- * line (such as in an ion-item). As a result,
- * we set the width of the select so we can
- * see the justification results.
+ * By default ion-select takes up the full width
+ * of its container. The justify property can be
+ * used to change the alignment of the select
+ * within the container.
  */
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('select: label'), () => {
+    test.describe('select: default placement', () => {
+      test('should render a space between justification with a default select', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-select label="Label" placeholder="Select an Item"></ion-select>
+         `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+        await expect(select).toHaveScreenshot(screenshot(`select-label-default`));
+      });
+
+      test('should truncate long labels with ellipses', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-select label="Long Label Long Label Long Label Long Label Long Label Long Label" placeholder="Select an Item"></ion-select>
+         `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+        await expect(select).toHaveScreenshot(screenshot(`select-label-long-label`));
+      });
+    });
+
     test.describe('select: start placement', () => {
       test('should render a start justification with label in the start position', async ({ page }) => {
         await page.setContent(
           `
-
-           <ion-select label="Label" placeholder="Select an Item" label-placement="start" justify="start" style="width: 200px"></ion-select>
+           <ion-select label="Label" placeholder="Select an Item" label-placement="start" justify="start"></ion-select>
          `,
           config
         );
@@ -27,8 +50,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render an end justification with label in the start position', async ({ page }) => {
         await page.setContent(
           `
-
-           <ion-select label="Label" placeholder="Select an Item" label-placement="start" justify="end" style="width: 200px"></ion-select>
+           <ion-select label="Label" placeholder="Select an Item" label-placement="start" justify="end"></ion-select>
          `,
           config
         );
@@ -39,23 +61,33 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a space between justification with label in the start position', async ({ page }) => {
         await page.setContent(
           `
-
-           <ion-select label="Label" placeholder="Select an Item" label-placement="start" justify="space-between" style="width: 200px"></ion-select>
+           <ion-select label="Label" placeholder="Select an Item" label-placement="start" justify="space-between"></ion-select>
          `,
           config
         );
 
         const select = page.locator('ion-select');
         await expect(select).toHaveScreenshot(screenshot(`select-label-start-justify-space-between`));
       });
+
+      test('should truncate long labels with ellipses', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-select label="Long Label Long Label Long Label Long Label Long Label Long Label" placeholder="Select an Item" label-placement="start" justify="start"></ion-select>
+         `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+        await expect(select).toHaveScreenshot(screenshot(`select-label-start-justify-start-long-label`));
+      });
     });
 
     test.describe('select: end placement', () => {
       test('should render a start justification with label in the end position', async ({ page }) => {
         await page.setContent(
           `
-
-           <ion-select label="Label" placeholder="Select an Item" label-placement="end" justify="start" style="width: 200px"></ion-select>
+           <ion-select label="Label" placeholder="Select an Item" label-placement="end" justify="start"></ion-select>
          `,
           config
         );
@@ -66,8 +98,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render an end justification with label in the end position', async ({ page }) => {
         await page.setContent(
           `
-
-           <ion-select label="Label" placeholder="Select an Item" label-placement="end" justify="end" style="width: 200px"></ion-select>
+           <ion-select label="Label" placeholder="Select an Item" label-placement="end" justify="end"></ion-select>
          `,
           config
         );
@@ -78,8 +109,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a space between justification with label in the end position', async ({ page }) => {
         await page.setContent(
           `
-
-           <ion-select label="Label" placeholder="Select an Item" label-placement="end" justify="space-between" style="width: 200px"></ion-select>
+           <ion-select label="Label" placeholder="Select an Item" label-placement="end" justify="space-between"></ion-select>
          `,
           config
         );
@@ -93,8 +123,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a start justification with label in the fixed position', async ({ page }) => {
         await page.setContent(
           `
-
-           <ion-select label="Label" placeholder="Select an Item" label-placement="fixed" justify="start" style="width: 200px"></ion-select>
+           <ion-select label="Label" placeholder="Select an Item" label-placement="fixed" justify="start"></ion-select>
          `,
           config
         );
@@ -105,8 +134,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render an end justification with label in the fixed position', async ({ page }) => {
         await page.setContent(
           `
-
-           <ion-select label="Label" placeholder="Select an Item" label-placement="fixed" justify="end" style="width: 200px"></ion-select>
+           <ion-select label="Label" placeholder="Select an Item" label-placement="fixed" justify="end"></ion-select>
          `,
           config
         );
@@ -117,8 +145,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a space between justification with label in the fixed position', async ({ page }) => {
         await page.setContent(
           `
-
-           <ion-select label="Label" placeholder="Select an Item" label-placement="fixed" justify="space-between" style="width: 200px"></ion-select>
+           <ion-select label="Label" placeholder="Select an Item" label-placement="fixed" justify="space-between"></ion-select>
          `,
           config
         );