Skip to content

refactor(select): remove legacy property and styling #29019#29025

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
brandyscarney merged 4 commits into from
Feb 13, 2024
Merged

refactor(select): remove legacy property and styling #29019 #29025

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
53d574a
refactor(select): remove legacy property and styles
brandyscarney Feb 12, 2024
e63d89d
docs(breaking): add legacy removal for select to breaking changes
brandyscarney Feb 12, 2024
3eacb1d
Merge branch 'FW-3194' into FW-3194-legacy-removal
brandyscarney Feb 12, 2024
ee9ab39
revert test change
brandyscarney Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions BREAKING.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -24,6 +24,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Nav](#version-8x-nav)
- [Picker](#version-8x-picker)
- [Progress bar](#version-8x-progress-bar)
- [Select](#version-8x-select)
- [Textarea](#version-8x-textarea)

<h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>
Expand DownExpand Up@@ -176,6 +177,10 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc

For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming).

<h4 id="version-8x-select">Select</h4>

- The `legacy` property and support for the legacy syntax, which involved placing an `ion-select` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy select syntax, refer to the [Select documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).

<h4 id="version-8x-textarea">Textarea</h4>

- The `legacy` property and support for the legacy syntax, which involved placing an `ion-textarea` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy textarea syntax, refer to the [Textarea documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax).
1 change: 0 additions & 1 deletion core/api.txt
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1275,7 +1275,6 @@ ion-select,prop,interfaceOptions,any,{},false,false
ion-select,prop,justify,"end" | "space-between" | "start",'space-between',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,legacy,boolean | undefined,undefined,false,false
ion-select,prop,mode,"ios" | "md",undefined,false,false
ion-select,prop,multiple,boolean,false,false,false
ion-select,prop,name,string,this.inputId,false,false
Expand Down
8 changes: 0 additions & 8 deletions core/src/components.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2739,10 +2739,6 @@ export namespace Components {
* Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
*/
"labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
/**
* Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
*/
"legacy"?: boolean;
/**
* The mode determines which platform styles to use.
*/
Expand DownExpand Up@@ -7498,10 +7494,6 @@ declare namespace LocalJSX {
* Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
*/
"labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
/**
* Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
*/
"legacy"?: boolean;
/**
* The mode determines which platform styles to use.
*/
Expand Down
9 changes: 0 additions & 9 deletions core/src/components/item/item.ios.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -213,18 +213,9 @@
--min-height: 68px;
}

:host(.item-label-stacked) ::slotted(ion-select.legacy-select),
:host(.item-label-floating) ::slotted(ion-select.legacy-select) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0px;
}


// iOS Fixed Labels
// --------------------------------------------------

:host(.item-label-fixed) ::slotted(ion-select.legacy-select),
:host(.item-label-fixed) ::slotted(ion-datetime) {
--padding-start: 0;
}
8 changes: 0 additions & 8 deletions core/src/components/item/item.md.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -319,7 +319,6 @@
// Material Design Fixed Labels
// --------------------------------------------------

:host(.item-label-fixed) ::slotted(ion-select.legacy-select),
:host(.item-label-fixed) ::slotted(ion-datetime) {
--padding-start: 8px;
}
Expand DownExpand Up@@ -365,13 +364,6 @@
--min-height: 55px;
}

:host(.item-label-stacked) ::slotted(ion-select.legacy-select),
:host(.item-label-floating) ::slotted(ion-select.legacy-select) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0;
}

:host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),
:host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),
:host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),
Expand Down
26 changes: 1 addition & 25 deletions core/src/components/item/item.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -535,29 +535,6 @@ button, a {
display: block;
}

// Item Select
// --------------------------------------------------

:host(:not(.item-label)) ::slotted(ion-select.legacy-select) {
--padding-start: 0;

max-width: none;
}

:host(.item-label-stacked) ::slotted(ion-select.legacy-select),
:host(.item-label-floating) ::slotted(ion-select.legacy-select) {
--padding-top: 8px;
--padding-bottom: 8px;
--padding-start: 0;

align-self: stretch;

width: 100%;

max-width: 100%;
}


// Item Datetime
// --------------------------------------------------

Expand All@@ -580,8 +557,7 @@ button, a {

:host(.item-multiple-inputs) ::slotted(ion-checkbox),
:host(.item-multiple-inputs) ::slotted(ion-datetime),
:host(.item-multiple-inputs) ::slotted(ion-radio),
:host(.item-multiple-inputs) ::slotted(ion-select.legacy-select) {
:host(.item-multiple-inputs) ::slotted(ion-radio) {
position: relative;
}

Expand Down
8 changes: 0 additions & 8 deletions core/src/components/select/select.ios.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,14 +4,6 @@
// iOS Select
// --------------------------------------------------

// TODO FW-3194 - Remove this
:host(.legacy-select) {
--padding-top: #{$select-ios-padding-top};
--padding-end: #{$select-ios-padding-end};
--padding-bottom: #{$select-ios-padding-bottom};
--padding-start: #{$select-ios-padding-start};
}

.select-icon {
width: $select-ios-icon-size;
height: $select-ios-icon-size;
Expand Down
12 changes: 0 additions & 12 deletions core/src/components/select/select.ios.vars.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,18 +4,6 @@
// iOS Select
// --------------------------------------------------

/// @prop - Padding top of the select
$select-ios-padding-top: $item-ios-padding-top !default;

/// @prop - Padding end of the select
$select-ios-padding-end: ($item-ios-padding-end * 0.5) !default;

/// @prop - Padding bottom of the select
$select-ios-padding-bottom: $item-ios-padding-bottom !default;

/// @prop - Padding start of the select
$select-ios-padding-start: $item-ios-padding-start !default;

Comment on lines -7 to -18

@brandyscarneybrandyscarneyFeb 12, 2024

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These variables were only used by the legacy select

/// @prop - Size of the select icon
$select-ios-icon-size: dynamic-font(18px) !default;

Expand Down
10 changes: 1 addition & 9 deletions core/src/components/select/select.md.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,14 +11,6 @@
--border-color: #{$item-md-border-color};
}

// TODO FW-3194 - Remove this
:host(.legacy-select) {
--padding-top: #{$select-md-padding-top};
--padding-end: #{$select-md-padding-end};
--padding-bottom: #{$select-md-padding-bottom};
--padding-start: #{$select-md-padding-start};
}

.select-icon {
width: $select-md-icon-size;

Expand DownExpand Up@@ -89,7 +81,7 @@
* when the select is activated.
* This should only happen on MD.
*/
:host(.select-expanded:not(.legacy-select):not(.has-expanded-icon)) .select-icon {
:host(.select-expanded:not(.has-expanded-icon)) .select-icon {
@include transform(rotate(180deg));
}

Expand Down
12 changes: 0 additions & 12 deletions core/src/components/select/select.md.vars.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -4,18 +4,6 @@
// Material Design Select
// --------------------------------------------------

/// @prop - Padding top of the select
$select-md-padding-top: $item-md-padding-top !default;

/// @prop - Padding end of the select
$select-md-padding-end: 0 !default;

/// @prop - Padding bottom of the select
$select-md-padding-bottom: $select-md-padding-top !default;

/// @prop - Padding start of the select
$select-md-padding-start: $item-md-padding-start !default;

Comment on lines -7 to -18

@brandyscarneybrandyscarneyFeb 12, 2024

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These variables were only used by the legacy select

/// @prop - Size of the select icon
$select-md-icon-size: dynamic-font(13px) !default;
/// @prop - The amount of whitespace to display on either side of the floating label
Expand Down
47 changes: 6 additions & 41 deletions core/src/components/select/select.scss
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -48,6 +48,9 @@
display: block;
position: relative;

width: 100%;
min-height: 44px;

font-family: $font-family-base;

white-space: nowrap;
Expand All@@ -56,12 +59,6 @@
z-index: $z-index-item-input;
}

// TODO FW-3194 - Move this to host
:host(:not(.legacy-select)) {
width: 100%;
min-height: 44px;
}

/**
* Since the label sits on top of the element,
* the component needs to be taller otherwise the
Expand All@@ -76,36 +73,16 @@
--highlight-color-focused: #{current-color(base)};
}

// TODO FW-3194 - Remove this
:host(.legacy-select) {
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));

display: flex;

align-items: center;

overflow: hidden;
}

// Select Used in ion-item
// --------------------------------------------------

// TODO FW-3194 - Remove the :not(.legacy-select) piece
//
// The flex property is required here in order to allow
// the select to shrink inside of an item otherwise it
// always wraps to the next line even when it can shrink
:host(.in-item:not(.legacy-select)) {
:host(.in-item) {
flex: 1 1 0;
}

// TODO FW-3194 - Remove this
:host(.in-item.legacy-select) {
position: static;

max-width: 45%;
}

:host(.select-disabled) {
pointer-events: none;
}
Expand All@@ -114,15 +91,14 @@
border: 2px solid #5e9ed6;
}

// TODO FW-3194 - Remove :not(.legacy-select) piece
/**
* Select can be slotted
* in components such as item and
* toolbar which is why we do not
* limit the below behavior to just ion-item.
*/
:host([slot="start"]:not(.legacy-select)),
:host([slot="end"]:not(.legacy-select)) {
:host([slot="start"]),
:host([slot="end"]) {
width: auto;
}

Expand All@@ -132,17 +108,6 @@
opacity: var(--placeholder-opacity);
}

// TODO FW-3194 - Remove this
:host(.legacy-select) label {
@include input-cover();

display: flex;

align-items: center;

opacity: 0;
}

button {
@include visually-hidden();
}
Expand Down
Loading