Skip to content

Align uui-select with other inputs #658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Nov 16, 2023
Merged

Align uui-select with other inputs #658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
430931a
docs(storybook): ensure that the uui-form story has the right imports
iOvergaard Nov 14, 2023
e6d62ac
fix(uui-select): do not enforce a certain background-color
iOvergaard Nov 14, 2023
237c542
fix(uui-select): set display to "inline-block" to match the inner nat…
iOvergaard Nov 14, 2023
f43f06c
fix(uui-input): make the inner input follow the height of the custom …
iOvergaard Nov 14, 2023
0c48afc
fix(uui-select): make the inner select follow the height of the custo…
iOvergaard Nov 14, 2023
abb8143
docs(uui-input): add docs for custom css properties
iOvergaard Nov 14, 2023
10a8b92
docs(uui-select): add docs for custom css properties
iOvergaard Nov 14, 2023
5bcb19e
fix(uui-select): move 'height' and other properties to inner element …
iOvergaard Nov 14, 2023
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
51 changes: 36 additions & 15 deletions packages/uui-form/lib/uui-form.story.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ import '@umbraco-ui/uui-slider/lib';
import '@umbraco-ui/uui-radio/lib';
import '@umbraco-ui/uui-toggle/lib';
import '@umbraco-ui/uui-button/lib';
import '@umbraco-ui/uui-input/lib';
import '@umbraco-ui/uui-input-password/lib';
import '@umbraco-ui/uui-combobox/lib';
import '@umbraco-ui/uui-combobox-list/lib';
import '@umbraco-ui/uui-textarea/lib';
import '@umbraco-ui/uui-select/lib';
import { UUIRadioGroupEvent } from '@umbraco-ui/uui-radio/lib/UUIRadioGroupEvent';
import readme from '../README.md?raw';

Expand Down Expand Up @@ -44,6 +50,15 @@ const _onSubmit = (e: SubmitEvent) => {
}
};

const options: Array<Option> = [
{ name: 'Carrot', value: 'orange', selected: true },
{ name: 'Cucumber', value: 'green' },
{ name: 'Aubergine', value: 'purple' },
{ name: 'Blueberry', value: 'Blue' },
{ name: 'Banana', value: 'yellow' },
{ name: 'Strawberry', value: 'red' },
];

// TODO: Find a good way to have stories with both HTML and javascript
export const Overview: Story = () => {
return html`
Expand Down Expand Up @@ -105,9 +120,9 @@ export const Overview: Story = () => {
</uui-form-layout-item>

<uui-form-layout-item>
<uui-label for="MyPasswordInput" slot="label" required
>Password</uui-label
>
<uui-label for="MyPasswordInput" slot="label" required>
Password
</uui-label>
<uui-input-password
id="MyPasswordInput"
name="password"
Expand Down Expand Up @@ -143,22 +158,28 @@ export const Overview: Story = () => {
</uui-textarea>
</uui-form-layout-item>

<uui-form-layout-item>
<uui-label for="MySelect" slot="label" required>Select</uui-label>
<uui-select id="MySelect" name="select" required .options=${options}>
</uui-select>
</uui-form-layout-item>

<uui-form-layout-item>
<uui-label for="MyCombobox" slot="label" required>Combobox</uui-label>
<uui-combobox id="MyCombobox" name="combobox" required>
<uui-combobox-list>
<uui-combobox-list-option value="1"
>Option 1</uui-combobox-list-option
>
<uui-combobox-list-option value="2"
>Option 2</uui-combobox-list-option
>
<uui-combobox-list-option value="3"
>Option 3</uui-combobox-list-option
>
<uui-combobox-list-option value="4"
>Option 4</uui-combobox-list-option
>
<uui-combobox-list-option value="1">
Option 1
</uui-combobox-list-option>
<uui-combobox-list-option value="2">
Option 2
</uui-combobox-list-option>
<uui-combobox-list-option value="3">
Option 3
</uui-combobox-list-option>
<uui-combobox-list-option value="4">
Option 4
</uui-combobox-list-option>
</uui-combobox-list>
</uui-combobox>
</uui-form-layout-item>
Expand Down
13 changes: 12 additions & 1 deletion packages/uui-input/lib/uui-input.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,16 @@ export type InputType =
* @fires UUIInputEvent#change on change
* @fires InputEvent#input on input
* @fires KeyboardEvent#keyup on keyup
* @cssprop --uui-input-height - Height of the element
* @cssprop --uui-input-background-color - Background color of the element
* @cssprop --uui-input-background-color-disabled - Background color when disabled
* @cssprop --uui-input-background-color-readonly - Background color when readonly
* @cssprop --uui-input-border-width - Border width
* @cssprop --uui-input-border-color - Border color
* @cssprop --uui-input-border-color-hover - Border color on hover
* @cssprop --uui-input-border-color-focus - Border color on focus
* @cssprop --uui-input-border-color-disabled - Border color when disabled
* @cssprop --uui-input-border-color-readonly - Border color when readonly
*/
@defineElement('uui-input')
export class UUIInputElement extends FormControlMixin(
Expand Down Expand Up @@ -321,7 +331,7 @@ export class UUIInputElement extends FormControlMixin(
position: relative;
display: inline-flex;
align-items: stretch;
height: var(--uui-size-11);
height: var(--uui-input-height, var(--uui-size-11));
text-align: left;
box-sizing: border-box;
background-color: var(
Expand Down Expand Up @@ -425,6 +435,7 @@ export class UUIInputElement extends FormControlMixin(
border: none;
background: none;
width: 100%;
height: inherit;
text-align: inherit;
outline: none;
}
Expand Down
22 changes: 13 additions & 9 deletions packages/uui-select/lib/uui-select.element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,16 @@ declare global {
* This is a formAssociated element, meaning it can participate in a native HTMLForm. A name:value pair will be submitted.
* @element uui-select
* @fires change - when the user changes value
* @cssprop --uui-select-height - Height of the element
* @cssprop --uui-select-font-size - Font size of the element
* @cssprop --uui-select-padding-y - Padding on the y axis
* @cssprop --uui-select-padding-x - Padding on the x axis
* @cssprop --uui-select-border-color - Border color
* @cssprop --uui-select-border-color-hover - Border color on hover
* @cssprop --uui-select-selected-option-background-color - Background color of the selected option
* @cssprop --uui-select-selected-option-color - Color of the selected option
* @cssprop --uui-select-outline-color - Outline color
* @cssprop --uui-select-disabled-background-color - Background color when disabled
*/
// TODO: Consider if this should use child items instead of an array.
@defineElement('uui-select')
Expand Down Expand Up @@ -235,6 +245,7 @@ export class UUISelectElement extends FormControlMixin(LitElement) {
static styles = [
css`
:host {
display: inline-block;
position: relative;
font-family: inherit;
}
Expand All @@ -244,21 +255,19 @@ export class UUISelectElement extends FormControlMixin(LitElement) {
font-family: inherit;
font-size: var(--uui-select-font-size, var(--uui-size-5));
height: var(--uui-select-height, var(--uui-size-11));
width: 100%;
padding: var(--uui-select-padding-y, var(--uui-size-1))
var(--uui-select-padding-x, var(--uui-size-2));
color: currentColor;
border-radius: 0;
box-sizing: border-box;
background-color: transparent;
border-radius: 0;
border: 1px solid
var(--uui-select-border-color, var(--uui-color-border));
transition: all 150ms ease;
}

#native:focus {
outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
var(--uui-color-focus);
var(--uui-select-outline-color, var(--uui-color-focus));
}

#native[disabled] {
Expand All @@ -285,11 +294,6 @@ export class UUISelectElement extends FormControlMixin(LitElement) {
);
}

/* TODO: a proper focus style has to be implemented. it needs it's own variables */
#native:focus {
outline-color: var(--uui-select-outline-color, var(--uui-color-focus));
}

#caret {
position: absolute;
right: 12px;
Expand Down