Skip to content

Commit

Permalink
fix(input): disabled style and small size fixes (#389)
Browse files Browse the repository at this point in the history 
* fix(icon): safari overflow issue fixed

* fix(input): various visual fixes for input

* disabled style fixed
* small size added
* vertical alignments fixed
* internal component structure refactored for creating extra flexibility
for upcoming features (like trailing/leading text), better reliability and
maintainability

* fix(input): placeholder color fix

* ci: extra padding has been added for chromatic

* fix(input): label max width with icon

* ci: clean forgotten style

* fix(input): positioning issues are fixed

* fix(input): variable name fix

* docs(input): small size added for storybook canvas

* docs(input): label fixed attribute in canvas fix
  • Loading branch information
@muratcorlu
muratcorlu authored Jan 27, 2023
1 parent c874c5d commit bd50362
Show file tree
Hide file tree
Showing 7 changed files with 270 additions and 141 deletions.
27 changes: 26 additions & 1 deletion .storybook/preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,33 @@ const withNoAnimationOnChromaticLayout = makeDecorator({
}
});


const extraPaddingForChromatic = makeDecorator({
name: 'extraPaddingForChromatic',
parameterName: 'extraPaddingForChromatic',
skipIfNoParametersOrOptions: true,
wrapper: (getStory, context) => {
const story = getStory(context);
const decoratedStory = html`
${isChromatic() ? html`<style>
.chromatic-wrapper {
padding: 25px;
}
</style>` : html``}
<div class="chromatic-wrapper">
${ story }
</div>
`;

// return the modified story
return decoratedStory;
}
});

export const decorators = [
withNoAnimationOnChromaticLayout
withNoAnimationOnChromaticLayout,
extraPaddingForChromatic
]

export const parameters = {
Expand Down
13 changes: 9 additions & 4 deletions src/components/icon/bl-icon.css
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
:host {
display: inline-block;
position: relative;
}

:host div {
display: flex;
align-items: stretch;
width: 1em;
height: 1em;
min-width: 1em;
min-height: 1em;
overflow: hidden;
transform: translateZ(0);
}

:host div,
:host svg {
width: 100%;
height: 100%;
width: 1em;
height: 1em;
}
212 changes: 125 additions & 87 deletions src/components/input/bl-input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,111 +2,162 @@
display: inline-block;
width: 200px;
position: relative;
}

.wrapper {
--border-color: var(--bl-color-border);
--icon-color: var(--bl-color-content-tertiary);
--text-color: var(--bl-color-content-primary);
--height: var(--bl-size-2xl);
--input-font: var(--bl-font-body-text-2);
--line-height: var(--bl-font-body-text-2-line-height);
--icon-size: var(--line-height);
--padding-vertical: calc((var(--height) - var(--line-height)) / 2);
--padding-horizontal: var(--bl-size-xs);

--bl-input-padding-vertical: var(--bl-size-2xs);
--bl-input-padding-horizontal: var(--bl-size-xs);
--bl-input-border-color: var(--bl-color-border);
--bl-input-icon-color: var(--bl-color-content-tertiary);
--bl-input-text-color: var(--bl-color-content-primary);
--bl-input-height: var(--bl-size-2xl);
display: flex;
flex-direction: column;
position: relative;
gap: var(--bl-size-3xs);
}

input {
outline: none;
.wrapper:focus-within {
--border-color: var(--bl-color-primary);
--icon-color: var(--bl-color-primary);
}

.wrapper.dirty.invalid {
--border-color: var(--bl-color-danger);
--icon-color: var(--bl-color-danger);
}

:host([size='large']) .wrapper {
--height: var(--bl-size-3xl);
--padding-vertical: var(--bl-size-xs);
--padding-horizontal: var(--bl-size-m);
}

:host([size='small']) .wrapper {
--height: var(--bl-size-xl);
--input-font: var(--bl-font-body-text-3);
--padding-vertical: var(--bl-size-3xs);
--icon-size: var(--bl-font-body-text-3-line-height);
}

label {
position: absolute;
top: var(--padding-vertical);
left: var(--padding-horizontal);
right: var(--padding-horizontal);
max-width: max-content;
transition: all ease-in 0.2s;
pointer-events: none;
font: var(--input-font);
color: var(--bl-color-content-tertiary);
padding: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.input-wrapper {
--border-size: 1px;

display: flex;
box-sizing: border-box;
height: var(--bl-input-height);
border: solid 1px var(--bl-input-border-color);
width: 100%;
font: var(--bl-font-title-3-regular);
padding: 0 var(--bl-input-padding-horizontal);
margin: 0;
gap: var(--padding-vertical);
height: var(--height);
border: solid var(--border-size) var(--border-color);
padding: 0 calc(var(--padding-horizontal) - var(--border-size));
border-radius: 4px;
color: var(--bl-input-text-color);
}

bl-icon {
position: absolute;
top: var(--bl-input-padding-vertical);
right: var(--bl-input-padding-horizontal);
font-size: var(--bl-size-m);
z-index: 1;
color: var(--bl-input-icon-color);
input {
width: 100%;
align-self: stretch;
outline: 0;
border: 0;
padding: 0;
font: var(--input-font);
color: var(--text-color);
-webkit-text-fill-color: var(--text-color);
background-color: transparent;
}

input:focus {
--bl-input-border-color: var(--bl-color-primary);
.icon {
flex-basis: var(--icon-size);
align-self: center;
height: var(--icon-size);
}

:host([label-fixed]) bl-icon {
top: calc(var(--bl-input-padding-vertical) + var(--bl-size-m));
.wrapper:not(.has-icon) .icon {
display: none;
}

.hint {
display: none;
font: var(--bl-font-body-text-3);
padding: 0 var(--padding-horizontal);
}

.hint p {
padding: 0;
margin: 0;
}

input:focus ~ bl-icon {
--bl-input-icon-color: var(--bl-color-primary);
bl-icon {
font-size: var(--icon-size);
color: var(--icon-color);
height: var(--icon-size);
}

:host ::placeholder {
::placeholder {
color: var(--bl-color-content-tertiary);
-webkit-text-fill-color: var(--bl-color-content-tertiary);
}

:host([label]) ::placeholder {
color: transparent;
-webkit-text-fill-color: transparent;
transition: color ease-out 0.4s;
}

:host input:focus::placeholder,
:host([label-fixed]) ::placeholder {
:host([label-fixed]) ::placeholder,
:host .wrapper:focus-within ::placeholder {
color: var(--bl-color-content-tertiary);
-webkit-text-fill-color: var(--bl-color-content-tertiary);
}

input:disabled {
background-color: var(--bl-color-primary-background);

--bl-input-text-color: var(--bl-color-content-tertiary);
}
:host([disabled]) .input-wrapper {
cursor: not-allowed;
background-color: var(--bl-color-secondary-background);

input.dirty:invalid {
--bl-input-border-color: var(--bl-color-danger);
--text-color: var(--bl-color-content-passive);
}

input.has-icon {
padding-right: calc(var(--bl-size-xs) * 2 + var(--bl-size-m));
}

.error-icon,
.invalid-text {
display: none;
input:disabled {
cursor: not-allowed;
}

label {
position: absolute;
top: var(--bl-input-padding-vertical);
left: var(--bl-input-padding-horizontal);
transition: all ease-in 0.2s;
pointer-events: none;
font: var(--bl-font-title-3-regular);
color: var(--bl-color-content-tertiary);
padding: 0;
}
:where(.wrapper:focus-within, .wrapper.has-value) label {
--label-padding: var(--bl-size-3xs);

:where(input:focus, input.has-value) ~ label {
top: 0;
left: var(--bl-size-2xs);
left: calc(var(--padding-horizontal) - var(--label-padding));
transform: translateY(-50%);
font: var(--bl-font-caption);
color: var(--bl-color-content-secondary);
padding: 0 var(--bl-size-3xs);
padding: 0 var(--label-padding);
background-color: var(--bl-color-primary-background);
pointer-events: initial;
}

:host([label-fixed]) {
padding-top: var(--bl-size-m);
:where(.has-icon:not(:focus-within), .has-icon:not(.has-value)) label {
right: calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical));
}

:host([label-fixed]) label {
top: 0;
left: 0;
position: static;
transition: none;
transform: none;
pointer-events: initial;
Expand All @@ -115,51 +166,38 @@ label {
padding: 0;
}

.dirty:invalid ~ label {
color: var(--bl-color-danger);
.error-icon,
.invalid-text {
display: none;
}

.dirty.invalid label,
.invalid-text,
.help-text {
font: var(--bl-font-title-4-regular);
padding: var(--bl-size-3xs) var(--bl-input-padding-horizontal);
margin: 0;
}

.invalid-text {
.error-icon {
color: var(--bl-color-danger);
}

.help-text {
color: var(--bl-color-content-secondary);
}

.error-icon {
color: var(--bl-color-danger);
:host([help-text]) .hint,
.dirty.invalid .hint {
display: block;
}

.dirty:invalid ~ .invalid-text {
.dirty.invalid .invalid-text {
display: block;
}

.dirty:invalid ~ .help-text {
.dirty.invalid .help-text {
display: none;
}

.dirty:invalid ~ .error-icon {
.dirty.invalid .error-icon {
display: inline-block;
}

.dirty:invalid ~ .custom-icon ~ .error-icon {
.dirty.invalid .custom-icon ~ .error-icon {
display: none;
}

.dirty:invalid ~ .custom-icon {
--bl-input-icon-color: var(--bl-color-danger);
}

:host([size='large']) {
--bl-input-height: var(--bl-size-3xl);
--bl-input-padding-vertical: var(--bl-size-xs);
--bl-input-padding-horizontal: var(--bl-size-m);
}
Loading

0 comments on commit bd50362

Please sign in to comment.