Skip to content

Commit

Permalink
Merge pull request #701 from pat270/clay-690
Browse files Browse the repository at this point in the history 
#690 Markup for Lexicon Input Labels Field
  • Loading branch information
@jbalsas
jbalsas authored Mar 7, 2018
2 parents 0d1d83a + 541a658 commit 5c18bbe
Show file tree
Hide file tree
Showing 13 changed files with 420 additions and 28 deletions.
232 changes: 231 additions & 1 deletion packages/clay/src/content/form_elements_input_groups.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -536,6 +536,16 @@ <h3>Input Group Buttons</h3>
</div>
</div>

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

<blockquote class="blockquote">
<p>Add class <code>input-group-stacked-sm-down</code> on <code>input-group</code> to make <code>input-group-item</code> stack and <code>input-group-item-shrink</code> inline at screen sizes less than 576px.</p>
</blockquote>
</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Input Group Sizes</h3>
Expand Down Expand Up @@ -656,4 +666,224 @@ <h3>Input Group Sizes</h3>
</div>

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

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Form Control Tag Group</h3>

<blockquote class="blockquote">
<p>A pattern for placing <code>label</code>s in an input.</p>
</blockquote>

<div class="alert alert-warning">
This component requires custom javascript. The class <code>focus</code> must be managed when interacting with this component. It must be added/removed on <code>input-group-item</code> when any item in <code>form-control-tag-group</code> is focused/blurred.<br><br>

If <code>form-control-tag-group</code> is clicked, <code>form-control-inset</code> must be focused.
</div>

<div class="sheet">
<div class="form-group">
<label for="tagsField1">Tags</label>
<div class="input-group input-group-stacked-sm-down">
<div class="input-group-item">
<div class="form-control form-control-tag-group">
<input class="form-control-inset" id="tagsField1" type="text" value="some value">
</div>
<div class="form-feedback-group">
<div class="form-text">You can use a comma to enter tags. ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.</div>
</div>
</div>
<div class="input-group-item input-group-item-shrink">
<button class="btn btn-secondary" type="button">Select All the Things</button>
</div>
</div>
</div>

<div class="form-group">
<label for="tagsField2">Tags</label>
<div class="input-group input-group-stacked-sm-down">
<div class="input-group-item">
<div class="form-control form-control-tag-group">
<span class="label label-dismissible label-secondary">
wall<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
</span>
<span class="label label-dismissible label-secondary">
wallpaper<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
</span>
<span class="label label-dismissible label-secondary">
wonderwall<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
</span>
<span class="label label-dismissible label-secondary">
winterfell<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
</span>
<span class="label label-dismissible label-secondary">
kings landing<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
</span>
<input class="form-control-inset" id="tagsField2" type="text" value="some value">
</div>
<div class="form-feedback-group">
<div class="form-text">You can use a comma to enter tags. ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.</div>
</div>
</div>
<div class="input-group-item input-group-item-shrink">
<button class="btn btn-secondary" type="button">Select All the Things</button>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="clay-site-row-spacer row">
<div class="col-md-12">
<h3>Form Control Tag Group With Contenteditable Elements</h3>

<blockquote class="blockquote">
<p>The major advantage of using <code>contenteditable</code> elements over an input is allowing text to be separated by newline and having the "input" grow with the text. One caveat is <code>width: 100%;</code> or <code>.w-100</code> must be added on <code>.form-control-inset</code> when a newline is entered and removed when there are no newlines present.</p>
</blockquote>

<div class="alert alert-warning">
This pattern requires updating <code>.form-control-hidden</code> with the text inside the <code>contenteditable</code> element. It also requires careful management of the focus state as well as the <code>tabindex</code> on <code>.form-control-hidden</code>.
</div>

<div class="sheet">
<div class="form-group">
<label for="formControlContentEditable1">Label (Content Editable)</label>
<textarea class="form-control-hidden" id="formControlContentEditable1" tabindex="-1"></textarea>
<div class="form-control" contenteditable="true"></div>
</div>

<div class="form-group">
<label for="tagsFieldContentEditable1">Tags (Content Editable)</label>
<div class="input-group input-group-stacked-sm-down">
<div class="input-group-item">
<div class="form-control form-control-tag-group">
<input class="form-control-hidden" id="tagsFieldContentEditable1" tabindex="-1" type="text">
<span class="form-control-inset" contenteditable="true"></span>
</div>
<div class="form-feedback-group">
<div class="form-text">You can use a comma to enter tags. ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.</div>
</div>
</div>
<div class="input-group-item input-group-item-shrink">
<button class="btn btn-secondary" type="button">Select All the Things</button>
</div>
</div>
</div>

<div class="form-group">
<label for="tagsContentEditableField2">Tags (Content Editable)</label>
<div class="input-group input-group-stacked-sm-down">
<div class="input-group-item">
<div class="form-control form-control-tag-group">
<span class="label label-dismissible label-secondary">
wall<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
</span>
<span class="label label-dismissible label-secondary">
wallpaper<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
</span>
<span class="label label-dismissible label-secondary">
wonderwall<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
</span>
<span class="label label-dismissible label-secondary">
winterfell<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
</span>
<span class="label label-dismissible label-secondary">
kings landing<span class="inline-item inline-item-after">
<button aria-label="Close" class="close" type="button">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-times">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#times"></use>
</svg>
</button></span>
</span>
<input class="form-control-hidden" id="tagsContentEditableField2" tabindex="-1">
<span class="form-control-inset" contenteditable>some value</span>
</div>
<div class="form-feedback-group">
<div class="form-text">You can use a comma to enter tags. ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual.</div>
</div>
</div>
<div class="input-group-item input-group-item-shrink">
<button class="btn btn-secondary" type="button">Select All the Things</button>
</div>
</div>
</div>
</div>
</div>
</div>

<script>
$('.form-control-tag-group').on('click', function(event) {
$(this).find('.form-control-inset').focus();
});

$('.form-control-inset').on('focusin', function(event) {
$(this).closest('.input-group-item').addClass('focus');
});

$('.form-control-inset').on('focusout', function(event) {
$(this).closest('.input-group-item').removeClass('focus');
});

$('.form-control-tag-group .label button').on('focus', function(event) {
$(this).closest('.input-group-item').addClass('focus');
});

$('.form-control-tag-group .label button').on('blur', function(event) {
$(this).closest('.input-group-item').removeClass('focus');
});

$('.form-control-hidden').on('focus', function(event) {
$(this).closest('.input-group-item').find('form-control-inset').focus();
});

$('.form-control-hidden').on('focus', function(event) {
$(this).parent().find('.form-control').focus();
});
</script>
4 changes: 2 additions & 2 deletions packages/clay/src/scss/_components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,18 @@
@import "components/_breadcrumbs";
@import "components/_button-groups";
@import "components/_buttons";
@import "components/_labels";
@import "components/_stickers";

@import "components/_cards";
@import "components/_dropdowns";
@import "components/_forms";
@import "components/_links";
@import "components/_stickers";

@import "components/_custom-forms";
@import "components/_form-validation";
@import "components/_icons";
@import "components/_input-groups";
@import "components/_labels";
@import "components/_list-group";
@import "components/_modals";
@import "components/_multi-step-nav";
Expand Down
1 change: 1 addition & 0 deletions packages/clay/src/scss/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
@import "mixins/_buttons";
@import "mixins/_cards";
@import "mixins/_grid";
@import "mixins/_input-groups";
@import "mixins/_labels";
@import "mixins/_links";
@import "mixins/_list-group";
Expand Down
4 changes: 2 additions & 2 deletions packages/clay/src/scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@
@import "variables/_badges";
@import "variables/_breadcrumbs";
@import "variables/_buttons";
@import "variables/_labels";
@import "variables/_stickers";

@import "variables/_cards";
@import "variables/_dropdowns";
@import "variables/_forms";
@import "variables/_links";

@import "variables/_custom-forms";
@import "variables/_labels";
@import "variables/_list-group";
@import "variables/_loaders";
@import "variables/_modals";
@import "variables/_multi-step-nav";
@import "variables/_navs";
@import "variables/_stickers";

@import "variables/_icons";

Expand Down
4 changes: 2 additions & 2 deletions packages/clay/src/scss/atlas/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
@import "variables/_badges";
@import "variables/_breadcrumbs";
@import "variables/_buttons";
@import "variables/_labels";
@import "variables/_stickers";

@import "variables/_cards";
@import "variables/_dropdowns";
Expand All @@ -12,13 +14,11 @@

@import "variables/_custom-forms";
@import "variables/_icons";
@import "variables/_labels";
@import "variables/_list-group";
@import "variables/_loaders";
@import "variables/_modals";
@import "variables/_multi-step-nav";
@import "variables/_navs";
@import "variables/_stickers";

@import "variables/_menubar";
@import "variables/_navbar";
Expand Down
13 changes: 12 additions & 1 deletion packages/clay/src/scss/atlas/variables/_forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,18 @@ $input-select-icon-focus: clay-icon(caret-double-l, $input-select-icon-focus-col
$input-select-icon-disabled-color: $text-muted !default;
$input-select-icon-disabled: clay-icon(caret-double-l, $input-select-icon-disabled-color) !default;

// Form Group Autofit
// Form Control Label (Labels inside Form Control)

$form-control-label-size: () !default;
$form-control-label-size: map-merge((
border-width: 0.0625rem,
font-size: 0.8125rem, // 13px
height: 1.5rem, // 24px
padding-x: 0.625rem, // 10px
text-transform: none
), $form-control-label-size);

// Form Group

$form-group-item-label-spacer: ($input-label-font-size * $line-height-base) + $input-label-margin-bottom !default;

Expand Down
Loading

0 comments on commit 5c18bbe

Please sign in to comment.