From d2bb3e407cb2668b5f873779297529a98eaa3dd1 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Fri, 20 Oct 2023 10:51:59 -0500 Subject: [PATCH 01/37] update slotMutationController to allow multiple slot names --- core/src/utils/slot-mutation-controller.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/core/src/utils/slot-mutation-controller.ts b/core/src/utils/slot-mutation-controller.ts index 663b781a367..3827c28f9fa 100644 --- a/core/src/utils/slot-mutation-controller.ts +++ b/core/src/utils/slot-mutation-controller.ts @@ -6,18 +6,20 @@ import { raf } from '@utils/helpers'; * This is not needed for components using native slots in the Shadow DOM. * @internal * @param el The host element to observe - * @param slotName mutationCallback will fire when nodes on this slot change + * @param slotName mutationCallback will fire when nodes on these slot(s) change * @param mutationCallback The callback to fire whenever the slotted content changes */ export const createSlotMutationController = ( el: HTMLElement, - slotName: string, + slotName: string | string[], mutationCallback: () => void ): SlotMutationController => { let hostMutationObserver: MutationObserver | undefined; let slottedContentMutationObserver: MutationObserver | undefined; if (win !== undefined && 'MutationObserver' in win) { + const slots = Array.isArray(slotName) ? slotName : [slotName]; + hostMutationObserver = new MutationObserver((entries) => { for (const entry of entries) { for (const node of entry.addedNodes) { @@ -25,7 +27,7 @@ export const createSlotMutationController = ( * Check to see if the added node * is our slotted content. */ - if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).slot === slotName) { + if (node.nodeType === Node.ELEMENT_NODE && slots.includes((node as HTMLElement).slot)) { /** * If so, we want to watch the slotted * content itself for changes. This lets us From 1921f8a45ae335311e254a2eb9974b70cf3a3937 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 16 Nov 2023 09:25:41 -0600 Subject: [PATCH 02/37] add slots to a11y test markup --- core/src/components/select/test/a11y/index.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/core/src/components/select/test/a11y/index.html b/core/src/components/select/test/a11y/index.html index cd859593888..a0d2a3c9124 100644 --- a/core/src/components/select/test/a11y/index.html +++ b/core/src/components/select/test/a11y/index.html @@ -41,6 +41,18 @@

Select - a11y

Oranges + + + + + Apples + Bananas + Oranges + + + + + Apples From c4eba4620bee1cb28eab87e37dba7d9f9434ea32 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 16 Nov 2023 10:51:06 -0600 Subject: [PATCH 03/37] add test markup --- .../components/select/test/slot/index.html | 172 ++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 core/src/components/select/test/slot/index.html diff --git a/core/src/components/select/test/slot/index.html b/core/src/components/select/test/slot/index.html new file mode 100644 index 00000000000..440e5c97cfa --- /dev/null +++ b/core/src/components/select/test/slot/index.html @@ -0,0 +1,172 @@ + + + + + + Select - Slots + + + + + + + + + + + + + + Select - Slots + + + + +
+
+

No Fill / Start Label / Justify Start

+ + + Pepperoni + Supreme + Chicken + + + + +
+ +
+

Solid / Start Label / Justify Start

+ + + Pepperoni + Supreme + Chicken + + + + +
+ +
+

Outline / Start Label / Justify Start

+ + + Pepperoni + Supreme + Chicken + + + + +
+ +
+

No Fill / Start Label / Justify End

+ + + Pepperoni + Supreme + Chicken + + + + +
+ +
+

Solid / Start Label / Justify End

+ + + Pepperoni + Supreme + Chicken + + + + +
+ +
+

Outline / Start Label / Justify End

+ + + Pepperoni + Supreme + Chicken + + + + +
+ +
+

No Fill / Floating Label

+ + + Pepperoni + Supreme + Chicken + + + + +
+ +
+

Solid / Floating Label

+ + + Pepperoni + Supreme + Chicken + + + + +
+ +
+

Outline / Floating Label

+ + + Pepperoni + Supreme + Chicken + + + + +
+
+ + + + + \ No newline at end of file From 527fc70b3bd264799147595c255705c855769616 Mon Sep 17 00:00:00 2001 From: amandaesmith3 Date: Thu, 16 Nov 2023 10:51:15 -0600 Subject: [PATCH 04/37] condense label floating behavior into one class --- .../components/select/select.md.outline.scss | 10 ++----- .../components/select/select.md.solid.scss | 5 +--- core/src/components/select/select.scss | 5 +--- core/src/components/select/select.tsx | 26 ++++++++++++++++++- 4 files changed, 29 insertions(+), 17 deletions(-) diff --git a/core/src/components/select/select.md.outline.scss b/core/src/components/select/select.md.outline.scss index 705448e1a01..d22c4106c22 100644 --- a/core/src/components/select/select.md.outline.scss +++ b/core/src/components/select/select.md.outline.scss @@ -102,10 +102,7 @@ /** * This makes the label sit above the select. */ -:host(.select-expanded.select-fill-outline.select-label-placement-floating) .label-text-wrapper, -:host(.ion-focused.select-fill-outline.select-label-placement-floating) .label-text-wrapper, -:host(.has-value.select-fill-outline.select-label-placement-floating) .label-text-wrapper, -:host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper { +:host(.label-floating.select-fill-outline) .label-text-wrapper { @include transform(translateY(-32%), scale(#{$form-control-label-stacked-scale})); @include margin(0); @@ -252,9 +249,6 @@ * the floating/stacked label. We simulate this "cut out" * by removing the top border from the notch fragment. */ -:host(.select-expanded.select-fill-outline.select-label-placement-floating) .select-outline-notch, -:host(.ion-focused.select-fill-outline.select-label-placement-floating) .select-outline-notch, -:host(.has-value.select-fill-outline.select-label-placement-floating) .select-outline-notch, -:host(.select-fill-outline.select-label-placement-stacked) .select-outline-notch { +:host(.label-floating.select-fill-outline) .select-outline-notch { border-top: none; } diff --git a/core/src/components/select/select.md.solid.scss b/core/src/components/select/select.md.solid.scss index 0475b30be4c..7d48ddb10be 100644 --- a/core/src/components/select/select.md.solid.scss +++ b/core/src/components/select/select.md.solid.scss @@ -68,10 +68,7 @@ // Select Label // ---------------------------------------------------------------- -:host(.select-fill-solid.select-label-placement-stacked) .label-text-wrapper, -:host(.select-expanded.select-fill-solid.select-label-placement-floating) .label-text-wrapper, -:host(.ion-focused.select-fill-solid.select-label-placement-floating) .label-text-wrapper, -:host(.has-value.select-fill-solid.select-label-placement-floating) .label-text-wrapper { +:host(.label-floating.select-fill-solid) .label-text-wrapper { /** * Label text should not extend * beyond the bounds of the select. diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index 020dd51231e..370cb9baec7 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -533,10 +533,7 @@ button { /** * This makes the label sit above the input. */ -:host(.select-label-placement-stacked) .label-text-wrapper, -:host(.select-expanded.select-label-placement-floating) .label-text-wrapper, -:host(.ion-focused.select-label-placement-floating) .label-text-wrapper, -:host(.has-value.select-label-placement-floating) .label-text-wrapper { +:host(.label-floating) .label-text-wrapper { @include transform(translateY(50%), scale(#{$form-control-label-stacked-scale})); /** diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 6eaeb551486..8f1abccae08 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -864,8 +864,31 @@ export class Select implements ComponentInterface { const inItem = hostContext('ion-item', this.el); const shouldRenderHighlight = mode === 'md' && fill !== 'outline' && !inItem; + const hasValue = this.hasValue(); + const hasStartEndSlots = el.querySelector('[slot="start"], [slot="end"]') !== null; + renderHiddenInput(true, el, name, parseValue(value), disabled); + /** + * If the label is stacked, it should always sit above the select. + * For floating labels, the label should move above the select if + * the select has a value, is open, or has anything in either + * the start or end slot. + * + * If there is content in the start slot, the label would overlap + * it if not forced to float. This is also applied to the end slot + * because with the default or solid fills, the select is not + * vertically centered in the container, but the label is. This + * causes the slots and label to appear vertically offset from each + * other when the label isn't floating above the input. This doesn't + * apply to the outline fill, but this was not accounted for to keep + * things consistent. + * + * TODO(FW-5592): Remove hasStartEndSlots condition + */ + const labelShouldFloat = + labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots)); + return ( Date: Thu, 16 Nov 2023 10:54:26 -0600 Subject: [PATCH 05/37] add slots --- core/src/components/select/select.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 8f1abccae08..69c61f3de8a 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -33,7 +33,9 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from ' * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use. * * @slot label - The label text to associate with the select. Use the `labelPlacement` property to control where the label is placed relative to the select. Use this if you need to render a label with custom HTML. - * + * @slot start - Content to display at the leading edge of the select. + * @slot end - Content to display at the trailing edge of the select. + * * @part placeholder - The text displayed in the select when there is no value. * @part text - The displayed value of the select. * @part icon - The select icon container. @@ -912,10 +914,14 @@ export class Select implements ComponentInterface { >