Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff 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 Down Expand 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
Original file line number Diff line number Diff 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
Original file line number Diff line number Diff 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 Down Expand 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
Original file line number Diff line number Diff 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
Original file line number Diff line number Diff 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 Down Expand 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
Original file line number Diff line number Diff 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
31 changes: 0 additions & 31 deletions core/src/components/item/test/disabled/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -39,18 +39,6 @@
<ion-label>Disabled Item Anchor</ion-label>
</ion-item>

<ion-item>
<ion-select label="Disabled Select" disabled value="n64">
<ion-select-option value="">No Game Console</ion-select-option>
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64">Nintendo64</ion-select-option>
<ion-select-option value="ps">PlayStation</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-toggle disabled checked> Disabled Toggle </ion-toggle>
</ion-item>
Expand Down Expand Up @@ -89,25 +77,6 @@
<ion-label>Checkbox + Radio</ion-label>
</ion-item>

<ion-item>
<ion-label slot="start">Disabled Selects</ion-label>
<ion-select aria-label="Month" placeholder="month">
<ion-select-option value="1">January</ion-select-option>
<ion-select-option value="2">February</ion-select-option>
<ion-select-option value="3">March</ion-select-option>
</ion-select>
<ion-select aria-label="Year" disabled placeholder="year">
<ion-select-option value="1990">1990</ion-select-option>
<ion-select-option value="1991">1991</ion-select-option>
<ion-select-option value="1992">1992</ion-select-option>
<ion-select-option value="1993">1993</ion-select-option>
<ion-select-option value="1994">1994</ion-select-option>
<ion-select-option value="1995">1995</ion-select-option>
<ion-select-option value="1996">1996</ion-select-option>
<ion-select-option value="1997">1997</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-checkbox slot="start" aria-label="Checkbox"></ion-checkbox>
<ion-label>Checkbox + Range</ion-label>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
104 changes: 0 additions & 104 deletions core/src/components/item/test/legacy/alignment/index.html

This file was deleted.

14 changes: 0 additions & 14 deletions core/src/components/item/test/legacy/alignment/item.e2e.ts

This file was deleted.

Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
32 changes: 0 additions & 32 deletions core/src/components/item/test/legacy/disabled/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -39,19 +39,6 @@
<ion-label>Disabled Item Anchor</ion-label>
</ion-item>

<ion-item>
<ion-label>Disabled Select</ion-label>
<ion-select disabled value="n64" legacy="true">
<ion-select-option value="">No Game Console</ion-select-option>
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64">Nintendo64</ion-select-option>
<ion-select-option value="ps">PlayStation</ion-select-option>
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-label>Disabled Toggle</ion-label>
<ion-toggle disabled checked slot="end" legacy="true"></ion-toggle>
Expand Down Expand Up @@ -92,25 +79,6 @@
<ion-label>Checkbox + Radio</ion-label>
</ion-item>

<ion-item>
<ion-label>Disabled Selects</ion-label>
<ion-select placeholder="month" legacy="true">
<ion-select-option value="1">January</ion-select-option>
<ion-select-option value="2">February</ion-select-option>
<ion-select-option value="3">March</ion-select-option>
</ion-select>
<ion-select disabled placeholder="year" legacy="true">
<ion-select-option value="1990">1990</ion-select-option>
<ion-select-option value="1991">1991</ion-select-option>
<ion-select-option value="1992">1992</ion-select-option>
<ion-select-option value="1993">1993</ion-select-option>
<ion-select-option value="1994">1994</ion-select-option>
<ion-select-option value="1995">1995</ion-select-option>
<ion-select-option value="1996">1996</ion-select-option>
<ion-select-option value="1997">1997</ion-select-option>
</ion-select>
</ion-item>

<ion-item>
<ion-checkbox slot="start" legacy="true"></ion-checkbox>
<ion-label>Checkbox + Range</ion-label>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 0 additions & 8 deletions core/src/components/select/select.ios.scss
Original file line number Diff line number Diff 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
Original file line number Diff line number Diff 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;

/// @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
Original file line number Diff line number Diff 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 Down Expand 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
Loading