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

Update css classes for checkbox,list and radio #415

Merged
merged 2 commits into from
Jan 16, 2018
Merged

Update css classes for checkbox,list and radio #415

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
95238b2
Update css classes for checkbox,list and radio
Jan 16, 2018
7c4f1a5
Regen snapshots
Jan 16, 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
10 changes: 5 additions & 5 deletions packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -566,7 +566,7 @@ exports[`ClayFileCard should render a selectable ClayFileCard 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
<title>documents-and-media</title>
Expand Down Expand Up @@ -594,7 +594,7 @@ exports[`ClayFileCard should render a selectable ClayFileCard with input \`name\
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" name="checkbox01" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
<title>documents-and-media</title>
Expand Down Expand Up @@ -622,7 +622,7 @@ exports[`ClayFileCard should render a selectable ClayFileCard with input \`value
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" value="checkbox" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
<title>documents-and-media</title>
Expand Down Expand Up @@ -650,7 +650,7 @@ exports[`ClayFileCard should render a selectable disabled ClayFileCard 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input disabled="disabled" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
<title>documents-and-media</title>
Expand Down Expand Up @@ -678,7 +678,7 @@ exports[`ClayFileCard should render a selectable selected ClayFileCard 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input checked="" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-documents-and-media">
<title>documents-and-media</title>
Expand Down
10 changes: 5 additions & 5 deletions packages/clay-card/src/__tests__/__snapshots__/ClayHorizontalCard.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ exports[`ClayHorizontalCard should render a disabled ClayHorizontalCard 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input disabled="disabled" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
Expand Down Expand Up @@ -153,7 +153,7 @@ exports[`ClayHorizontalCard should render a selectable ClayHorizontalCard 1`] =
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
Expand Down Expand Up @@ -181,7 +181,7 @@ exports[`ClayHorizontalCard should render a selectable ClayHorizontalCard with i
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" name="checkbox01" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
Expand Down Expand Up @@ -209,7 +209,7 @@ exports[`ClayHorizontalCard should render a selectable ClayHorizontalCard with i
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" value="checkbox" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
Expand Down Expand Up @@ -237,7 +237,7 @@ exports[`ClayHorizontalCard should render a selected ClayHorizontalCard 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input checked="" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
Expand Down
10 changes: 5 additions & 5 deletions packages/clay-card/src/__tests__/__snapshots__/ClayImageCard.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -442,7 +442,7 @@ exports[`ClayImageCard should render a disabled ClayImageCard 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input disabled="disabled" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
</label>
</div>
</div>
Expand All @@ -464,7 +464,7 @@ exports[`ClayImageCard should render a selectable ClayImageCard 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
</label>
</div>
</div>
Expand All @@ -486,7 +486,7 @@ exports[`ClayImageCard should render a selectable ClayImageCard with input \`nam
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" name="checkbox01" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
</label>
</div>
</div>
Expand All @@ -508,7 +508,7 @@ exports[`ClayImageCard should render a selectable ClayImageCard with input \`val
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" name="checkbox" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
</label>
</div>
</div>
Expand All @@ -530,7 +530,7 @@ exports[`ClayImageCard should render a selected ClayImageCard 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input checked="" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
</label>
</div>
</div>
Expand Down
10 changes: 5 additions & 5 deletions packages/clay-card/src/__tests__/__snapshots__/ClayUserCard.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ exports[`ClayUserCard should render a disabled ClayUserCard 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input disabled="disabled" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
<span class="sticker sticker-primary rounded-circle sticker-xl">
<span class="sticker-overlay"></span>
Expand All @@ -361,7 +361,7 @@ exports[`ClayUserCard should render a selectable ClayUserCard 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
<span class="sticker sticker-primary rounded-circle sticker-xl">
<span class="sticker-overlay"></span>
Expand All @@ -388,7 +388,7 @@ exports[`ClayUserCard should render a selectable ClayUserCard with input \`name\
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" name="checkbox01" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
<span class="sticker sticker-primary rounded-circle sticker-xl">
<span class="sticker-overlay"></span>
Expand All @@ -415,7 +415,7 @@ exports[`ClayUserCard should render a selectable ClayUserCard with input \`value
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" value="checkbox" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
<span class="sticker sticker-primary rounded-circle sticker-xl">
<span class="sticker-overlay"></span>
Expand All @@ -442,7 +442,7 @@ exports[`ClayUserCard should render a selected ClayUserCard 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input checked="" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div class="aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
<span class="sticker sticker-primary rounded-circle sticker-xl">
<span class="sticker-overlay"></span>
Expand Down
4 changes: 2 additions & 2 deletions packages/clay-checkbox/src/ClayCheckbox.soy
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,13 @@

<input {$inputAttributes}></input>

<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>

{if $labelContent}
{$labelContent}
{else}
{let $spanLabelClasses kind="text"}
custom-control-description
custom-control-label-text
{if $hideLabel}
{sp}sr-only
{/if}
Expand Down
54 changes: 27 additions & 27 deletions packages/clay-checkbox/src/__tests__/__snapshots__/ClayCheckbox.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ exports[`ClayCheckbox should render a checkbox with classes 1`] = `
<div class="custom-control custom-checkbox my-custom-class">
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text">My Checkbox</span>
</label>
</div>
`;
Expand All @@ -14,7 +14,7 @@ exports[`ClayCheckbox should render a checkbox with custom label content 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-label"></span>
<div>
<h4>My Checkbox</h4>
</div>
Expand All @@ -26,8 +26,8 @@ exports[`ClayCheckbox should render a checkbox with hidden label 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text sr-only">My Checkbox</span>
</label>
</div>
`;
Expand All @@ -36,8 +36,8 @@ exports[`ClayCheckbox should render a checkbox with id 1`] = `
<div class="custom-control custom-checkbox" id="myId">
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text">My Checkbox</span>
</label>
</div>
`;
Expand All @@ -46,8 +46,8 @@ exports[`ClayCheckbox should render a checkbox with name 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" name="myCheckbox" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text">My Checkbox</span>
</label>
</div>
`;
Expand All @@ -56,8 +56,8 @@ exports[`ClayCheckbox should render a checkbox with value 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" value="mycheckbox" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text">My Checkbox</span>
</label>
</div>
`;
Expand All @@ -66,8 +66,8 @@ exports[`ClayCheckbox should render a checked and disabled checkbox 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input checked="" disabled="disabled" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text">My Checkbox</span>
</label>
</div>
`;
Expand All @@ -76,8 +76,8 @@ exports[`ClayCheckbox should render a checked checkbox 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input checked="" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text">My Checkbox</span>
</label>
</div>
`;
Expand All @@ -86,8 +86,8 @@ exports[`ClayCheckbox should render a disabled checkbox 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input disabled="disabled" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text">My Checkbox</span>
</label>
</div>
`;
Expand All @@ -96,8 +96,8 @@ exports[`ClayCheckbox should render an indeterminate checkbox 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input checked="" class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text">My Checkbox</span>
</label>
</div>
`;
Expand All @@ -106,8 +106,8 @@ exports[`ClayCheckbox should render an inline checkbox 1`] = `
<div class="custom-control custom-checkbox custom-control-inline">
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text">My Checkbox</span>
</label>
</div>
`;
Expand All @@ -116,8 +116,8 @@ exports[`ClayCheckbox should render an inline checkbox with classes 1`] = `
<div class="custom-control custom-checkbox custom-control-inline my-custom-class">
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text">My Checkbox</span>
</label>
</div>
`;
Expand All @@ -126,8 +126,8 @@ exports[`ClayCheckbox should render an inline checkbox with custom id 1`] = `
<div class="custom-control custom-checkbox custom-control-inline" id="myCheckbox">
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text">My Checkbox</span>
</label>
</div>
`;
Expand All @@ -136,8 +136,8 @@ exports[`ClayCheckbox should render default markup 1`] = `
<div class="custom-control custom-checkbox">
<label>
<input class="custom-control-input" ref="input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">My Checkbox</span>
<span class="custom-control-label"></span>
<span class="custom-control-label-text">My Checkbox</span>
</label>
</div>
`;
Loading