Skip to content

Commit

Permalink
feat: consolidate input and input group components
Browse files Browse the repository at this point in the history
  • Loading branch information
jasonwoodland committed Aug 9, 2022
1 parent 3de1483 commit 74a768e
Show file tree
Hide file tree
Showing 34 changed files with 228 additions and 547 deletions.
24 changes: 0 additions & 24 deletions assets/styles/base.less
Original file line number Diff line number Diff line change
Expand Up @@ -733,34 +733,10 @@ button {
}
}

//Inputs
.input {
&:extend(.input-bg);
&:extend(.font-primary);
box-shadow: none !important;
&:active,
&:focus {
background: @semitransparent-lightest-gradient !important;
}
}

::placeholder {
color: @text-muted !important;
}

.is-primary.input,
.is-dark.input {
&:extend(.input-bg);
&:extend(.font-primary);
border-color: transparent;

&:active,
&:focus {
border: none;
outline: none;
}
}

//Search Input
.search-query-highlight {
&:extend(.background-flair);
Expand Down
75 changes: 44 additions & 31 deletions components/interactables/Input/Input.html
Original file line number Diff line number Diff line change
@@ -1,36 +1,49 @@
<div>
<TypographyLabel
class="input-label"
v-if="labelText.length"
:text="labelText"
/>
<div
:class="{'search-box': true, 'right-icon': deleteIcon && internalText.length}"
>
<input
v-model="internalText"
class="input"
:class="{invalid : invalid, [`is-${size} is-${type}`]: true}"
:readonly="readonly"
:disabled="disabled"
:type="inputKind"
:placeholder="placeholder"
@input="update"
ref="input"
:maxLength="maxLength"
:minLength="minLength"
@keydown.space="preventLeadingSpace"
@paste="preventEmptyPaste"
@keydown.enter="submitEnter"
@focus="$emit('focus', $event)"
@blur="$emit('blur', $event)"
/>
<div class="input-group">
<TypographyLabel v-if="label" class="input-label" :text="label" />
<div class="input-outer">
<div class="input-inner">
<input
ref="input"
class="input"
:class="[
`font-size-${size} is-${color}`,
{
'show-clear-button': showClear,
'is-danger': error || invalid
}
]"
:value="value"
:type="type"
:readonly="readonly"
:placeholder="placeholder"
:minLength="minLength"
:maxLength="maxLength"
:disabled="disabled"
@keydown.enter="handleSubmit"
@input="handleInput"
data-cy="input-group"
/>
<button
v-if="showClear && !isEmpty"
class="clear-button"
@click="clearInput"
>
<delete-icon size="1x" />
</button>
</div>
<button
v-if="deleteIcon && internalText.length"
class="search-clear"
@click="clearSearch"
v-if="$slots.default"
class="button"
:class="[`font-size-${size} is-${color}`, {disabled: disabled}]"
@click="handleSubmit"
data-cy="submit-input"
>
<delete-icon size="1x" />
<UiLoadersSpinner v-if="loading" spinning />
<slot v-else></slot>
</button>
</div>
<span v-if="showLimit" class="char-limit">
{{ text.length }}/{{ maxLength }}
</span>
<TypographyError v-if="error" class="error" :text="error" small />
</div>
104 changes: 61 additions & 43 deletions components/interactables/Input/Input.less
Original file line number Diff line number Diff line change
@@ -1,51 +1,69 @@
.input-label {
text-align: left;
}
.is-full-width {
&:extend(.full-width);
}
.search-box {
&.right-icon {
input {
padding-right: 34px;
.input-group {
display: flex;
flex-direction: column;
width: 100%;

.input-outer {
display: flex;
align-items: stretch;
flex-grow: 1;

.input-inner {
position: relative;
display: flex;
flex-grow: 1;

.input {
flex-grow: 1;
padding: @light-spacing;
&:extend(.input-bg);
&:extend(.round-corners);
box-shadow: none;
color: @white;

&.show-clear-button {
padding-right: 2rem;
}
}

.clear-button {
position: absolute;
inset: 0 0 0 auto;
font-size: @tiny-icon-size;
display: flex;
align-items: center;
justify-content: center;
padding: @light-spacing;
color: @text-muted;
}

&:not(:last-child) .input {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
}
}
.search-clear {
&:extend(.font-primary);
&:focus {
background: @background;

.button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
position: absolute;
font-size: @tiny-icon-size;
top: 0;
right: 0;
width: 34px;
height: @full;
background: transparent;
border-color: transparent;
cursor: pointer;
&:extend(.first-layer);
}
position: relative;

.input {
.char-limit {
float: right;
margin-right: @light-spacing;
font-size: @mini-text-size;
font-family: @secondary-font;
&.is-normal {
height: 2.3rem;
}
&:disabled {
&::placeholder {
/* without !important it does not work */
color: grey !important;
}
}
&.invalid {
border: 1px solid @red;
}
&:extend(.font-muted);
margin-left: auto;
}

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
.error {
margin-top: @light-spacing;
}

// TODO: remove after removing bulma
.is-primary:not(.is-danger) {
border-color: transparent;
}
}
Loading

0 comments on commit 74a768e

Please sign in to comment.