Skip to content

Commit

Permalink
Merge pull request #912 from matuzalemsteles/pr-911
Browse files Browse the repository at this point in the history 
Add `.inline-item` to cases that use the icon in ClaySticker | Fixes #886
  • Loading branch information
@carloslancha
carloslancha authored May 23, 2018
2 parents f6ed3f4 + 28de92c commit 38fbe6c
Show file tree
Hide file tree
Showing 25 changed files with 458 additions and 288 deletions.
4 changes: 2 additions & 2 deletions packages/clay-card-grid/src/__tests__/__snapshots__/ClayCardGrid.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
<title>folder</title>
<use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#folder"></use>
Expand All @@ -36,7 +36,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
<title>folder</title>
<use xlink:href="../node_modules/clay-css/lib/images/icons/icons.svg#folder"></use>
Expand Down
22 changes: 11 additions & 11 deletions packages/clay-card/src/__tests__/__snapshots__/ClayHorizontalCard.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with a different
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-list" focusable="false">
<title>list</title>
<use xlink:href="icons.svg#list"></use>
Expand All @@ -28,7 +28,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with actionItems
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
Expand Down Expand Up @@ -70,7 +70,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with classes 1`]
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
Expand All @@ -92,7 +92,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with href 1`] = `
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
Expand All @@ -114,7 +114,7 @@ exports[`ClayHorizontalCard should render a ClayHorizontalCard with id 1`] = `
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
Expand All @@ -141,7 +141,7 @@ exports[`ClayHorizontalCard should render a disabled ClayHorizontalCard 1`] = `
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
Expand Down Expand Up @@ -171,7 +171,7 @@ exports[`ClayHorizontalCard should render a selectable ClayHorizontalCard 1`] =
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
Expand Down Expand Up @@ -201,7 +201,7 @@ exports[`ClayHorizontalCard should render a selectable ClayHorizontalCard with i
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
Expand Down Expand Up @@ -231,7 +231,7 @@ exports[`ClayHorizontalCard should render a selectable ClayHorizontalCard with i
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
Expand Down Expand Up @@ -261,7 +261,7 @@ exports[`ClayHorizontalCard should render a selected ClayHorizontalCard 1`] = `
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
Expand All @@ -286,7 +286,7 @@ exports[`ClayHorizontalCard should render the default markup 1`] = `
<div class="card-row">
<div class="autofit-col">
<span class="sticker sticker-rounded sticker-unstyled">
<span class="sticker-overlay">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-folder" focusable="false">
<title>folder</title>
<use xlink:href="icons.svg#folder"></use>
Expand Down
96 changes: 60 additions & 36 deletions packages/clay-css/src/content/badges_and_labels.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -502,24 +502,32 @@ <h3>Sticker Sizes</h3>
<span class="sticker sticker-danger sticker-xl">133</span>

<span class="sticker sticker-primary sticker-xl">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-format">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#format" />
</svg>
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-format">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#format" />
</svg>
</span>
</span>
<span class="sticker sticker-lg sticker-secondary">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-format">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#format" />
</svg>
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-format">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#format" />
</svg>
</span>
</span>
<span class="sticker sticker-success">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-format">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#format" />
</svg>
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-format">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#format" />
</svg>
</span>
</span>
<span class="sticker sticker-danger sticker-sm">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-format">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#format" />
</svg>
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-format">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#format" />
</svg>
</span>
</span>

</div>
Expand Down Expand Up @@ -597,50 +605,66 @@ <h3>Sticker Outside</h3>
<div class="clay-site-row-spacer row">
<div class="col-md-3 col-6">
<span class="sticker sticker-dark">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-picture">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#picture" />
</svg>
<span class="sticker sticker-circle sticker-info sticker-sm sticker-outside sticker-top-left">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-sun">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#sun" />
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-picture">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#picture" />
</svg>
</span>
<span class="sticker sticker-circle sticker-info sticker-sm sticker-outside sticker-top-left">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-sun">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#sun" />
</svg>
</span>
</span>
</span>
</div>
<div class="col-md-3 col-6">
<span class="sticker sticker-info">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-picture">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#picture" />
</svg>
<span class="sticker sticker-circle sticker-info sticker-sm sticker-outside sticker-bottom-left">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-magic">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#magic" />
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-picture">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#picture" />
</svg>
</span>
<span class="sticker sticker-circle sticker-info sticker-sm sticker-outside sticker-bottom-left">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-magic">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#magic" />
</svg>
</span>
</span>
</span>
</div>
<div class="col-md-3 col-6">
<span class="sticker sticker-danger">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-picture">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#picture" />
</svg>
<span class="sticker sticker-circle sticker-info sticker-sm sticker-outside sticker-top-right">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-transform">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#transform" />
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-picture">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#picture" />
</svg>
</span>
<span class="sticker sticker-circle sticker-info sticker-sm sticker-outside sticker-top-right">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-transform">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#transform" />
</svg>
</span>
</span>
</span>
</div>
<div class="col-md-3 col-6">
<span class="sticker sticker-success">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-picture">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#picture" />
</svg>
<span class="sticker sticker-circle sticker-info sticker-sm sticker-outside sticker-bottom-right">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-undo">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#undo" />
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-picture">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#picture" />
</svg>
</span>
<span class="sticker sticker-circle sticker-info sticker-sm sticker-outside sticker-bottom-right">
<span class="inline-item">
<svg aria-hidden="true" class="lexicon-icon lexicon-icon-undo">
<use xlink:href="{{rootPath}}/images/icons/icons.svg#undo" />
</svg>
</span>
</span>
</span>
</div>
</div>
Expand Down
Loading

0 comments on commit 38fbe6c

Please sign in to comment.