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

#690 Markup for Lexicon Input Labels Field #701

Merged
merged 3 commits into from
Mar 7, 2018
Merged

#690 Markup for Lexicon Input Labels Field #701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d231412
Update: (#690) Labels move `$label-spacer-x` to use `margin-right` so…
pat270 Mar 3, 2018
1413462
New: (Fixes #690) Forms added `.form-control-tag-group`, `.form-contr…
pat270 Mar 5, 2018
541a658
Site: (#690) Input Group document `.form-control-tag-group` and `.inp…
pat270 Mar 6, 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
232 changes: 231 additions & 1 deletion packages/clay/src/content/form_elements_input_groups.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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