Skip to content

Commit

Permalink
fix(text-input): position experimental password visibility toggle (#1735
Browse files Browse the repository at this point in the history 
)

* fix(text-input): style experimental password toggle

* fix(text-input): add prefix to password visibility toggle SVGs

* refactor(text-input): avoid data attribute selector
  • Loading branch information
@emyarod @jnm2377
emyarod authored and jnm2377 committed Feb 11, 2019
1 parent 2107ac0 commit 2be09fa
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 11 deletions.
42 changes: 42 additions & 0 deletions src/components/text-input/_text-input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,36 @@
&:active {
@include focus-outline('outline');
}

&-wrapper svg[hidden] {
display: none;
}

&[type='text'] + .#{$prefix}--text-input--password__visibility,
&[type='password'] + .#{$prefix}--text-input--password__visibility {
top: rem(-28px);
right: rem(12px);
display: flex;
justify-content: center;
align-self: flex-end;
align-items: center;
height: rem(16px);
width: rem(16px);
padding: 0;
margin-bottom: -1rem;
border: 0;
background: none;
cursor: pointer;
outline: inherit;

svg {
fill: $brand-01;

&:hover {
fill: $hover-primary;
}
}
}
}

.#{$prefix}--text-input::-webkit-input-placeholder {
Expand All @@ -161,6 +191,18 @@
background-position: right 8px bottom 50%;
}

.#{$prefix}--text-input:disabled + .#{$prefix}--text-input--password__visibility svg {
opacity: 0.5;
cursor: not-allowed;
}

.#{$prefix}--text-input:disabled + .#{$prefix}--text-input--password__visibility,
.#{$prefix}--text-input[data-invalid] + .#{$prefix}--text-input--password__visibility,
.#{$prefix}--text-input:invalid + .#{$prefix}--text-input--password__visibility,
.#{$prefix}--text-input[data-loading] + .#{$prefix}--text-input--password__visibility {
right: rem(32px);
}

//-----------------------------
// Disabled
//-----------------------------
Expand Down
14 changes: 7 additions & 7 deletions src/components/text-input/text-input.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@
placeholder="Placeholder text" data-toggle-password-visibility>
<button class="{{@root.prefix}}--text-input--password__visibility {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--icon__bottom" aria-label="Show password">
{{#if @root.featureFlags.componentsX}}
{{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') }}
{{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') hidden="true" }}
{{ carbon-icon 'View16' class=(add @root.prefix '--icon--visibility-on') }}
{{else}}
<svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
<svg class="{{@root.prefix}}--icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
<path d="M11.846 3.45L15.293.007 16 .714l-3.284 3.281c1.261.902 2.377 2.212 3.347 3.93C14.02 11.642 11.333 13.5 8 13.5c-1.392 0-2.667-.324-3.822-.973L.703 16l-.706-.708 3.323-3.32C2.071 11.042.976 9.694.035 7.924 2.012 4.308 4.667 2.5 8 2.5c1.395 0 2.677.317 3.846.95zm-6.928 8.338c.944.477 1.97.712 3.082.712 2.795 0 5.076-1.483 6.907-4.568-.866-1.417-1.833-2.486-2.91-3.219l-1.55 1.55a3 3 0 0 1-4.185 4.182l-1.344 1.343zm-.882-.533l1.518-1.517A3 3 0 0 1 9.74 5.556l1.364-1.363A7.02 7.02 0 0 0 8 3.5c-2.798 0-5.047 1.439-6.819 4.432.842 1.465 1.792 2.568 2.855 3.323zm2.948-1.532a2 2 0 0 0 2.74-2.738l-2.74 2.738zm-.707-.707l2.74-2.738a2 2 0 0 0-2.74 2.738z"></path>
</svg>
<svg class="icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
<svg class="{{@root.prefix}}--icon--visibility-on" width="16" height="16" viewBox="0 0 16 11">
<path d="M8 7.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 1c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z"></path>
<path d="M8 10c2.8 0 5.1-1.5 6.9-4.6C13.1 2.5 10.8 1 8 1 5.2 1 3 2.4 1.2 5.4 2.9 8.6 5.2 10 8 10zM8 0c3.3 0 6 1.8 8.1 5.4C14 9.2 11.3 11 8 11S2 9.2 0 5.5C2 1.9 4.6 0 8 0z"></path>
</svg>
Expand All @@ -39,7 +39,7 @@
placeholder="Placeholder text" data-toggle-password-visibility>
<button class="{{@root.prefix}}--text-input--password__visibility {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--icon__bottom" aria-label="Show password">
{{#if @root.featureFlags.componentsX}}
{{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') }}
{{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') hidden="true" }}
{{ carbon-icon 'View16' class=(add @root.prefix '--icon--visibility-on') }}
{{else}}
<svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
Expand Down Expand Up @@ -69,7 +69,7 @@
placeholder="Placeholder text" data-toggle-password-visibility>
<button class="{{@root.prefix}}--text-input--password__visibility {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--icon__bottom" aria-label="Show password">
{{#if @root.featureFlags.componentsX}}
{{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') }}
{{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') hidden="true" }}
{{ carbon-icon 'View16' class=(add @root.prefix '--icon--visibility-on') }}
{{else}}
<svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
Expand All @@ -96,7 +96,7 @@
placeholder="Placeholder text" data-toggle-password-visibility>
<button class="{{@root.prefix}}--text-input--password__visibility {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--icon__bottom" aria-label="Show password">
{{#if @root.featureFlags.componentsX}}
{{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') }}
{{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') hidden="true" }}
{{ carbon-icon 'View16' class=(add @root.prefix '--icon--visibility-on') }}
{{else}}
<svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
Expand All @@ -121,7 +121,7 @@
placeholder="Placeholder text" data-toggle-password-visibility disabled>
<button class="{{@root.prefix}}--text-input--password__visibility {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--icon__bottom" aria-label="Show password">
{{#if @root.featureFlags.componentsX}}
{{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') }}
{{ carbon-icon 'ViewOff16' class=(add @root.prefix '--icon--visibility-off') hidden="true" }}
{{ carbon-icon 'View16' class=(add @root.prefix '--icon--visibility-on') }}
{{else}}
<svg class="icon--visibility-off" hidden="true" width="16" height="16" viewBox="0 0 16 16">
Expand Down
4 changes: 2 additions & 2 deletions src/components/text-input/text-input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,8 @@ export default class TextInput extends mixin(createComponent, initComponentBySea
selectorPasswordField: `.${prefix}--text-input[data-toggle-password-visibility]`,
selectorPasswordVisibilityButton: `.${prefix}--text-input--password__visibility`,
passwordIsVisible: `${prefix}--text-input--password-visible`,
svgIconVisibilityOn: 'svg.icon--visibility-on',
svgIconVisibilityOff: 'svg.icon--visibility-off',
svgIconVisibilityOn: `svg.${prefix}--icon--visibility-on`,
svgIconVisibilityOff: `svg.${prefix}--icon--visibility-off`,
};
}

Expand Down
4 changes: 2 additions & 2 deletions tests/spec/text-input_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ describe('Test text input', () => {
selectorPasswordField: `.bx--text-input[data-toggle-password-visibility]`,
selectorPasswordVisibilityButton: `.bx--text-input--password__visibility`,
passwordIsVisible: `bx--text-input--password-visible`,
svgIconVisibilityOn: 'svg.icon--visibility-on',
svgIconVisibilityOff: 'svg.icon--visibility-off',
svgIconVisibilityOn: 'svg.bx--icon--visibility-on',
svgIconVisibilityOff: 'svg.bx--icon--visibility-off',
});
});

Expand Down

0 comments on commit 2be09fa

Please sign in to comment.