Skip to content

Commit 8fb8ad7

Browse files
thetaPCthetaPC
committed
refactor(select): update truncate styles
1 parent 320a41a commit 8fb8ad7

File tree

3 files changed

+103
-24
lines changed

3 files changed

+103
-24
lines changed

‎core/src/components/select/select.ionic.outline.scss‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,6 @@
1515
--border-color: #{globals.current-color(base)};
1616
}
1717

18-
// Select Wrapper
19-
// --------------------------------------------------
20-
21-
:host(.select-fill-outline.select-label-placement-stacked) .label-text-wrapper,
22-
:host(.select-fill-outline.select-label-placement-floating) .label-text-wrapper {
23-
/**
24-
* Label text should not extend
25-
* beyond the bounds of the select.
26-
*/
27-
max-width: calc(100% - var(--padding-start) - var(--padding-end));
28-
}
29-
3018
// Select Label
3119
// ----------------------------------------------------------------
3220

@@ -72,3 +60,13 @@
7260

7361
box-sizing: border-box;
7462
}
63+
64+
// States
65+
// ----------------------------------------------------------------
66+
67+
// Disabled
68+
// ----------------------------------------------------------------
69+
70+
:host(.select-fill-outline.select-disabled) {
71+
--border-color: #{globals.$ion-primitives-neutral-300};
72+
}

‎core/src/components/select/select.ionic.scss‎

Lines changed: 50 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,6 @@
1212
--padding-top: #{globals.$ion-space-300};
1313
--padding-bottom: #{globals.$ion-space-300};
1414
--placeholder-color: #{globals.$ion-primitives-neutral-800};
15-
16-
width: fit-content;
1715
}
1816

1917
// Select Label
@@ -77,6 +75,8 @@
7775
// ----------------------------------------------------------------
7876

7977
.select-wrapper {
78+
min-width: globals.$ion-scale-5000;
79+
8080
background: transparent;
8181
}
8282

@@ -86,7 +86,6 @@
8686
.select-wrapper-inner {
8787
position: relative;
8888

89-
min-width: globals.$ion-scale-5000;
9089
height: globals.$ion-scale-1200;
9190

9291
background: var(--background);
@@ -96,6 +95,24 @@
9695
gap: globals.$ion-space-200;
9796
}
9897

98+
:host(.select-label-placement-stacked) .select-wrapper-inner,
99+
:host(.select-label-placement-floating) .select-wrapper-inner {
100+
width: 100%;
101+
}
102+
103+
// Select Native Wrapper
104+
// ----------------------------------------------------------------
105+
106+
:host(.select-label-placement-stacked) .native-wrapper,
107+
:host(.select-label-placement-floating) .native-wrapper {
108+
/**
109+
* Text should not extend beyond the bounds of the select.
110+
* This is done by setting the width to the full width minus
111+
* the icon width and the gap between the icon and the text.
112+
*/
113+
width: calc(100% - globals.$ion-scale-400 - globals.$ion-space-200);
114+
}
115+
99116
// Start/End Slots
100117
// ----------------------------------------------------------------
101118

@@ -127,6 +144,36 @@
127144
height: globals.$ion-scale-400;
128145
}
129146

147+
.select-icon {
148+
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
149+
}
150+
151+
/**
152+
* This rotates the chevron icon
153+
* when the select is activated.
154+
* This should only happen on MD.
155+
*/
156+
:host(.select-expanded:not(.has-expanded-icon)) .select-icon {
157+
@include globals.transform(rotate(180deg));
158+
}
159+
130160
.select-icon {
131161
color: globals.$ion-primitives-neutral-800;
132162
}
163+
164+
// States
165+
// ----------------------------------------------------------------
166+
167+
// Disabled
168+
// ----------------------------------------------------------------
169+
170+
:host(.select-disabled) {
171+
--background: #{globals.$ion-primitives-neutral-100};
172+
}
173+
174+
:host(.select-disabled) .label-text-wrapper,
175+
// Targets the text inside the select and the placeholder
176+
:host(.select-disabled) .select-text,
177+
:host(.select-disabled) .select-icon {
178+
color: globals.$ion-primitives-neutral-500;
179+
}

‎core/src/components/select/test/states/index.html‎

Lines changed: 43 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
grid-row-gap: 20px;
2020
grid-column-gap: 20px;
2121
}
22-
h2 {
22+
h3 {
2323
font-size: 12px;
2424
font-weight: normal;
2525

@@ -49,27 +49,61 @@
4949
</ion-header>
5050

5151
<ion-content id="content" class="ion-padding">
52+
<h2>No Fill</h2>
5253
<div class="grid">
5354
<div class="grid-item">
54-
<h2>Placeholder</h2>
55-
<ion-select label="Favorite Fruit" placeholder="Select a fruit"></ion-select>
55+
<h3>Disabled, No Value</h3>
56+
<ion-select label="Favorite Fruit" disabled="true"></ion-select>
5657
</div>
5758

5859
<div class="grid-item">
59-
<h2>Value</h2>
60-
<ion-select label="Favorite Fruit" value="apples">
60+
<h3>Disabled, Placeholder</h3>
61+
<ion-select label="Favorite Fruit" placeholder="Select a fruit" disabled="true"></ion-select>
62+
</div>
63+
64+
<div class="grid-item">
65+
<h3>Disabled, Value</h3>
66+
<ion-select label="Favorite Fruit" value="apples" disabled="true">
6167
<ion-select-option value="apples">Apples</ion-select-option>
6268
</ion-select>
6369
</div>
70+
</div>
6471

72+
<h2>Outline</h2>
73+
<div class="grid">
6574
<div class="grid-item">
66-
<h2>Disabled, Placeholder</h2>
67-
<ion-select label="Favorite Fruit" placeholder="Select a fruit" disabled="true"></ion-select>
75+
<h3>Disabled, No Value</h3>
76+
<ion-select fill="outline" label="Favorite Fruit" disabled="true"></ion-select>
6877
</div>
6978

7079
<div class="grid-item">
71-
<h2>Disabled, Value</h2>
72-
<ion-select label="Favorite Fruit" value="apples" disabled="true">
80+
<h3>Disabled, Placeholder</h3>
81+
<ion-select fill="outline" label="Favorite Fruit" placeholder="Select a fruit" disabled="true"></ion-select>
82+
</div>
83+
84+
<div class="grid-item">
85+
<h3>Disabled, Value</h3>
86+
<ion-select fill="outline" label="Favorite Fruit" value="apples" disabled="true">
87+
<ion-select-option value="apples">Apples</ion-select-option>
88+
</ion-select>
89+
</div>
90+
</div>
91+
92+
<h2>Solid</h2>
93+
<div class="grid">
94+
<div class="grid-item">
95+
<h3>Disabled, No Value</h3>
96+
<ion-select fill="solid" label="Favorite Fruit" disabled="true"></ion-select>
97+
</div>
98+
99+
<div class="grid-item">
100+
<h3>Disabled, Placeholder</h3>
101+
<ion-select fill="solid" label="Favorite Fruit" placeholder="Select a fruit" disabled="true"></ion-select>
102+
</div>
103+
104+
<div class="grid-item">
105+
<h3>Disabled, Value</h3>
106+
<ion-select fill="solid" label="Favorite Fruit" value="apples" disabled="true">
73107
<ion-select-option value="apples">Apples</ion-select-option>
74108
</ion-select>
75109
</div>

0 commit comments

Comments
 (0)