Skip to content

Commit bef0f53

Browse files
authored
feat(select): add --placeholder-opacity and --placeholder-color, expose shadow parts (#19893)
resolves #17446
1 parent 1a8b7a4 commit bef0f53

File tree

5 files changed

+24
-11
lines changed

5 files changed

+24
-11
lines changed

core/api.txt

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1038,6 +1038,8 @@ ion-select,css-prop,--padding-bottom
10381038
ion-select,css-prop,--padding-end
10391039
ion-select,css-prop,--padding-start
10401040
ion-select,css-prop,--padding-top
1041+
ion-select,css-prop,--placeholder-color
1042+
ion-select,css-prop,--placeholder-opacity
10411043

10421044
ion-select-option,shadow
10431045
ion-select-option,prop,disabled,boolean,false,false,false

core/src/components/select/readme.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -793,12 +793,14 @@ Type: `Promise<any>`
793793

794794
## CSS Custom Properties
795795

796-
| Name | Description |
797-
| ------------------ | --------------------------------------------------------------------------------------------------------- |
798-
| `--padding-bottom` | Bottom padding of the select |
799-
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select |
800-
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select |
801-
| `--padding-top` | Top padding of the select |
796+
| Name | Description |
797+
| ----------------------- | --------------------------------------------------------------------------------------------------------- |
798+
| `--padding-bottom` | Bottom padding of the select |
799+
| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select |
800+
| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select |
801+
| `--padding-top` | Top padding of the select |
802+
| `--placeholder-color` | Color of the select placeholder text |
803+
| `--placeholder-opacity` | Opacity of the select placeholder text |
802804

803805

804806
----------------------------------------------

core/src/components/select/select.scss

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,13 @@
99
* @prop --padding-end: Right padding if direction is left-to-right, and left padding if direction is right-to-left of the select
1010
* @prop --padding-bottom: Bottom padding of the select
1111
* @prop --padding-start: Left padding if direction is left-to-right, and right padding if direction is right-to-left of the select
12+
*
13+
* @prop --placeholder-color: Color of the select placeholder text
14+
* @prop --placeholder-opacity: Opacity of the select placeholder text
1215
*/
16+
--placeholder-color: currentColor;
17+
--placeholder-opacity: 0.33;
18+
1319
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
1420

1521
display: flex;
@@ -37,9 +43,9 @@
3743
}
3844

3945
.select-placeholder {
40-
color: currentColor;
46+
color: var(--placeholder-color);
4147

42-
opacity: .33;
48+
opacity: var(--placeholder-opacity);
4349
}
4450

4551
button {

core/src/components/select/select.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -471,10 +471,10 @@ export class Select implements ComponentInterface {
471471
'select-disabled': disabled,
472472
}}
473473
>
474-
<div class={selectTextClasses}>
474+
<div class={selectTextClasses} part="text">
475475
{selectText}
476476
</div>
477-
<div class="select-icon" role="presentation">
477+
<div class="select-icon" role="presentation" part="icon">
478478
<div class="select-icon-inner"></div>
479479
</div>
480480
<button

core/src/components/select/test/basic/index.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
<ion-item>
2828
<ion-label>Gender</ion-label>
29-
<ion-select id="gender" placeholder="Select One">
29+
<ion-select id="gender" placeholder="Select One" class="custom-select">
3030
<ion-select-option value="fn">Female</ion-select-option>
3131
<ion-select-option value="ml">Male</ion-select-option>
3232
</ion-select>
@@ -286,6 +286,9 @@
286286
.outer-content {
287287
--background: #f2f2f2;
288288
}
289+
.custom-select {
290+
--placeholder-opacity: 0.5;
291+
}
289292
</style>
290293

291294
<script>

0 commit comments

Comments
 (0)