Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[HAR-147] Search input control #54

Open
wants to merge 35 commits into
base: develop
Choose a base branch
from
Open

[HAR-147] Search input control #54

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
b0aed5d
[HAR-147] Added search input control and docs
stevengunneweg Aug 24, 2018
106aec2
[HAR-147] Updated changelog
stevengunneweg Aug 24, 2018
03e326b
[HAR-147] Fixed build errors
stevengunneweg Aug 27, 2018
83ff63a
Merge remote-tracking branch 'origin/master' into feature/HAR-147-sea…
stevengunneweg Sep 3, 2018
484f42f
Merge remote-tracking branch 'origin/develop' into feature/HAR-147-se…
stevengunneweg Nov 29, 2018
495330c
[HAR-147] Updated search input style and added to docs
stevengunneweg Nov 30, 2018
61c078b
[HAR-147] Changed search-input__button to button element
stevengunneweg Nov 30, 2018
bb99830
[HAR-147] Fixed focus style for actions
stevengunneweg Nov 30, 2018
2ee515f
[HAR-147] minor fix
stevengunneweg Nov 30, 2018
2596784
[HAR-147] Removed max-width 60/70 and updated docs
stevengunneweg Dec 3, 2018
8adaa9e
[HAR-147] Allow action to be text and added some modifiers
stevengunneweg Dec 3, 2018
a0ed5bd
[HAR-147] Added size 90
stevengunneweg Dec 3, 2018
2815b39
[HAR-147] removed
stevengunneweg Dec 3, 2018
35e4dbc
[HAR-147] Renamed container class
stevengunneweg Dec 6, 2018
bbfb9e5
[HAR-147] Resolved several discussions
stevengunneweg Dec 6, 2018
95ec4f0
[HAR-147] reverted rename to narrow
stevengunneweg Dec 6, 2018
ac18dfa
Revert "[HAR-147] reverted rename to narrow"
stevengunneweg Dec 6, 2018
9f4c0c6
[HAR-147] Renamed narrow sizes
stevengunneweg Dec 6, 2018
07b6b97
[HAR-147] Fixed typo
stevengunneweg Dec 12, 2018
4afe308
[HAR-147] renamed rounded modifier
stevengunneweg Dec 12, 2018
46f00b9
[HAR-147] Made icons overridable
stevengunneweg Dec 12, 2018
bbf5f40
[HAR-147] Removed sass link in doc
stevengunneweg Dec 12, 2018
40d35aa
[HAR-147] Added titles to examples and renamed captures
stevengunneweg Dec 12, 2018
2879c9d
Merge remote-tracking branch 'origin/develop' into feature/HAR-147-se…
stevengunneweg Dec 12, 2018
c860ce0
[HAR-147] Removed duplicate headers
stevengunneweg Dec 12, 2018
2180943
Merge remote-tracking branch 'origin/develop' into feature/HAR-147-se…
stevengunneweg Jan 3, 2019
69fb251
[HAR-147] Updated docs
stevengunneweg Jan 3, 2019
f14250b
Merge remote-tracking branch 'origin/develop' into feature/HAR-147-se…
Jan 4, 2019
36639e0
Merge remote-tracking branch 'origin/develop' into feature/HAR-147-se…
Jan 10, 2019
a5dbf2a
Merge remote-tracking branch 'origin/develop' into feature/HAR-147-se…
stevengunneweg Mar 1, 2019
4712d35
[HAR-147] Clean up variations and removed style that we don't want to…
stevengunneweg Mar 1, 2019
a1fe047
[HAR-147] Added loading state
stevengunneweg Mar 1, 2019
e980aa7
[HAR-147] Removed loading state and fixed some other stuff
stevengunneweg Mar 1, 2019
fd3a0d1
[HAR-147] removed rounded before it is described
stevengunneweg Mar 1, 2019
bfb5885
[HAR-147] Renamed search button to search-action
stevengunneweg Mar 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@

* Add search input control

# 1.18.2

## Bugfix
Expand Down
1 change: 1 addition & 0 deletions scss/controls/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
@import 'input-stepper';
@import 'text-input';
@import 'password-input';
@import 'search-input';
264 changes: 264 additions & 0 deletions scss/controls/search-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,264 @@
$search-input-button-gap: $spacing * 2 !default;
$search-input-border: $input-border !default;
$search-input-border-radius: $border-radius-90 !default;
$search-input-button-background-color: $input-background-color !default;

.search-input {
position: relative;
display: flex;
width: 100%;
height: $control-size-100;
color: $input-color;
font-size: $input-font-size;
line-height: $input-line-height;

.search-input--90 & {
stevengunneweg marked this conversation as resolved.
Show resolved Hide resolved
height: $control-size-90;
}
}

.search-input--max-width-90 {
stevengunneweg marked this conversation as resolved.
Show resolved Hide resolved
max-width: $spacing * 40;
}

.search-input--max-width-80 {
stevengunneweg marked this conversation as resolved.
Show resolved Hide resolved
max-width: $spacing * 32;
}

.search-input__container {
position: relative;
display: flex;
justify-content: stretch;
width: 100%;
height: $control-size-100;
border: $search-input-border;
border-top-left-radius: $search-input-border-radius;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$input-border-radius?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is made so the search-input can have a custom border radius, by default it uses $input-border-radius

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would not add another variable for this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not? The search input will often not reside next to other inputs, like in a form, but inside a header for example. With the extra variable it can be adjusted to the header style.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we need to use the $input-border-radius since we don't want to provide to many different input variations.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we could remove the !default but I do think it has its benefits to declare this value at the top of the file.
e.g.:

  • easily change it in one position for the whole component.
  • quickly find where the variable is used.
  • optionally allow the value to be overridden.

border-bottom-left-radius: $search-input-border-radius;
background-color: $input-background-color;

&:last-child {
border-radius: $search-input-border-radius;
}

.search-input--button-seperated & {
stevengunneweg marked this conversation as resolved.
Show resolved Hide resolved
border-radius: $search-input-border-radius;
}

.search-input--rounded-ends & {
stevengunneweg marked this conversation as resolved.
Show resolved Hide resolved
border-top-left-radius: $control-size-100 / 2;
border-bottom-left-radius: $control-size-100 / 2;

&:last-child {
border-radius: $control-size-100 / 2;
}
}

.search-input--icon & {
padding-left: $control-size-100;

&::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: $control-size-100;
height: $control-size-100;
background-image: url(get-svg-uri($icon-search-bold, $color-ui-400));
background-position: center center;
background-size: $spacing * 2;
background-repeat: no-repeat;
content: '';
pointer-events: none;
}
}

.search-input--90 & {
height: $control-size-90;
}
}

.search-input__input {
position: relative;
padding-top: (($control-size-100 - ($input-line-height * $input-font-size)) / 2);
padding-right: 0;
padding-bottom: (($control-size-100 - ($input-line-height * $input-font-size)) / 2);
padding-left: $spacing * 1.5;
width: 100%;
height: $control-size-100 - 2px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • $input-border-size

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The variable $input-border-size does not exist (yet)

border: none;
border-radius: 0;
background-color: transparent;
color: $input-color;
font-size: $input-font-size;
line-height: $input-line-height;
transition: $input-transition;
appearance: none;

&:focus {
box-shadow: none;
}

&:disabled {
opacity: $opacity-disabled;
pointer-events: none;
}

&::-ms-value {
background: none; // NOTE To remove blue background on IE10+ when selected.
color: $color-text; // NOTE To make sure the text is readable on a light background from item-pop-up-menu when selected and input is not checked.
}

&::placeholder {
color: $color-text-80;
opacity: $opacity-100;
}

&:-webkit-autofill {
padding-right: $spacing * 1.5;
border: $input-autofill-border;
background-color: $input-autofill-background-color;
box-shadow: $input-autofill-box-shadow, $input-autofill-box-shadow-background;
}

.search-input--90 & {
padding: ($spacing * 0.75) $spacing * 1.5;
height: $control-size-90 - 2px;
font-size: $font-size-100;
}

.search-input--rounded-ends & {
padding-left: $control-size-100 / 2;
}

.search-input--90.search-input--rounded-ends & {
padding-left: $control-size-90 / 2;
}

.search-input--icon & {
padding-left: 0;
}
}

.search-input__toolbar {
flex: 0 0 auto;
display: block;

&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
content: '';
pointer-events: none;

.search-input__input:focus ~ & {
display: block;
border: $input-focus-border;
box-shadow: $input-focus-box-shadow;

.search-input--rounded-ends & {
border-radius: $control-size-100 / 2;
}

.search-input__container:not(:last-child) & {
border-top-right-radius: $search-input-border-radius;
border-bottom-right-radius: $search-input-border-radius;
}
}

.search-input__input:-webkit-autofill:focus ~ & {
border: $input-autofill-focus-border;
box-shadow: $input-autofill-focus-box-shadow, $input-autofill-focus-box-shadow-background;
}
}
}

.search-input__action {
position: relative;
display: inline-block;
padding: $spacing ($spacing * 2);
min-width: $control-size-100;
height: 100%;
border-radius: $search-input-border-radius;
background-position: center center;
background-size: $spacing * 2;
stevengunneweg marked this conversation as resolved.
Show resolved Hide resolved
background-repeat: no-repeat;
vertical-align: middle;
cursor: default;

&:first-child::before {
position: absolute;
top: 0;
right: 100%;
bottom: 0;
width: $spacing;
background: linear-gradient(to right, transparent 0%, $color-harbour-white 100%);
content: '';
}

.search-input--90 & {
min-width: $control-size-90;
}

.search-input__action--clear ~ &:not(.search-input__action--clear):not(.search-input__action--search),
.search-input__action--search ~ &:not(.search-input__action--clear):not(.search-input__action--search) {
padding-left: $spacing * 0.5;
}

.search-input--rounded-ends .search-input__container:last-child &:last-child {
border-top-right-radius: $control-size-100 / 2;
border-bottom-right-radius: $control-size-100 / 2;
}
}

.search-input__action--clear {
background-image: url(get-svg-uri($icon-cross, $color-text-300));
}

.search-input__action--search {
background-image: url(get-svg-uri($icon-search-bold, $color-text-300));
}

.search-input__button {
display: flex;
justify-content: center;
align-items: center;
padding: $spacing ($spacing * 2);
min-width: $control-size-100;
border: $search-input-border;
border-left: none;
border-top-right-radius: $search-input-border-radius;
border-bottom-right-radius: $search-input-border-radius;
background: $search-input-button-background-color;
stevengunneweg marked this conversation as resolved.
Show resolved Hide resolved
cursor: default;
user-select: none;

.search-input--90 & {
min-width: $control-size-90;
}

.search-input--button-seperated & {
stevengunneweg marked this conversation as resolved.
Show resolved Hide resolved
margin-left: $search-input-button-gap;
border-left: $input-border;
border-radius: $search-input-border-radius;
}

.search-input--rounded-ends & {
border-top-right-radius: $control-size-100 / 2;
border-bottom-right-radius: $control-size-100 / 2;
}
}

.search-input__button--primary {
background: $color-primary;
stevengunneweg marked this conversation as resolved.
Show resolved Hide resolved
}

.search-input__button--secondary {
background: $color-secondary;
}

.search-input__button--tertiary {
background: $color-tertiary;
}
3 changes: 3 additions & 0 deletions scss/icons/harbour-icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,6 @@ $icon-minus: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect
$icon-plus: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon fill="#000000" points="14 14 14 0 18 0 18 14 32 14 32 18 18 18 18 32 14 32 14 18 0 18 0 14"/></svg>' !default;
$icon-check: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><polygon fill="#000000" points="12 27.8 0 15.8 2.8 13 12 22.2 29.2 5 32 7.8"/></svg>' !default;
$icon-exclamation: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#000000" d="M14,0 L18,0 L18,25 L14,25 L14,0 Z M14,28 L18,28 L18,32 L14,32 L14,28 Z"/></svg>' !default;
$icon-search-bold: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#000000" d="M22.3,18.1 L32,27.8 L27.8,32 L18.1,22.3 C16.3,23.4 14.2,24 12,24 C5.4,24 0,18.6 0,12 C0,5.4 5.4,0 12,0 C18.6,0 24,5.4 24,12 C24,14.2 23.4,16.3 22.3,18.1 Z M12,19 C15.9,19 19,15.9 19,12 C19,8.1 15.9,5 12,5 C8.1,5 5,8.1 5,12 C5,15.9 8.1,19 12,19 Z"/></svg>' !default;
$icon-cross-regular: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="#000000" d="M21 16.5L31.8 27.3C32.1 27.6 32.1 28.1 31.8 28.5L28.5 31.8C28.1 32.1 27.7 32.1 27.3 31.8L16.6 21C16.2 20.7 15.8 20.7 15.4 21L4.7 31.8C4.3 32.1 3.9 32.1 3.5 31.8L0.2 28.5C-0.1 28.1-0.1 27.6 0.2 27.3L11 16.5C11.3 16.2 11.3 15.7 11 15.4L0.2 4.7C-0.1 4.4-0.1 3.9 0.2 3.5L3.6 0.2C3.9-0.1 4.4-0.1 4.7 0.2L15.4 11C15.8 11.3 16.2 11.3 16.6 11L27.3 0.2C27.6-0.1 28.1-0.1 28.4 0.2L31.8 3.5C32.1 3.9 32.1 4.4 31.8 4.7L21 15.4C20.7 15.7 20.7 16.2 21 16.5Z"/></svg>';
$icon-cross: $icon-cross-regular;
stevengunneweg marked this conversation as resolved.
Show resolved Hide resolved
Loading