From c9739fe35e921a18ecbc660413e70a11b05dbffa Mon Sep 17 00:00:00 2001 From: Asif Ahmed Date: Wed, 6 May 2020 18:56:42 +0530 Subject: [PATCH] fix(select): fixes error and warning css for select fix #74 --- src/components/select/select.scss | 43 ++++++++++++--------- src/components/select/select.tsx | 16 +++----- src/components/textarea/textarea.scss | 2 +- src/components/timepicker/timepicker.e2e.ts | 2 +- src/styles/variables/_colors.scss | 1 + 5 files changed, 33 insertions(+), 31 deletions(-) diff --git a/src/components/select/select.scss b/src/components/select/select.scss index c54e50395..e24020c46 100644 --- a/src/components/select/select.scss +++ b/src/components/select/select.scss @@ -15,26 +15,19 @@ --input-hover-color: var(--color-smoke-700); --input-focus-color: var(--color-azure-800); --input-border: var(--color-smoke-100); - --warning-color: var(--color-casablanca-100); + --warning-color: var(--color-casablanca-300); --min-height: 10px; --max-height: 200px; } @mixin stateStyle($_color) { - & > input { - border-color: $_color; - } + border-color: $_color; - & > input:focus { - box-shadow: none; + & span.dropdown-status-icon { border-color: $_color; } - & > input:hover { - border-color: $_color; - } - - & + .help-block { + & ~ span.help-block { color: $_color; } } @@ -84,14 +77,6 @@ label { width: auto; } } - - &.error { - @include stateStyle(var(--error-color)); - } - - &.warning { - @include stateStyle(var(--warning-color)); - } } .input-container { @@ -111,6 +96,14 @@ label { transition: 0.2s linear; } + &.error { + @include stateStyle(var(--error-color)); + } + + &.warning { + @include stateStyle(var(--warning-color)); + } + &[disabled] { color: var(--color-smoke-50); background-color: var(--input-disabled-bg); @@ -129,6 +122,18 @@ label { background: var(--input-bg); border: 1px solid transparent; box-shadow: 0 0 0 2px var(--input-focus-color); + + &.error { + @include stateStyle(var(--error-color)); + + box-shadow: 0 0 0 1px var(--error-color); + } + + &.warning { + @include stateStyle(var(--warning-color)); + + box-shadow: 0 0 0 1px var(--warning-color); + } } } diff --git a/src/components/select/select.tsx b/src/components/select/select.tsx index 866eb7de0..2d63556a2 100644 --- a/src/components/select/select.tsx +++ b/src/components/select/select.tsx @@ -169,7 +169,7 @@ export class Select { if (this.multiple) { return this.options .filter(option => option.selected) - .map(option => ); + .map(option => ); } } @@ -178,8 +178,6 @@ export class Select { if (selectedOptions.length > 0) { this.value = this.multiple ? selectedOptions.map(option => option.value) : selectedOptions[0].value || ''; this.selectInput.value = this.multiple ? '' : selectedOptions[0].text || ''; - } else if (selectedOptions.length === 0) { - this.value = undefined; } } @@ -189,7 +187,6 @@ export class Select { value={option.value} selected={option.selected} html={option.isHtml} - disabled={option.disabled} htmlContent={option.htmlContent} >{option.text} ) @@ -206,7 +203,6 @@ export class Select { text: option.html ? option.optionText : option.textContent, value: option.value, selected: option.selected, - disabled: option.disabled, htmlContent: option.html ? option.innerHTML : '', }; }); @@ -236,13 +232,13 @@ export class Select { > {this.label !== '' ? : ''}
-
this.select = select} onClick={() => this.innerOnClick()}> -
+
{this.renderTags()} this.selectInput = selectInput} diff --git a/src/components/textarea/textarea.scss b/src/components/textarea/textarea.scss index 40dd35f89..bc74f4933 100644 --- a/src/components/textarea/textarea.scss +++ b/src/components/textarea/textarea.scss @@ -10,7 +10,7 @@ --input-hover-color: var(--color-smoke-700); --input-focus-color: var(--color-azure-800); --input-border: var(--color-smoke-100); - --warning-color: var(--color-casablanca-100); + --warning-color: var(--color-casablanca-300); } @mixin stateStyle($_color) { diff --git a/src/components/timepicker/timepicker.e2e.ts b/src/components/timepicker/timepicker.e2e.ts index 512504789..4e3d08285 100644 --- a/src/components/timepicker/timepicker.e2e.ts +++ b/src/components/timepicker/timepicker.e2e.ts @@ -60,7 +60,7 @@ describe('fw-timepicker', () => { await page.setContent(``); const el = await page.find('fw-timepicker >>> fw-select'); - expect(el.shadowRoot).toEqualHtml(`
    09:00 AM 09:15 AM 09:30 AM 09:45 AM 10:00 AM 10:15 AM 10:30 AM 10:45 AM 11:00 AM 11:15 AM 11:30 AM 11:45 AM 12:00 PM 12:15 PM 12:30 PM 12:45 PM 01:00 PM 01:15 PM 01:30 PM 01:45 PM 02:00 PM 02:15 PM 02:30 PM 02:45 PM 03:00 PM 03:15 PM 03:30 PM 03:45 PM 04:00 PM 04:15 PM 04:30 PM 04:45 PM 05:00 PM 05:15 PM 05:30 PM 05:45 PM 06:00 PM 06:15 PM 06:30 PM 06:45 PM 07:00 PM 07:15 PM 07:30 PM 07:45 PM 08:00 PM 08:15 PM 08:30 PM 08:45 PM 09:00 PM 09:15 PM 09:30 PM 09:45 PM 10:00 PM 10:15 PM 10:30 PM 10:45 PM 11:00 PM 11:15 PM 11:30 PM 11:45 PM
`); + expect(el.shadowRoot).toEqualHtml(`
    09:00 AM 09:15 AM 09:30 AM 09:45 AM 10:00 AM 10:15 AM 10:30 AM 10:45 AM 11:00 AM 11:15 AM 11:30 AM 11:45 AM 12:00 PM 12:15 PM 12:30 PM 12:45 PM 01:00 PM 01:15 PM 01:30 PM 01:45 PM 02:00 PM 02:15 PM 02:30 PM 02:45 PM 03:00 PM 03:15 PM 03:30 PM 03:45 PM 04:00 PM 04:15 PM 04:30 PM 04:45 PM 05:00 PM 05:15 PM 05:30 PM 05:45 PM 06:00 PM 06:15 PM 06:30 PM 06:45 PM 07:00 PM 07:15 PM 07:30 PM 07:45 PM 08:00 PM 08:15 PM 08:30 PM 08:45 PM 09:00 PM 09:15 PM 09:30 PM 09:45 PM 10:00 PM 10:15 PM 10:30 PM 10:45 PM 11:00 PM 11:15 PM 11:30 PM 11:45 PM
`); }); it('sets the value when the option is selected', async () => { diff --git a/src/styles/variables/_colors.scss b/src/styles/variables/_colors.scss index 21564f5e7..0c9d59118 100644 --- a/src/styles/variables/_colors.scss +++ b/src/styles/variables/_colors.scss @@ -28,6 +28,7 @@ --color-persimmon-50: #ffecf0; --color-casablanca-700: #e86f25; + --color-casablanca-300: #f8ab59; --color-casablanca-100: #fedcb3; --color-casablanca-50: #fef1e1; //=== Color palette ===//