Skip to content

Commit

Permalink
fix(select): allow empty value instead of null
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sukaato
Sukaato committed Dec 21, 2024
1 parent 1dc9235 commit 52e7055
Show file tree
Hide file tree
Showing 11 changed files with 313 additions and 120 deletions.
29 changes: 5 additions & 24 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 7 additions & 5 deletions packages/core/api.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -360,18 +360,17 @@ pop-select,prop,bordered,boolean,undefined,false,true
pop-select,prop,color,"accent" | "error" | "ghost" | "info" | "primary" | "secondary" | "success" | "warning",undefined,false,true
pop-select,prop,compare,((currentValue: any, newValue: any) => boolean) | string,undefined,false,false
pop-select,prop,disabled,boolean,undefined,false,true
pop-select,prop,helperText,string,undefined,false,false
pop-select,prop,helperText,string,'',false,false
pop-select,prop,max,number,undefined,false,true
pop-select,prop,min,number,undefined,false,true
pop-select,prop,multiple,boolean,undefined,false,true
pop-select,prop,name,string,this.inputId,false,true
pop-select,prop,notEnoughErrorText,string,undefined,false,false
pop-select,prop,notEnoughErrorText,string,'',false,false
pop-select,prop,placeholder,string,undefined,false,false
pop-select,prop,readonly,boolean,undefined,false,true
pop-select,prop,required,boolean,undefined,false,true
pop-select,prop,selectedText,string,undefined,false,false
pop-select,prop,size,"lg" | "md" | "sm" | "xs",undefined,false,true
pop-select,prop,tooManyErrorText,string,undefined,false,false
pop-select,prop,tooManyErrorText,string,'',false,false
pop-select,prop,value,any,null,false,false
pop-select,method,dismiss,dismiss() => Promise<boolean>
pop-select,method,present,present() => Promise<boolean>
Expand All @@ -386,8 +385,11 @@ pop-select,css-prop,--background
pop-select,css-prop,--border-color
pop-select,css-prop,--border-radius
pop-select,css-prop,--color
pop-select,css-prop,--error-color
pop-select,css-prop,--max-height
pop-select,css-prop,--opacity
pop-select,css-prop,--outline-color
pop-select,part,backdrop
pop-select,part,content
pop-select,part,label

pop-select-option,none
Expand Down
8 changes: 0 additions & 8 deletions packages/core/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1088,10 +1088,6 @@ export namespace Components {
* @default false
*/
"required"?: boolean;
/**
* The text to display instead of the selected option's value.
*/
"selectedText"?: string;
/**
* Sets focus on the native `select` in `pop-select`. Use this method instead of the global `select.focus()`.
*/
Expand Down Expand Up @@ -3126,10 +3122,6 @@ declare namespace LocalJSX {
* @default false
*/
"required"?: boolean;
/**
* The text to display instead of the selected option's value.
*/
"selectedText"?: string;
/**
* Change size of the component Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`.
* @config
Expand Down
4 changes: 2 additions & 2 deletions packages/core/src/components/dropdown/dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
Prop,
h,
} from '@stencil/core';
import { ENTER, SPACE } from 'key-definitions';
import { ENTER, ESC, SPACE } from 'key-definitions';
import { componentConfig } from '#config';
import { ClickOutside } from '#utils/click-outside';
import { isRTL } from '#utils/dir';
Expand Down Expand Up @@ -249,7 +249,7 @@ export class Dropdown implements ComponentInterface, OverlayInterface {
class="dropdown-trigger"
onClick={this.onClick}
onContextMenu={this.onContext}
onKeyUp={this.onKeyPress(SPACE.key, ENTER.key)}
onKeyUp={this.onKeyPress(SPACE.key, ENTER.key, ESC.key)}
part="trigger"
>
<slot name="trigger" />
Expand Down
32 changes: 17 additions & 15 deletions packages/core/src/components/select/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,17 @@ Select is used to pick a value from a list of options.
| `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` |
| `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` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the element. | `boolean` | `false` |
| `helperText` | `helper-text` | Text that is placed under the select and displayed when no error is detected. | `string` | `undefined` |
| `helperText` | `helper-text` | Text that is placed under the select and displayed when no error is detected. | `string` | `''` |
| `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` |
| `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` |
| `multiple` | `multiple` | If `true`, the user can select more than one value. | `boolean` | `false` |
| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` |
| `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` |
| `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` | `''` |
| `placeholder` | `placeholder` | Instructional text that shows before the input has a value.<br> <br> This property replace the `<option disabled selected>` | `string` | `undefined` |
| `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` |
| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | `false` |
| `selectedText` | `selected-text` | The text to display instead of the selected option's value. | `string` | `undefined` |
| `size` | `size` | Change size of the component<br> Options are: `"xs"`, `"sm"`, `"md"`, `"lg"`. | `"lg" \| "md" \| "sm" \| "xs"` | `"md"` |
| `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` |
| `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` | `''` |
| `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` |


Expand Down Expand Up @@ -97,21 +96,24 @@ Type: `Promise<boolean>`

## Parts

| Part | Description |
| --------- | ------------------------------------------------ |
| `"label"` | The native HTML label element that wrap the text |
| Part | Description |
| ------------ | ------------------------------------------------ |
| `"backdrop"` | |
| `"content"` | |
| `"label"` | The native HTML label element that wrap the text |


## CSS Custom Properties

| Name | Description |
| ----------------- | ---------------------------- |
| `--background` | Background color |
| `--border-color` | Border color & outline color |
| `--border-radius` | Border radius |
| `--color` | Change text color |
| `--error-color` | Change error text color |
| `--opacity` | Change background opacity |
| Name | Description |
| ----------------- | ---------------------------------------------------------------------------------------- |
| `--background` | Background color for trgger and content |
| `--border-color` | Border color for select trigger and content when `bordered` is set |
| `--border-radius` | Border radius for select trigger and content |
| `--color` | Change text color |
| `--max-height` | Change max-height for dropdown content (apply only when screen width is more than 640px) |
| `--opacity` | Change background opacity |
| `--outline-color` | Outline color for focused select trigger, `--border-color` is used as fallback |


----------------------------------------------
Expand Down
55 changes: 45 additions & 10 deletions packages/core/src/components/select/select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,16 @@
@use "@poppy/global" as theme;

/**
* @prop --border-radius: Border radius
* @prop --border-color: Border color & outline color
* @prop --border-radius: Border radius for select trigger and content
* @prop --border-color: Border color for select trigger and content when `bordered` is set
* @prop --outline-color: Outline color for focused select trigger, `--border-color` is used as fallback
*
* @prop --background: Background color
* @prop --background: Background color for trgger and content
* @prop --opacity: Change background opacity
*
* @prop --color: Change text color
* @prop --error-color: Change error text color
*
* @prop --max-height: Change max-height for dropdown content (apply only when screen width is more than 640px)
*/

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

&-content {
position: absolute;
z-index: 20;

min-height: 2rem;
max-height: var(--max-height, 20rem);
overflow-y: auto;
width: 100%;

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

animation-name: present;
}

&-backdrop {
display: none;
}
}

.select-placeholder {
Expand All @@ -92,6 +101,7 @@ $minWidth: 12rem;
}

svg {
min-width: 24px;
margin-inline-start: auto;
transition: transform 150ms ease 0ms;
}
Expand All @@ -100,8 +110,33 @@ $minWidth: 12rem;
width: auto;
}
}
:host(:focus) {
z-index: 1;

@media screen and (max-width: 640px) {
:host .dropdown {
position: inherit;

&-content {
max-height: calc(100dvh - 2rem);

width: auto;
top: 50%;
left: 2rem;
right: 2rem;

transform: translateY(-50%);
}

&-backdrop {
display: block;
position: fixed;
z-index: 10;

inset: 0;

background: theme.use_color("neutral.base", 0.2);
}
}

}


Expand Down Expand Up @@ -130,14 +165,14 @@ $minWidth: 12rem;
// ----------------------------------------------------------------

:host([size="xs"]) .dropdown-trigger {
height: 1.5rem;
min-height: 1.5rem;
padding-inline-start: 0.65rem;
padding-inline-end: 0.5rem;
font-size: 0.75rem;
line-height: 1.625;
}
:host([size="sm"]) .dropdown-trigger {
height: 2rem;
min-height: 2rem;
padding-inline-start: 0.75rem;
padding-inline-end: 0.85rem;
font-size: 0.875rem;
Expand All @@ -146,15 +181,15 @@ $minWidth: 12rem;
:host([size="md"]),
:host(:not([size])) {
.dropdown-trigger {
height: 3rem;
min-height: 3rem;
padding-inline-start: 1rem;
padding-inline-end: 1.15rem;
font-size: 0.875rem;
line-height: 2;
}
}
:host([size="lg"]) .dropdown-trigger {
height: 4rem;
min-height: 4rem;
padding-inline-start: 1.15rem;
padding-inline-end: 1.35rem;
font-size: 1.125rem;
Expand Down
Loading

0 comments on commit 52e7055

Please sign in to comment.