Skip to content

Commit

Permalink
Merge pull request #441 from carloslancha/pr-423
Browse files Browse the repository at this point in the history 
Fix checkbox and radio styles
  • Loading branch information
@jbalsas
jbalsas authored Jan 22, 2018
2 parents 9a52ff6 + 83abf02 commit 17f9104
Show file tree
Hide file tree
Showing 13 changed files with 1,008 additions and 773 deletions.
75 changes: 40 additions & 35 deletions packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -566,13 +566,14 @@ 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-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>
<use xlink:href="icons.svg#documents-and-media"></use>
</svg>
</div>
<span class="custom-control-label">
<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>
<use xlink:href="icons.svg#documents-and-media"></use>
</svg>
</div>
</span>
</label>
</div>
</div>
Expand All @@ -594,13 +595,14 @@ 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-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>
<use xlink:href="icons.svg#documents-and-media"></use>
</svg>
</div>
<span class="custom-control-label">
<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>
<use xlink:href="icons.svg#documents-and-media"></use>
</svg>
</div>
</span>
</label>
</div>
</div>
Expand All @@ -622,13 +624,14 @@ 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-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>
<use xlink:href="icons.svg#documents-and-media"></use>
</svg>
</div>
<span class="custom-control-label">
<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>
<use xlink:href="icons.svg#documents-and-media"></use>
</svg>
</div>
</span>
</label>
</div>
</div>
Expand All @@ -650,13 +653,14 @@ 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-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>
<use xlink:href="icons.svg#documents-and-media"></use>
</svg>
</div>
<span class="custom-control-label">
<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>
<use xlink:href="icons.svg#documents-and-media"></use>
</svg>
</div>
</span>
</label>
</div>
</div>
Expand All @@ -678,13 +682,14 @@ 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-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>
<use xlink:href="icons.svg#documents-and-media"></use>
</svg>
</div>
<span class="custom-control-label">
<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>
<use xlink:href="icons.svg#documents-and-media"></use>
</svg>
</div>
</span>
</label>
</div>
</div>
Expand Down
145 changes: 75 additions & 70 deletions packages/clay-card/src/__tests__/__snapshots__/ClayHorizontalCard.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,24 +125,25 @@ 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-label"></span>
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<span class="custom-control-label">
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate" title="My Title">My Title</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate" title="My Title">My Title</div>
</div>
</div>
</div>
</div>
</div>
</span>
</label>
</div>
</div>
Expand All @@ -153,24 +154,25 @@ 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-label"></span>
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<span class="custom-control-label">
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate" title="My Title">My Title</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate" title="My Title">My Title</div>
</div>
</div>
</div>
</div>
</div>
</span>
</label>
</div>
</div>
Expand All @@ -181,24 +183,25 @@ 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-label"></span>
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<span class="custom-control-label">
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate" title="My Title">My Title</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate" title="My Title">My Title</div>
</div>
</div>
</div>
</div>
</div>
</span>
</label>
</div>
</div>
Expand All @@ -209,24 +212,25 @@ 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-label"></span>
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<span class="custom-control-label">
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate" title="My Title">My Title</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate" title="My Title">My Title</div>
</div>
</div>
</div>
</div>
</div>
</span>
</label>
</div>
</div>
Expand All @@ -237,24 +241,25 @@ 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-label"></span>
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
<span class="custom-control-label">
<div class="card card-horizontal">
<div class="card-body">
<div class="card-row">
<span class="sticker sticker-unstyled">
<span class="sticker-overlay">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
</svg>
</span>
</span>
</span>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate" title="My Title">My Title</div>
<div class="autofit-col autofit-col-expand autofit-col-gutters">
<div class="card-title text-truncate" title="My Title">My Title</div>
</div>
</div>
</div>
</div>
</div>
</span>
</label>
</div>
</div>
Expand Down
Loading

0 comments on commit 17f9104

Please sign in to comment.