Skip to content

Commit 09b1303

Browse files
SukaatoSukaato
committed
fix(select): allow empty value instead of null
1 parent 1dc9235 commit 09b1303

File tree

11 files changed

+313
-120
lines changed

11 files changed

+313
-120
lines changed

‎package-lock.json

+5-24
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/api.txt

+7-5
Original file line numberDiff line numberDiff line change
@@ -360,18 +360,17 @@ pop-select,prop,bordered,boolean,undefined,false,true
360360
pop-select,prop,color,"accent" | "error" | "ghost" | "info" | "primary" | "secondary" | "success" | "warning",undefined,false,true
361361
pop-select,prop,compare,((currentValue: any, newValue: any) => boolean) | string,undefined,false,false
362362
pop-select,prop,disabled,boolean,undefined,false,true
363-
pop-select,prop,helperText,string,undefined,false,false
363+
pop-select,prop,helperText,string,'',false,false
364364
pop-select,prop,max,number,undefined,false,true
365365
pop-select,prop,min,number,undefined,false,true
366366
pop-select,prop,multiple,boolean,undefined,false,true
367367
pop-select,prop,name,string,this.inputId,false,true
368-
pop-select,prop,notEnoughErrorText,string,undefined,false,false
368+
pop-select,prop,notEnoughErrorText,string,'',false,false
369369
pop-select,prop,placeholder,string,undefined,false,false
370370
pop-select,prop,readonly,boolean,undefined,false,true
371371
pop-select,prop,required,boolean,undefined,false,true
372-
pop-select,prop,selectedText,string,undefined,false,false
373372
pop-select,prop,size,"lg" | "md" | "sm" | "xs",undefined,false,true
374-
pop-select,prop,tooManyErrorText,string,undefined,false,false
373+
pop-select,prop,tooManyErrorText,string,'',false,false
375374
pop-select,prop,value,any,null,false,false
376375
pop-select,method,dismiss,dismiss() => Promise<boolean>
377376
pop-select,method,present,present() => Promise<boolean>
@@ -386,8 +385,11 @@ pop-select,css-prop,--background
386385
pop-select,css-prop,--border-color
387386
pop-select,css-prop,--border-radius
388387
pop-select,css-prop,--color
389-
pop-select,css-prop,--error-color
388+
pop-select,css-prop,--max-height
390389
pop-select,css-prop,--opacity
390+
pop-select,css-prop,--outline-color
391+
pop-select,part,backdrop
392+
pop-select,part,content
391393
pop-select,part,label
392394

393395
pop-select-option,none

‎packages/core/src/components.d.ts

-8
Original file line numberDiff line numberDiff line change
@@ -1088,10 +1088,6 @@ export namespace Components {
10881088
* @default false
10891089
*/
10901090
"required"?: boolean;
1091-
/**
1092-
* The text to display instead of the selected option's value.
1093-
*/
1094-
"selectedText"?: string;
10951091
/**
10961092
* Sets focus on the native `select` in `pop-select`. Use this method instead of the global `select.focus()`.
10971093
*/
@@ -3126,10 +3122,6 @@ declare namespace LocalJSX {
31263122
* @default false
31273123
*/
31283124
"required"?: boolean;
3129-
/**
3130-
* The text to display instead of the selected option's value.
3131-
*/
3132-
"selectedText"?: string;
31333125
/**
31343126
* Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
31353127
* @config

‎packages/core/src/components/dropdown/dropdown.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
Prop,
1010
h,
1111
} from '@stencil/core';
12-
import { ENTER, SPACE } from 'key-definitions';
12+
import { ENTER, ESC, SPACE } from 'key-definitions';
1313
import { componentConfig } from '#config';
1414
import { ClickOutside } from '#utils/click-outside';
1515
import { isRTL } from '#utils/dir';
@@ -249,7 +249,7 @@ export class Dropdown implements ComponentInterface, OverlayInterface {
249249
class="dropdown-trigger"
250250
onClick={this.onClick}
251251
onContextMenu={this.onContext}
252-
onKeyUp={this.onKeyPress(SPACE.key, ENTER.key)}
252+
onKeyUp={this.onKeyPress(SPACE.key, ENTER.key, ESC.key)}
253253
part="trigger"
254254
>
255255
<slot name="trigger" />

‎packages/core/src/components/select/readme.md

+17-15
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,17 @@ Select is used to pick a value from a list of options.
1717
| `color` | `color` | The color to use from your application's color palette.<br> Default options are: `"primary"`, `"secondary"`, `"accent"`, `"ghost"`, `"info"`, `"success"`, `"warning"`, `"error"`.<br> For more information on colors, see [theming](/docs/theming/basics). | `"accent" \| "error" \| "ghost" \| "info" \| "primary" \| "secondary" \| "success" \| "warning"` | `undefined` |
1818
| `compare` | `compare` | This property allows developers to specify a custom function<br> for comparing objects when determining the selected option in the<br> ion-radio-group. When not specified, the default behavior will use strict<br> equality (===) for comparison. | `((currentValue: any, newValue: any) => boolean) \| string` | `undefined` |
1919
| `disabled` | `disabled` | If `true`, the user cannot interact with the element. | `boolean` | `false` |
20-
| `helperText` | `helper-text` | Text that is placed under the select and displayed when no error is detected. | `string` | `undefined` |
20+
| `helperText` | `helper-text` | Text that is placed under the select and displayed when no error is detected. | `string` | `''` |
2121
| `max` | `max` | Only apply when `multiple` property is used.<br> The maximum amount of values that can be selected, which must not be less than its minimum (min attribute) value. | `number` | `undefined` |
2222
| `min` | `min` | Only apply when `multiple` property is used.<br> The minimum amount of values that can be selected, which must not be greater than its maximum (max attribute) value. | `number` | `undefined` |
2323
| `multiple` | `multiple` | If `true`, the user can select more than one value. | `boolean` | `false` |
2424
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
25-
| `notEnoughErrorText` | `not-enough-error-text` | Only apply when `multiple` property is used.<br> Text that is placed under the select and displayed when the amount of selected option is below of the `min` property. | `string` | `undefined` |
25+
| `notEnoughErrorText` | `not-enough-error-text` | Only apply when `multiple` property is used.<br> Text that is placed under the select and displayed when the amount of selected option is below of the `min` property. | `string` | `''` |
2626
| `placeholder` | `placeholder` | Instructional text that shows before the input has a value.<br> <br> This property replace the `<option disabled selected>` | `string` | `undefined` |
2727
| `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` |
2828
| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | `false` |
29-
| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `string` | `undefined` |
3029
| `size` | `size` | Change size of the component<br> Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. | `"lg" \| "md" \| "sm" \| "xs"` | `"md"` |
31-
| `tooManyErrorText` | `too-many-error-text` | Only apply when `multiple` property is used.<br> Text that is placed under the select and displayed when the amount of selected option is greater of the `max` property. | `string` | `undefined` |
30+
| `tooManyErrorText` | `too-many-error-text` | Only apply when `multiple` property is used.<br> Text that is placed under the select and displayed when the amount of selected option is greater of the `max` property. | `string` | `''` |
3231
| `value` | `value` | The value of a select is analogous to the value of a `<select>`,<br> it's only used when the toggle participates in a native `<form>`. | `any` | `null` |
3332

3433

@@ -97,21 +96,24 @@ Type: `Promise<boolean>`
9796

9897
## Parts
9998

100-
| Part | Description |
101-
| --------- | ------------------------------------------------ |
102-
| `"label"` | The native HTML label element that wrap the text |
99+
| Part | Description |
100+
| ------------ | ------------------------------------------------ |
101+
| `"backdrop"` | |
102+
| `"content"` | |
103+
| `"label"` | The native HTML label element that wrap the text |
103104

104105

105106
## CSS Custom Properties
106107

107-
| Name | Description |
108-
| ----------------- | ---------------------------- |
109-
| `--background` | Background color |
110-
| `--border-color` | Border color & outline color |
111-
| `--border-radius` | Border radius |
112-
| `--color` | Change text color |
113-
| `--error-color` | Change error text color |
114-
| `--opacity` | Change background opacity |
108+
| Name | Description |
109+
| ----------------- | ---------------------------------------------------------------------------------------- |
110+
| `--background` | Background color for trgger and content |
111+
| `--border-color` | Border color for select trigger and content when `bordered` is set |
112+
| `--border-radius` | Border radius for select trigger and content |
113+
| `--color` | Change text color |
114+
| `--max-height` | Change max-height for dropdown content (apply only when screen width is more than 640px) |
115+
| `--opacity` | Change background opacity |
116+
| `--outline-color` | Outline color for focused select trigger, `--border-color` is used as fallback |
115117

116118

117119
----------------------------------------------

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

+45-10
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,16 @@
33
@use "@poppy/global" as theme;
44

55
/**
6-
* @prop --border-radius: Border radius
7-
* @prop --border-color: Border color & outline color
6+
* @prop --border-radius: Border radius for select trigger and content
7+
* @prop --border-color: Border color for select trigger and content when `bordered` is set
8+
* @prop --outline-color: Outline color for focused select trigger, `--border-color` is used as fallback
89
*
9-
* @prop --background: Background color
10+
* @prop --background: Background color for trgger and content
1011
* @prop --opacity: Change background opacity
1112
*
1213
* @prop --color: Change text color
13-
* @prop --error-color: Change error text color
14+
*
15+
* @prop --max-height: Change max-height for dropdown content (apply only when screen width is more than 640px)
1416
*/
1517

1618
@include join-item.item("details > summary");
@@ -65,8 +67,11 @@ $minWidth: 12rem;
6567

6668
&-content {
6769
position: absolute;
70+
z-index: 20;
6871

6972
min-height: 2rem;
73+
max-height: var(--max-height, 20rem);
74+
overflow-y: auto;
7075
width: 100%;
7176

7277
margin-block: 2px;
@@ -81,6 +86,10 @@ $minWidth: 12rem;
8186

8287
animation-name: present;
8388
}
89+
90+
&-backdrop {
91+
display: none;
92+
}
8493
}
8594

8695
.select-placeholder {
@@ -92,6 +101,7 @@ $minWidth: 12rem;
92101
}
93102

94103
svg {
104+
min-width: 24px;
95105
margin-inline-start: auto;
96106
transition: transform 150ms ease 0ms;
97107
}
@@ -100,8 +110,33 @@ $minWidth: 12rem;
100110
width: auto;
101111
}
102112
}
103-
:host(:focus) {
104-
z-index: 1;
113+
114+
@media screen and (max-width: 640px) {
115+
:host .dropdown {
116+
position: inherit;
117+
118+
&-content {
119+
max-height: calc(100dvh - 2rem);
120+
121+
width: auto;
122+
top: 50%;
123+
left: 2rem;
124+
right: 2rem;
125+
126+
transform: translateY(-50%);
127+
}
128+
129+
&-backdrop {
130+
display: block;
131+
position: fixed;
132+
z-index: 10;
133+
134+
inset: 0;
135+
136+
background: theme.use_color("neutral.base", 0.2);
137+
}
138+
}
139+
105140
}
106141

107142

@@ -130,14 +165,14 @@ $minWidth: 12rem;
130165
// ----------------------------------------------------------------
131166

132167
:host([size="xs"]) .dropdown-trigger {
133-
height: 1.5rem;
168+
min-height: 1.5rem;
134169
padding-inline-start: 0.65rem;
135170
padding-inline-end: 0.5rem;
136171
font-size: 0.75rem;
137172
line-height: 1.625;
138173
}
139174
:host([size="sm"]) .dropdown-trigger {
140-
height: 2rem;
175+
min-height: 2rem;
141176
padding-inline-start: 0.75rem;
142177
padding-inline-end: 0.85rem;
143178
font-size: 0.875rem;
@@ -146,15 +181,15 @@ $minWidth: 12rem;
146181
:host([size="md"]),
147182
:host(:not([size])) {
148183
.dropdown-trigger {
149-
height: 3rem;
184+
min-height: 3rem;
150185
padding-inline-start: 1rem;
151186
padding-inline-end: 1.15rem;
152187
font-size: 0.875rem;
153188
line-height: 2;
154189
}
155190
}
156191
:host([size="lg"]) .dropdown-trigger {
157-
height: 4rem;
192+
min-height: 4rem;
158193
padding-inline-start: 1.15rem;
159194
padding-inline-end: 1.35rem;
160195
font-size: 1.125rem;

0 commit comments

Comments
 (0)