From c7dc82947ffa5c7dea2e29bdff9741537fee5128 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Fri, 24 Sep 2021 22:28:14 -0400 Subject: [PATCH] add filled variant --- docs/components/input.md | 8 ++++ docs/components/select.md | 12 ++++++ docs/components/textarea.md | 10 ++++- docs/resources/changelog.md | 3 +- src/components/input/input.styles.ts | 49 ++++++++++++++++------ src/components/input/input.ts | 5 +++ src/components/select/select.styles.ts | 35 +++++++++++++--- src/components/select/select.ts | 7 +++- src/components/textarea/textarea.styles.ts | 46 +++++++++++++++----- src/components/textarea/textarea.ts | 5 +++ 10 files changed, 149 insertions(+), 31 deletions(-) diff --git a/docs/components/input.md b/docs/components/input.md index 9bff6318..6a60e730 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -42,6 +42,14 @@ Add the `toggle-password` attribute to add a toggle button that will show the pa ``` +### Filled Inputs + +Add the `filled` attribute to draw a filled input. + +```html preview + +``` + ### Pill Use the `pill` attribute to give inputs rounded edges. diff --git a/docs/components/select.md b/docs/components/select.md index eb14d400..b615301d 100644 --- a/docs/components/select.md +++ b/docs/components/select.md @@ -44,6 +44,18 @@ Use the `clearable` attribute to make the control clearable. ``` +### Filled Selects + +Add the `filled` attribute to draw a filled select. + +```html preview + + Option 1 + Option 2 + Option 3 + +``` + ### Pill Use the `pill` attribute to give selects rounded edges. diff --git a/docs/components/textarea.md b/docs/components/textarea.md index f3b30e95..6ebbb76e 100644 --- a/docs/components/textarea.md +++ b/docs/components/textarea.md @@ -30,9 +30,17 @@ Use the `placeholder` attribute to add a placeholder. ``` +### Filled Textareas + +Add the `filled` attribute to draw a filled textarea. + +```html preview + +``` + ### Disabled -Use the `disabled` attribute to disable an input. +Use the `disabled` attribute to disable a textarea. ```html preview diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index e56d52ad..29c0d2d2 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -10,7 +10,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Added initial surface design tokens - Added missing background color to `` -- Added the `outline` attribute to `` for outlined buttons [#522](https://github.com/shoelace-style/shoelace/issues/522) +- Added the `outline` variation to `` [#522](https://github.com/shoelace-style/shoelace/issues/522) +- Added the `filled` variation to ``, ``, and `` - Added the `control` part to `` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538) - Changed the default `distance` in `` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538) - Modified the color scale to no longer use a luminance shift diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts index 83490c81..70ec2b0b 100644 --- a/src/components/input/input.styles.ts +++ b/src/components/input/input.styles.ts @@ -20,48 +20,67 @@ export default css` font-family: var(--sl-input-font-family); font-weight: var(--sl-input-font-weight); letter-spacing: var(--sl-input-letter-spacing); - background-color: rgb(var(--sl-input-background-color)); - border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color)); vertical-align: middle; overflow: hidden; - transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow; cursor: text; + transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow, + var(--sl-transition-fast) background-color; } - .input:hover:not(.input--disabled) { + /* Standard inputs */ + .input--standard { + background-color: rgb(var(--sl-input-background-color)); + border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color)); + } + + .input--standard:hover:not(.input--disabled) { background-color: rgb(var(--sl-input-background-color-hover)); border-color: rgb(var(--sl-input-border-color-hover)); } - .input:hover:not(.input--disabled) .input__control { - color: rgb(var(--sl-input-color-hover)); - } - - .input.input--focused:not(.input--disabled) { + .input--standard.input--focused:not(.input--disabled) { background-color: rgb(var(--sl-input-background-color-focus)); border-color: rgb(var(--sl-input-border-color-focus)); box-shadow: var(--sl-focus-ring); } - .input.input--focused:not(.input--disabled) .input__control { + .input--standard.input--focused:not(.input--disabled) .input__control { color: rgb(var(--sl-input-color-focus)); } - .input.input--disabled { + .input--standard.input--disabled { background-color: rgb(var(--sl-input-background-color-disabled)); border-color: rgb(var(--sl-input-border-color-disabled)); opacity: 0.5; cursor: not-allowed; } - .input.input--disabled .input__control { + .input--standard.input--disabled .input__control { color: rgb(var(--sl-input-color-disabled)); } - .input.input--disabled .input__control::placeholder { + .input--standard.input--disabled .input__control::placeholder { color: rgb(var(--sl-input-placeholder-color-disabled)); } + /* Filled inputs */ + .input--filled { + background-color: rgb(var(--sl-color-neutral-100)); + border: solid 1px rgb(var(--sl-color-neutral-100)); + color: rgb(var(--sl-input-color)); + } + + .input--filled.input--focused:not(.input--disabled) { + background-color: rgb(var(--sl-color-neutral-0)); + border-color: rgb(var(--sl-color-primary-500)); + box-shadow: var(--sl-focus-ring); + } + + .input--filled.input--disabled { + opacity: 0.5; + cursor: not-allowed; + } + .input__control { flex: 1 1 auto; font-family: inherit; @@ -99,6 +118,10 @@ export default css` user-select: none; } + .input:hover:not(.input--disabled) .input__control { + color: rgb(var(--sl-input-color-hover)); + } + .input__control:focus { outline: none; } diff --git a/src/components/input/input.ts b/src/components/input/input.ts index 4a8c7da2..603ebba7 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -71,6 +71,9 @@ export default class SlInput extends LitElement { /** The input's value attribute. */ @property() value = ''; + /** Draws a filled input. */ + @property({ type: Boolean, reflect: true }) filled = false; + /** Draws a pill-style input with rounded edges. */ @property({ type: Boolean, reflect: true }) pill = false; @@ -293,6 +296,8 @@ export default class SlInput extends LitElement { // States 'input--pill': this.pill, + 'input--standard': !this.filled, + 'input--filled': this.filled, 'input--disabled': this.disabled, 'input--focused': this.hasFocus, 'input--empty': this.value?.length === 0, diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts index 5e10f752..ded8c77c 100644 --- a/src/components/select/select.styles.ts +++ b/src/components/select/select.styles.ts @@ -23,21 +23,26 @@ export default css` font-family: var(--sl-input-font-family); font-weight: var(--sl-input-font-weight); letter-spacing: var(--sl-input-letter-spacing); - background-color: rgb(var(--sl-input-background-color)); - border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color)); vertical-align: middle; overflow: hidden; transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow; cursor: pointer; } - .select:not(.select--disabled) .select__control:hover { + /* Standard selects */ + .select--standard .select__control { + background-color: rgb(var(--sl-input-background-color)); + border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color)); + color: rgb(var(--sl-input-color)); + } + + .select--standard:not(.select--disabled) .select__control:hover { background-color: rgb(var(--sl-input-background-color-hover)); border-color: rgb(var(--sl-input-border-color-hover)); color: rgb(var(--sl-input-color-hover)); } - .select.select--focused:not(.select--disabled) .select__control { + .select--standard.select--focused:not(.select--disabled) .select__control { background-color: rgb(var(--sl-input-background-color-focus)); border-color: rgb(var(--sl-input-border-color-focus)); box-shadow: var(--sl-focus-ring); @@ -45,7 +50,7 @@ export default css` color: rgb(var(--sl-input-color-focus)); } - .select--disabled .select__control { + .select--standard.select--disabled .select__control { background-color: rgb(var(--sl-input-background-color-disabled)); border-color: rgb(var(--sl-input-border-color-disabled)); color: rgb(var(--sl-input-color-disabled)); @@ -54,6 +59,26 @@ export default css` outline: none; } + /* Filled selects */ + .select--filled .select__control { + background-color: rgb(var(--sl-color-neutral-100)); + border: solid 1px rgb(var(--sl-color-neutral-100)); + color: rgb(var(--sl-input-color)); + } + + .select--filled.select--focused:not(.select--disabled) .select__control { + background-color: rgb(var(--sl-color-neutral-0)); + border-color: rgb(var(--sl-color-primary-500)); + box-shadow: var(--sl-focus-ring); + outline: none; + } + + .select--filled.select--disabled .select__control { + opacity: 0.5; + cursor: not-allowed; + outline: none; + } + .select--disabled .select__tags, .select--disabled .select__clear { pointer-events: none; diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 1ad3c681..5b625482 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -43,7 +43,7 @@ let id = 0; * @event sl-blur - Emitted when the control loses focus. * * @csspart base - The component's base wrapper. - * @csspart clear-button - The input's clear button, exported from . + * @csspart clear-button - The clear button. * @csspart control - The container that holds the prefix, label, and suffix. * @csspart form-control - The form control that wraps the label, input, and help text. * @csspart help-text - The select's help text. @@ -106,6 +106,9 @@ export default class SlSelect extends LitElement { /** The value of the control. This will be a string or an array depending on `multiple`. */ @property() value: string | Array = ''; + /** Draws a filled select. */ + @property({ type: Boolean, reflect: true }) filled = false; + /** Draws a pill-style select with rounded edges. */ @property({ type: Boolean, reflect: true }) pill = false; @@ -453,6 +456,8 @@ export default class SlSelect extends LitElement { 'select--clearable': this.clearable, 'select--disabled': this.disabled, 'select--multiple': this.multiple, + 'select--standard': !this.filled, + 'select--filled': this.filled, 'select--has-tags': this.multiple && this.displayTags.length > 0, 'select--placeholder-visible': this.displayLabel === '', 'select--small': this.size === 'small', diff --git a/src/components/textarea/textarea.styles.ts b/src/components/textarea/textarea.styles.ts index d60f3c4b..6bbce2a1 100644 --- a/src/components/textarea/textarea.styles.ts +++ b/src/components/textarea/textarea.styles.ts @@ -19,47 +19,73 @@ export default css` font-weight: var(--sl-input-font-weight); line-height: var(--sl-line-height-normal); letter-spacing: var(--sl-input-letter-spacing); - background-color: rgb(var(--sl-input-background-color)); - border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color)); vertical-align: middle; - transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow; + transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow, + var(--sl-transition-fast) background-color; cursor: text; } - .textarea:hover:not(.textarea--disabled) { + /* Standard textareas */ + .textarea--standard { + background-color: rgb(var(--sl-input-background-color)); + border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color)); + } + + .textarea--standard:hover:not(.textarea--disabled) { background-color: rgb(var(--sl-input-background-color-hover)); border-color: rgb(var(--sl-input-border-color-hover)); } - .textarea:hover:not(.textarea--disabled) .textarea__control { + .textarea--standard:hover:not(.textarea--disabled) .textarea__control { color: rgb(var(--sl-input-color-hover)); } - .textarea.textarea--focused:not(.textarea--disabled) { + .textarea--standard.textarea--focused:not(.textarea--disabled) { background-color: rgb(var(--sl-input-background-color-focus)); border-color: rgb(var(--sl-input-border-color-focus)); box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha)); color: rgb(var(--sl-input-color-focus)); } - .textarea.textarea--focused:not(.textarea--disabled) .textarea__control { + .textarea--standard.textarea--focused:not(.textarea--disabled) .textarea__control { color: rgb(var(--sl-input-color-focus)); } - .textarea.textarea--disabled { + .textarea--standard.textarea--disabled { background-color: rgb(var(--sl-input-background-color-disabled)); border-color: rgb(var(--sl-input-border-color-disabled)); opacity: 0.5; cursor: not-allowed; } - .textarea.textarea--disabled .textarea__control { + .textarea--standard.textarea--disabled .textarea__control { color: rgb(var(--sl-input-color-disabled)); } - .textarea.textarea--disabled .textarea__control::placeholder { + .textarea--standard.textarea--disabled .textarea__control::placeholder { color: rgb(var(--sl-input-placeholder-color-disabled)); } + /* Filled textareas */ + .textarea--filled { + background-color: rgb(var(--sl-color-neutral-100)); + border: solid 1px rgb(var(--sl-color-neutral-100)); + } + + .textarea--filled:hover:not(.textarea--disabled) .textarea__control { + color: rgb(var(--sl-input-color-hover)); + } + + .textarea--filled.textarea--focused:not(.textarea--disabled) { + background-color: rgb(var(--sl-color-neutral-0)); + border-color: rgb(var(--sl-color-primary-500)); + box-shadow: var(--sl-focus-ring); + } + + .textarea--filled.textarea--disabled { + opacity: 0.5; + cursor: not-allowed; + } + .textarea__control { flex: 1 1 auto; font-family: inherit; diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts index 11398976..6b94732b 100644 --- a/src/components/textarea/textarea.ts +++ b/src/components/textarea/textarea.ts @@ -53,6 +53,9 @@ export default class SlTextarea extends LitElement { /** The textarea's value attribute. */ @property() value = ''; + /** Draws a filled textarea. */ + @property({ type: Boolean, reflect: true }) filled = false; + /** The textarea's label. Alternatively, you can use the label slot. */ @property() label: string; @@ -297,6 +300,8 @@ export default class SlTextarea extends LitElement { 'textarea--small': this.size === 'small', 'textarea--medium': this.size === 'medium', 'textarea--large': this.size === 'large', + 'textarea--standard': !this.filled, + 'textarea--filled': this.filled, 'textarea--disabled': this.disabled, 'textarea--focused': this.hasFocus, 'textarea--empty': this.value?.length === 0,