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

feat(text-input): add experimental text-input #1074

Merged
merged 26 commits into from
Sep 21, 2018
Merged

feat(text-input): add experimental text-input #1074

Changes from 1 commit
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
2547bc3
feat(text-input): add experimental text-input
alisonjoseph Sep 9, 2018
8097044
Merge branch 'master' into text-input-x
alisonjoseph Sep 11, 2018
b6c9b13
Merge branch 'master' into text-input-x
tw15egan Sep 13, 2018
c9a64b7
Merge branch 'master' into text-input-x
aledavila Sep 14, 2018
b1d08ac
chore: merge
alisonjoseph Sep 17, 2018
ed1c3f4
chore: merge
alisonjoseph Sep 17, 2018
5769b86
chore: test
alisonjoseph Sep 17, 2018
afe0c88
chore: test
alisonjoseph Sep 17, 2018
9e31963
chore: add lockfile back
alisonjoseph Sep 17, 2018
03164c2
Merge branch 'master' into text-input-x
alisonjoseph Sep 18, 2018
dfbe7c5
fix: update border color
alisonjoseph Sep 18, 2018
1b0e54a
chore: merge
alisonjoseph Sep 18, 2018
a2f10be
feat: add error icon to text input
alisonjoseph Sep 18, 2018
12f0004
chore: convert svg
alisonjoseph Sep 18, 2018
a2dcaf0
chore: remove commented out code
alisonjoseph Sep 18, 2018
62778bc
chore: turn off feature flag
alisonjoseph Sep 18, 2018
e69435e
feat: fix text-input styles, add disabled styles
alisonjoseph Sep 19, 2018
ab238d3
chore: fix duplicate IDs
alisonjoseph Sep 19, 2018
76b2195
chore: add comments to code
alisonjoseph Sep 19, 2018
39f07c3
chore: add code comments
alisonjoseph Sep 19, 2018
a924ab6
chore: update scripts in package json
alisonjoseph Sep 19, 2018
04eb88f
chore: merge
alisonjoseph Sep 20, 2018
8405f01
Merge branch 'master' into text-input-x
tw15egan Sep 20, 2018
251a072
chore: color updates
alisonjoseph Sep 20, 2018
9f400aa
chore: merge
alisonjoseph Sep 20, 2018
28f4e87
Merge branch 'master' into text-input-x
alisonjoseph Sep 21, 2018
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
81 changes: 80 additions & 1 deletion src/components/text-input/_text-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
@import '../../globals/scss/import-once';
@import '../form/form';

@include exports('text-input') {
@mixin text-input {
.#{$prefix}--text-input {
@include reset;
@include font-family;
Expand Down Expand Up @@ -90,3 +90,82 @@
}
}
}

@mixin text-input--experimental {
.#{$prefix}--text-input {
@include reset;
@include typescale('zeta');
background-color: $field-01;
width: 100%;
height: rem(40px);
padding: 0 $spacing-xl 0 $spacing-md;
color: $text-02;
border: none;
Copy link
Member

Choose a reason for hiding this comment

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

There should be a 1px border on all sides with $ui-04 as the border color
image

Copy link
Member Author

Choose a reason for hiding this comment

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

updated

}

.#{$prefix}--text-input ~ .#{$prefix}--label {
@include typescale('omega');
padding: 0;
font-weight: 400;
display: block;
padding: $spacing-sm 0 $spacing-3xl 0;
margin: 0;
}

.#{$prefix}--text-input:required ~ .#{$prefix}--label::after {
content: ' *';
}

.#{$prefix}--text-input::-webkit-input-placeholder {
color: $text-03;
}

.#{$prefix}--text-input:hover {
color: $text-01;
outline: 1px solid $brand-01;
outline-offset: -1px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Perhaps we could add our standard transition mixin? For both focus and hover

}

.#{$prefix}--text-input:focus,
.#{$prefix}--text-input:active {
outline: 2px solid $brand-01;
outline-offset: -2px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Seems like IE11 doesn't support outline-offset, so I would just make sure this looks okay in that browser (My VM is not working atm 😢 )

Copy link
Member Author

Choose a reason for hiding this comment

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

oh good call. will check 😞

Copy link
Member Author

Choose a reason for hiding this comment

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

It just shows the outline on the outside instead of the inside, theres not really an easy way to adjust this so I think its fine.
screen shot 2018-09-19 at 11 56 50 am

Copy link
Collaborator

Choose a reason for hiding this comment

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

FIne by me!

}

.#{$prefix}--text-input:disabled {
cursor: not-allowed;
pointer-events: none;
color: $text-03;
}
alisonjoseph marked this conversation as resolved.
Show resolved Hide resolved

.#{$prefix}--text-input:disabled ~ .#{$prefix}--label {
pointer-events: none;
}

.#{$prefix}--text-input[data-invalid],
.#{$prefix}--text-input:invalid {
Copy link
Member

@aagonzales aagonzales Sep 18, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

What invalid state should look like according to duo.
image

  • no *
  • font-weight: regular/400
  • font-color: support-01
  • add error icon to the right inside the field
  • invalid message should only be 4px from the bottom of the field

outline: 1px solid $support-01;
Copy link
Member

Choose a reason for hiding this comment

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

outline should be 2px thick

Copy link
Member Author

Choose a reason for hiding this comment

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

updated

outline-offset: -2px;
box-shadow: none;
}

.#{$prefix}--text-input[data-invalid] ~ .#{$prefix}--label,
.#{$prefix}--text-input:invalid ~ .#{$prefix}--label {
color: $support-01;
}

.#{$prefix}--text-input:disabled,
.#{$prefix}--text-input[data-invalid],
.#{$prefix}--text-input:invalid,
.#{$prefix}--text-input[data-loading] {
padding-right: $spacing-3xl;
}
}

@include exports('text-input') {
@if feature-flag-enabled('components-x') {
@include text-input--experimental;
} @else {
@include text-input;
}
}