Skip to content

Commit

Permalink
Merge pull request #809 from matuzalemsteles/pr-799
Browse files Browse the repository at this point in the history 
(#798) Adjust spacing between words that break to new line in Label and Badges and update ClayLabel and ClayBadge
  • Loading branch information
@carloslancha
carloslancha authored Apr 18, 2018
2 parents f0b89b5 + b9e9d7c commit ac72122
Show file tree
Hide file tree
Showing 40 changed files with 755 additions and 818 deletions.
4 changes: 1 addition & 3 deletions packages/clay-badge/src/ClayBadge.soy
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@
{/let}

<span {$attributes}>
<span class="text-truncate-inline">
<span class="text-truncate">{$label}</span>
</span>
<span class="badge-item badge-item-expand">{$label}</span>
</span>
{/template}
44 changes: 11 additions & 33 deletions packages/clay-badge/src/__tests__/__snapshots__/ClayBadge.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,88 +2,66 @@

exports[`ClayBadge should render a \`danger color\` badge 1`] = `
<span class="badge badge-danger">
<span class="text-truncate-inline">
<span class="text-truncate">Foo</span>
</span>
<span class="badge-item badge-item-expand">Foo</span>
</span>
`;

exports[`ClayBadge should render a \`default color\` badge 1`] = `
<span class="badge badge-primary">
<span class="text-truncate-inline">
<span class="text-truncate">Foo</span>
</span>
<span class="badge-item badge-item-expand">Foo</span>
</span>
`;

exports[`ClayBadge should render a \`info color\` badge 1`] = `
<span class="badge badge-info">
<span class="text-truncate-inline">
<span class="text-truncate">Foo</span>
</span>
<span class="badge-item badge-item-expand">Foo</span>
</span>
`;

exports[`ClayBadge should render a \`primary color\` badge 1`] = `
<span class="badge badge-primary">
<span class="text-truncate-inline">
<span class="text-truncate">Foo</span>
</span>
<span class="badge-item badge-item-expand">Foo</span>
</span>
`;

exports[`ClayBadge should render a \`secondary color\` badge 1`] = `
<span class="badge badge-secondary">
<span class="text-truncate-inline">
<span class="text-truncate">Foo</span>
</span>
<span class="badge-item badge-item-expand">Foo</span>
</span>
`;

exports[`ClayBadge should render a \`success color\` badge 1`] = `
<span class="badge badge-success">
<span class="text-truncate-inline">
<span class="text-truncate">Foo</span>
</span>
<span class="badge-item badge-item-expand">Foo</span>
</span>
`;

exports[`ClayBadge should render a \`warning color\` badge 1`] = `
<span class="badge badge-warning">
<span class="text-truncate-inline">
<span class="text-truncate">Foo</span>
</span>
<span class="badge-item badge-item-expand">Foo</span>
</span>
`;

exports[`ClayBadge should render a badge with classes 1`] = `
<span class="badge badge-primary my-custom-class">
<span class="text-truncate-inline">
<span class="text-truncate">Foo</span>
</span>
<span class="badge-item badge-item-expand">Foo</span>
</span>
`;

exports[`ClayBadge should render a badge with id 1`] = `
<span class="badge badge-primary" id="myId">
<span class="text-truncate-inline">
<span class="text-truncate">Foo</span>
</span>
<span class="badge-item badge-item-expand">Foo</span>
</span>
`;

exports[`ClayBadge should render a badge with label 1`] = `
<span class="badge badge-primary">
<span class="text-truncate-inline">
<span class="text-truncate">Bar</span>
</span>
<span class="badge-item badge-item-expand">Bar</span>
</span>
`;

exports[`ClayBadge should render the default markup 1`] = `
<span class="badge badge-primary">
<span class="text-truncate-inline">
<span class="text-truncate">Foo</span>
</span>
<span class="badge-item badge-item-expand">Foo</span>
</span>
`;
24 changes: 6 additions & 18 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 @@ -74,9 +74,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
<div class="card-subtitle text-truncate">U.S.A</div>
<div class="card-detail">
<span class="label label-success">
<span class="text-truncate-inline">
<span class="text-truncate">No Spicy</span>
</span>
<span class="label-item label-item-expand">No Spicy</span>
</span>
</div>
</div>
Expand All @@ -99,9 +97,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
<div class="card-subtitle text-truncate">China</div>
<div class="card-detail">
<span class="label label-warning">
<span class="text-truncate-inline">
<span class="text-truncate">Spicy</span>
</span>
<span class="label-item label-item-expand">Spicy</span>
</span>
</div>
</div>
Expand All @@ -124,9 +120,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
<div class="card-subtitle text-truncate">Spain</div>
<div class="card-detail">
<span class="label label-success">
<span class="text-truncate-inline">
<span class="text-truncate">No Spicy</span>
</span>
<span class="label-item label-item-expand">No Spicy</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -154,9 +148,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
<div class="card-subtitle text-truncate">Italy</div>
<div class="card-detail">
<span class="label label-success">
<span class="text-truncate-inline">
<span class="text-truncate">No Spicy</span>
</span>
<span class="label-item label-item-expand">No Spicy</span>
</span>
</div>
</div>
Expand All @@ -179,9 +171,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
<div class="card-subtitle text-truncate">Toledo</div>
<div class="card-detail">
<span class="label label-warning">
<span class="text-truncate-inline">
<span class="text-truncate">Spicy</span>
</span>
<span class="label-item label-item-expand">Spicy</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -209,9 +199,7 @@ exports[`ClayCardGrid should render the default markup 1`] = `
<div class="card-subtitle text-truncate">Mexico</div>
<div class="card-detail">
<span class="label label-danger">
<span class="text-truncate-inline">
<span class="text-truncate">Very Spicy</span>
</span>
<span class="label-item label-item-expand">Very Spicy</span>
</span>
</div>
</div>
Expand Down
52 changes: 13 additions & 39 deletions packages/clay-card/src/__tests__/__snapshots__/ClayFileCard.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,9 +136,7 @@ exports[`ClayFileCard should render a ClayFileCard with labelStyle \`danger colo
<div class="card-title text-truncate">My Title</div>
<div class="card-detail">
<span class="label label-danger">
<span class="text-truncate-inline">
<span class="text-truncate">Approved</span>
</span>
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</div>
Expand All @@ -163,9 +161,7 @@ exports[`ClayFileCard should render a ClayFileCard with labelStyle \`info color\
<div class="card-title text-truncate">My Title</div>
<div class="card-detail">
<span class="label label-info">
<span class="text-truncate-inline">
<span class="text-truncate">Approved</span>
</span>
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</div>
Expand All @@ -190,9 +186,7 @@ exports[`ClayFileCard should render a ClayFileCard with labelStyle \`secondary c
<div class="card-title text-truncate">My Title</div>
<div class="card-detail">
<span class="label label-secondary">
<span class="text-truncate-inline">
<span class="text-truncate">Approved</span>
</span>
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</div>
Expand All @@ -217,9 +211,7 @@ exports[`ClayFileCard should render a ClayFileCard with labelStyle \`success col
<div class="card-title text-truncate">My Title</div>
<div class="card-detail">
<span class="label label-success">
<span class="text-truncate-inline">
<span class="text-truncate">Approved</span>
</span>
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</div>
Expand All @@ -244,9 +236,7 @@ exports[`ClayFileCard should render a ClayFileCard with labelStyle \`warning col
<div class="card-title text-truncate">My Title</div>
<div class="card-detail">
<span class="label label-warning">
<span class="text-truncate-inline">
<span class="text-truncate">Approved</span>
</span>
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</div>
Expand All @@ -271,19 +261,13 @@ exports[`ClayFileCard should render a ClayFileCard with labels with styles mappe
<div class="card-title text-truncate">My Title</div>
<div class="card-detail">
<span class="label label-success">
<span class="text-truncate-inline">
<span class="text-truncate">Approved</span>
</span>
<span class="label-item label-item-expand">Approved</span>
</span>
<span class="label label-warning">
<span class="text-truncate-inline">
<span class="text-truncate">Pending</span>
</span>
<span class="label-item label-item-expand">Pending</span>
</span>
<span class="label label-danger">
<span class="text-truncate-inline">
<span class="text-truncate">Error</span>
</span>
<span class="label-item label-item-expand">Error</span>
</span>
</div>
</div>
Expand All @@ -308,9 +292,7 @@ exports[`ClayFileCard should render a ClayFileCard with one label 1`] = `
<div class="card-title text-truncate">My Title</div>
<div class="card-detail">
<span class="label label-secondary">
<span class="text-truncate-inline">
<span class="text-truncate">Approved</span>
</span>
<span class="label-item label-item-expand">Approved</span>
</span>
</div>
</div>
Expand Down Expand Up @@ -609,14 +591,10 @@ exports[`ClayFileCard should render a ClayFileCard with two labels 1`] = `
<div class="card-title text-truncate">My Title</div>
<div class="card-detail">
<span class="label label-secondary">
<span class="text-truncate-inline">
<span class="text-truncate">Approved</span>
</span>
<span class="label-item label-item-expand">Approved</span>
</span>
<span class="label label-secondary">
<span class="text-truncate-inline">
<span class="text-truncate">Pending</span>
</span>
<span class="label-item label-item-expand">Pending</span>
</span>
</div>
</div>
Expand All @@ -641,14 +619,10 @@ exports[`ClayFileCard should render a ClayFileCard with two labels with styles 1
<div class="card-title text-truncate">My Title</div>
<div class="card-detail">
<span class="label label-warning">
<span class="text-truncate-inline">
<span class="text-truncate">Approved</span>
</span>
<span class="label-item label-item-expand">Approved</span>
</span>
<span class="label label-danger">
<span class="text-truncate-inline">
<span class="text-truncate">Pending</span>
</span>
<span class="label-item label-item-expand">Pending</span>
</span>
</div>
</div>
Expand Down
Loading

0 comments on commit ac72122

Please sign in to comment.