Skip to content

Commit

Permalink
fix(select): fixes error and warning css for select
Browse files Browse the repository at this point in the history 
fix #74
  • Loading branch information
Asif Ahmed committed May 6, 2020
1 parent 46caa58 commit 87b0e84
Show file tree
Hide file tree
Showing 5 changed files with 33 additions and 31 deletions.
43 changes: 24 additions & 19 deletions src/components/select/select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down Expand Up @@ -84,14 +77,6 @@ label {
width: auto;
}
}

&.error {
@include stateStyle(var(--error-color));
}

&.warning {
@include stateStyle(var(--warning-color));
}
}

.input-container {
Expand All @@ -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);
Expand All @@ -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);
}
}
}

Expand Down
16 changes: 6 additions & 10 deletions src/components/select/select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ export class Select {
if (this.multiple) {
return this.options
.filter(option => option.selected)
.map(option => <fw-tag text={option.text} disabled={option.disabled} value={option.value}/>);
.map(option => <fw-tag text={option.text} value={option.value}/>);
}
}

Expand All @@ -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;
}
}

Expand All @@ -189,7 +187,6 @@ export class Select {
value={option.value}
selected={option.selected}
html={option.isHtml}
disabled={option.disabled}
htmlContent={option.htmlContent}
>{option.text}
</fw-select-option>)
Expand All @@ -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 : '',
};
});
Expand Down Expand Up @@ -236,13 +232,13 @@ export class Select {
>
{this.label !== '' ? <label class={{ 'required': this.required }}> {this.label} </label> : ''}
<div class="select-container">
<div class="input-container"
<div class={{
'input-container': true,
[this.state]: true,
}}
ref={select => this.select = select}
onClick={() => this.innerOnClick()}>
<div class={{
'input-container-inner': true,
[this.state]: true,
}}>
<div class="input-container-inner">
{this.renderTags()}
<input
ref={selectInput => this.selectInput = selectInput}
Expand Down
2 changes: 1 addition & 1 deletion src/components/textarea/textarea.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/timepicker/timepicker.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ describe('fw-timepicker', () => {

await page.setContent(`<fw-timepicker min-time="09:00 AM" interval=15></fw-timepicker>`);
const el = await page.find('fw-timepicker >>> fw-select');
expect(el.shadowRoot).toEqualHtml(`<div class="select-container"> <div class="input-container"> <div class="input-container-inner normal"> <input autocomplete="off" placeholder="" type="text"> <span class="dropdown-status-icon"></span> </div> </div> <ul class="dropdown" tabindex="0"> <fw-select-option class="hydrated" value="09:00"> 09:00 AM </fw-select-option> <fw-select-option class="hydrated" value="09:15"> 09:15 AM </fw-select-option> <fw-select-option class="hydrated" value="09:30"> 09:30 AM </fw-select-option> <fw-select-option class="hydrated" value="09:45"> 09:45 AM </fw-select-option> <fw-select-option class="hydrated" value="10:00"> 10:00 AM </fw-select-option> <fw-select-option class="hydrated" value="10:15"> 10:15 AM </fw-select-option> <fw-select-option class="hydrated" value="10:30"> 10:30 AM </fw-select-option> <fw-select-option class="hydrated" value="10:45"> 10:45 AM </fw-select-option> <fw-select-option class="hydrated" value="11:00"> 11:00 AM </fw-select-option> <fw-select-option class="hydrated" value="11:15"> 11:15 AM </fw-select-option> <fw-select-option class="hydrated" value="11:30"> 11:30 AM </fw-select-option> <fw-select-option class="hydrated" value="11:45"> 11:45 AM </fw-select-option> <fw-select-option class="hydrated" value="12:00"> 12:00 PM </fw-select-option> <fw-select-option class="hydrated" value="12:15"> 12:15 PM </fw-select-option> <fw-select-option class="hydrated" value="12:30"> 12:30 PM </fw-select-option> <fw-select-option class="hydrated" value="12:45"> 12:45 PM </fw-select-option> <fw-select-option class="hydrated" value="13:00"> 01:00 PM </fw-select-option> <fw-select-option class="hydrated" value="13:15"> 01:15 PM </fw-select-option> <fw-select-option class="hydrated" value="13:30"> 01:30 PM </fw-select-option> <fw-select-option class="hydrated" value="13:45"> 01:45 PM </fw-select-option> <fw-select-option class="hydrated" value="14:00"> 02:00 PM </fw-select-option> <fw-select-option class="hydrated" value="14:15"> 02:15 PM </fw-select-option> <fw-select-option class="hydrated" value="14:30"> 02:30 PM </fw-select-option> <fw-select-option class="hydrated" value="14:45"> 02:45 PM </fw-select-option> <fw-select-option class="hydrated" value="15:00"> 03:00 PM </fw-select-option> <fw-select-option class="hydrated" value="15:15"> 03:15 PM </fw-select-option> <fw-select-option class="hydrated" value="15:30"> 03:30 PM </fw-select-option> <fw-select-option class="hydrated" value="15:45"> 03:45 PM </fw-select-option> <fw-select-option class="hydrated" value="16:00"> 04:00 PM </fw-select-option> <fw-select-option class="hydrated" value="16:15"> 04:15 PM </fw-select-option> <fw-select-option class="hydrated" value="16:30"> 04:30 PM </fw-select-option> <fw-select-option class="hydrated" value="16:45"> 04:45 PM </fw-select-option> <fw-select-option class="hydrated" value="17:00"> 05:00 PM </fw-select-option> <fw-select-option class="hydrated" value="17:15"> 05:15 PM </fw-select-option> <fw-select-option class="hydrated" value="17:30"> 05:30 PM </fw-select-option> <fw-select-option class="hydrated" value="17:45"> 05:45 PM </fw-select-option> <fw-select-option class="hydrated" value="18:00"> 06:00 PM </fw-select-option> <fw-select-option class="hydrated" value="18:15"> 06:15 PM </fw-select-option> <fw-select-option class="hydrated" value="18:30"> 06:30 PM </fw-select-option> <fw-select-option class="hydrated" value="18:45"> 06:45 PM </fw-select-option> <fw-select-option class="hydrated" value="19:00"> 07:00 PM </fw-select-option> <fw-select-option class="hydrated" value="19:15"> 07:15 PM </fw-select-option> <fw-select-option class="hydrated" value="19:30"> 07:30 PM </fw-select-option> <fw-select-option class="hydrated" value="19:45"> 07:45 PM </fw-select-option> <fw-select-option class="hydrated" value="20:00"> 08:00 PM </fw-select-option> <fw-select-option class="hydrated" value="20:15"> 08:15 PM </fw-select-option> <fw-select-option class="hydrated" value="20:30"> 08:30 PM </fw-select-option> <fw-select-option class="hydrated" value="20:45"> 08:45 PM </fw-select-option> <fw-select-option class="hydrated" value="21:00"> 09:00 PM </fw-select-option> <fw-select-option class="hydrated" value="21:15"> 09:15 PM </fw-select-option> <fw-select-option class="hydrated" value="21:30"> 09:30 PM </fw-select-option> <fw-select-option class="hydrated" value="21:45"> 09:45 PM </fw-select-option> <fw-select-option class="hydrated" value="22:00"> 10:00 PM </fw-select-option> <fw-select-option class="hydrated" value="22:15"> 10:15 PM </fw-select-option> <fw-select-option class="hydrated" value="22:30"> 10:30 PM </fw-select-option> <fw-select-option class="hydrated" value="22:45"> 10:45 PM </fw-select-option> <fw-select-option class="hydrated" value="23:00"> 11:00 PM </fw-select-option> <fw-select-option class="hydrated" value="23:15"> 11:15 PM </fw-select-option> <fw-select-option class="hydrated" value="23:30"> 11:30 PM </fw-select-option> <fw-select-option class="hydrated" value="23:45"> 11:45 PM </fw-select-option> </ul> </div> <div class="overlay"></div>`);
expect(el.shadowRoot).toEqualHtml(`<div class="select-container"> <div class="input-container normal"> <div class="input-container-inner"> <input autocomplete="off" placeholder="" type="text"> <span class="dropdown-status-icon"></span> </div> </div> <ul class="dropdown" tabindex="0"> <fw-select-option class="hydrated" value="09:00"> 09:00 AM </fw-select-option> <fw-select-option class="hydrated" value="09:15"> 09:15 AM </fw-select-option> <fw-select-option class="hydrated" value="09:30"> 09:30 AM </fw-select-option> <fw-select-option class="hydrated" value="09:45"> 09:45 AM </fw-select-option> <fw-select-option class="hydrated" value="10:00"> 10:00 AM </fw-select-option> <fw-select-option class="hydrated" value="10:15"> 10:15 AM </fw-select-option> <fw-select-option class="hydrated" value="10:30"> 10:30 AM </fw-select-option> <fw-select-option class="hydrated" value="10:45"> 10:45 AM </fw-select-option> <fw-select-option class="hydrated" value="11:00"> 11:00 AM </fw-select-option> <fw-select-option class="hydrated" value="11:15"> 11:15 AM </fw-select-option> <fw-select-option class="hydrated" value="11:30"> 11:30 AM </fw-select-option> <fw-select-option class="hydrated" value="11:45"> 11:45 AM </fw-select-option> <fw-select-option class="hydrated" value="12:00"> 12:00 PM </fw-select-option> <fw-select-option class="hydrated" value="12:15"> 12:15 PM </fw-select-option> <fw-select-option class="hydrated" value="12:30"> 12:30 PM </fw-select-option> <fw-select-option class="hydrated" value="12:45"> 12:45 PM </fw-select-option> <fw-select-option class="hydrated" value="13:00"> 01:00 PM </fw-select-option> <fw-select-option class="hydrated" value="13:15"> 01:15 PM </fw-select-option> <fw-select-option class="hydrated" value="13:30"> 01:30 PM </fw-select-option> <fw-select-option class="hydrated" value="13:45"> 01:45 PM </fw-select-option> <fw-select-option class="hydrated" value="14:00"> 02:00 PM </fw-select-option> <fw-select-option class="hydrated" value="14:15"> 02:15 PM </fw-select-option> <fw-select-option class="hydrated" value="14:30"> 02:30 PM </fw-select-option> <fw-select-option class="hydrated" value="14:45"> 02:45 PM </fw-select-option> <fw-select-option class="hydrated" value="15:00"> 03:00 PM </fw-select-option> <fw-select-option class="hydrated" value="15:15"> 03:15 PM </fw-select-option> <fw-select-option class="hydrated" value="15:30"> 03:30 PM </fw-select-option> <fw-select-option class="hydrated" value="15:45"> 03:45 PM </fw-select-option> <fw-select-option class="hydrated" value="16:00"> 04:00 PM </fw-select-option> <fw-select-option class="hydrated" value="16:15"> 04:15 PM </fw-select-option> <fw-select-option class="hydrated" value="16:30"> 04:30 PM </fw-select-option> <fw-select-option class="hydrated" value="16:45"> 04:45 PM </fw-select-option> <fw-select-option class="hydrated" value="17:00"> 05:00 PM </fw-select-option> <fw-select-option class="hydrated" value="17:15"> 05:15 PM </fw-select-option> <fw-select-option class="hydrated" value="17:30"> 05:30 PM </fw-select-option> <fw-select-option class="hydrated" value="17:45"> 05:45 PM </fw-select-option> <fw-select-option class="hydrated" value="18:00"> 06:00 PM </fw-select-option> <fw-select-option class="hydrated" value="18:15"> 06:15 PM </fw-select-option> <fw-select-option class="hydrated" value="18:30"> 06:30 PM </fw-select-option> <fw-select-option class="hydrated" value="18:45"> 06:45 PM </fw-select-option> <fw-select-option class="hydrated" value="19:00"> 07:00 PM </fw-select-option> <fw-select-option class="hydrated" value="19:15"> 07:15 PM </fw-select-option> <fw-select-option class="hydrated" value="19:30"> 07:30 PM </fw-select-option> <fw-select-option class="hydrated" value="19:45"> 07:45 PM </fw-select-option> <fw-select-option class="hydrated" value="20:00"> 08:00 PM </fw-select-option> <fw-select-option class="hydrated" value="20:15"> 08:15 PM </fw-select-option> <fw-select-option class="hydrated" value="20:30"> 08:30 PM </fw-select-option> <fw-select-option class="hydrated" value="20:45"> 08:45 PM </fw-select-option> <fw-select-option class="hydrated" value="21:00"> 09:00 PM </fw-select-option> <fw-select-option class="hydrated" value="21:15"> 09:15 PM </fw-select-option> <fw-select-option class="hydrated" value="21:30"> 09:30 PM </fw-select-option> <fw-select-option class="hydrated" value="21:45"> 09:45 PM </fw-select-option> <fw-select-option class="hydrated" value="22:00"> 10:00 PM </fw-select-option> <fw-select-option class="hydrated" value="22:15"> 10:15 PM </fw-select-option> <fw-select-option class="hydrated" value="22:30"> 10:30 PM </fw-select-option> <fw-select-option class="hydrated" value="22:45"> 10:45 PM </fw-select-option> <fw-select-option class="hydrated" value="23:00"> 11:00 PM </fw-select-option> <fw-select-option class="hydrated" value="23:15"> 11:15 PM </fw-select-option> <fw-select-option class="hydrated" value="23:30"> 11:30 PM </fw-select-option> <fw-select-option class="hydrated" value="23:45"> 11:45 PM </fw-select-option> </ul> </div> <div class="overlay"></div>`);
});

it('sets the value when the option is selected', async () => {
Expand Down
1 change: 1 addition & 0 deletions src/styles/variables/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ===//
Expand Down

0 comments on commit 87b0e84

Please sign in to comment.