Skip to content

Commit

Permalink
Merge pull request #769 from pat270/clay-768
Browse files Browse the repository at this point in the history 
(#768) Added `input-group-password`
  • Loading branch information
@marcoscv-work
marcoscv-work authored Apr 9, 2018
2 parents 062b7af + 762868e commit 8e464bc
Show file tree
Hide file tree
Showing 6 changed files with 267 additions and 201 deletions.
88 changes: 88 additions & 0 deletions packages/clay/src/content/form_elements_input_groups.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,6 +317,82 @@ <h3>Input Group Inset</h3>
</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Input Group Password</h3>

<blockquote class="blockquote">
<p>A pattern for displaying the content inside a password input. Use <code>.input-text-label</code> inside <code>.input-group-inset-item</code> to display specific content for <code>.form-control[type="text"]</code> and <code>.input-password-label</code> for <code>.form-control[type="password"]</code>.</p>
</blockquote>

<div class="alert alert-warning">This requires custom javascript to toggle the input type between text and password.</div>

<div class="sheet">
<div class="form-group">
<label for="passwordFieldHidden">Password Field Hidden</label>
<div class="input-group input-group-password">
<div class="input-group-item">
<input aria-label="Password Hidden" class="form-control input-group-inset input-group-inset-after" id="passwordFieldHidden" type="password" value="my-seekret">
<div class="input-group-inset-item input-group-inset-item-after">
<button class="btn btn-unstyled" type="button">
<span class="input-text-label">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-hidden">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#hidden" />
</svg>
</span>
<span class="input-password-label">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#view" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>

<div class="form-group">
<label for="passwordFieldVisible">Password Field Visible</label>
<div class="input-group input-group-password">
<div class="input-group-item">
<input aria-label="Password Visible" class="form-control input-group-inset input-group-inset-after" id="passwordFieldVisible" type="text" value="my-seekret">
<div class="input-group-inset-item input-group-inset-item-after">
<button class="btn btn-secondary" type="button">
<span class="input-password-label">Show</span>
<span class="input-text-label">Hide</span>
</button>
</div>
</div>
</div>
</div>

<div class="form-group">
<label class="disabled" for="passwordFieldDisabled">Password Field Disabled</label>
<div class="input-group input-group-password">
<div class="input-group-item">
<input aria-label="Password Disabled" class="form-control input-group-inset input-group-inset-after" disabled id="passwordFieldDisabled" type="password" value="my-seekret">
<div class="input-group-inset-item input-group-inset-item-after">
<button class="btn btn-unstyled" disabled type="button">
<span class="input-password-label">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#view" />
</svg>
</span>
<span class="input-text-label">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#view" />
</svg>
</span>
</button>
</div>
</div>
</div>
</div>
</div>

</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Input Group Text Secondary</h3>
Expand Down Expand Up @@ -886,4 +962,16 @@ <h3>Form Control Tag Group With Contenteditable Elements</h3>
$('.form-control-hidden').on('focus', function(event) {
$(this).parent().find('.form-control').focus();
});

$('.input-group-password .btn').on('click', function(event) {
var input = $(this).closest('.input-group-password').find('.form-control');
var inputType = input.attr('type');

if (inputType === 'password') {
input.attr('type', 'text');
}
else {
input.attr('type', 'password');
}
});
</script>
124 changes: 123 additions & 1 deletion packages/clay/src/content/form_validation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,6 +420,114 @@ <h3>Readonly Validation States</h3>
</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Input Group Password Validation States</h3>

<div class="sheet">
<div class="form-group has-error">
<label for="passwordFieldError">Password Field Error</label>
<div class="input-group input-group-password">
<div class="input-group-item">
<input aria-label="Password Error" class="form-control input-group-inset input-group-inset-after" id="passwordFieldError" type="password" value="password">
<div class="input-group-inset-item input-group-inset-item-after">
<button class="btn btn-unstyled" type="button">
<span class="input-password-label">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-hidden">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#hidden" />
</svg>
</span>
<span class="input-text-label">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#view" />
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="form-feedback-group">
<div class="form-feedback-item">
<span class="form-feedback-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-exclamation-full">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#exclamation-full" />
</svg>
</span>
The password is wrong.
</div>
</div>
</div>

<div class="form-group has-warning">
<label for="passwordFieldWarning">Password Field Warning</label>
<div class="input-group input-group-password">
<div class="input-group-item">
<input aria-label="Password Warning" class="form-control input-group-inset input-group-inset-after" id="passwordFieldWarning" type="password" value="my">
<div class="input-group-inset-item input-group-inset-item-after">
<button class="btn btn-unstyled" type="button">
<span class="input-password-label">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-hidden">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#hidden" />
</svg>
</span>
<span class="input-text-label">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#view" />
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="form-feedback-group">
<div class="form-feedback-item">
<span class="form-feedback-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-warning-full">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#warning-full" />
</svg>
</span>
You are getting closer keep trying!
</div>
</div>
</div>

<div class="form-group has-success">
<label for="passwordFieldSuccess">Password Field Success</label>
<div class="input-group input-group-password">
<div class="input-group-item">
<input aria-label="Password Success" class="form-control input-group-inset input-group-inset-after" id="passwordFieldSuccess" type="password" value="my-seekret">
<div class="input-group-inset-item input-group-inset-item-after">
<button class="btn btn-unstyled" type="button">
<span class="input-password-label">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-hidden">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#hidden" />
</svg>
</span>
<span class="input-text-label">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-view">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#view" />
</svg>
</span>
</button>
</div>
</div>
</div>
<div class="form-feedback-group">
<div class="form-feedback-item">
<span class="form-feedback-indicator">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-check-circle-full">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#check-circle-full" />
</svg>
</span>
The password is correct!
</div>
</div>
</div>

</div>
</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Input Validation States (HTML5)</h3>
Expand Down Expand Up @@ -593,4 +701,18 @@ <h3>Input Validation States (HTML5)</h3>
</form>
</div>
</div>
</div>
</div>

<script>
$('.input-group-password .btn').on('click', function(event) {
var input = $(this).closest('.input-group-password').find('.form-control');
var inputType = input.attr('type');

if (inputType === 'password') {
input.attr('type', 'text');
}
else {
input.attr('type', 'password');
}
});
</script>
Loading

0 comments on commit 8e464bc

Please sign in to comment.