Skip to content

Commit

Permalink
Merge pull request #23068 from Automattic/fix/compact-button-icon
Browse files Browse the repository at this point in the history 
Components: Add gap between icon and button text
  • Loading branch information
@iamtakashi
iamtakashi authored Mar 16, 2018
2 parents 8ed77d9 + 0101a74 commit 79d4784
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 35 deletions.
102 changes: 68 additions & 34 deletions client/components/button/docs/example.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,8 @@ class Buttons extends React.PureComponent {
<div className="docs__design-button-row">
<Button>Button</Button>
<Button>
<Gridicon icon="heart" /> Icon button
<Gridicon icon="heart" />
<span className="button-text">Icon button</span>
</Button>
<Button>
<Gridicon icon="plugins" />
Expand All @@ -69,7 +70,8 @@ class Buttons extends React.PureComponent {
<div className="docs__design-button-row">
<Button scary>Scary button</Button>
<Button scary>
<Gridicon icon="globe" /> Scary icon button
<Gridicon icon="globe" />
<span className="button-text">Scary icon button</span>
</Button>
<Button scary>
<Gridicon icon="pencil" />
Expand All @@ -81,7 +83,8 @@ class Buttons extends React.PureComponent {
<div className="docs__design-button-row">
<Button primary>Primary button</Button>
<Button primary>
<Gridicon icon="camera" /> Primary icon button
<Gridicon icon="camera" />
<span className="button-text">Primary icon button</span>
</Button>
<Button primary>
<Gridicon icon="time" />
Expand All @@ -95,7 +98,8 @@ class Buttons extends React.PureComponent {
Primary scary button
</Button>
<Button primary scary>
<Gridicon icon="user-circle" /> Primary scary icon button
<Gridicon icon="user-circle" />
<span className="button-text">Primary scary icon button</span>
</Button>
<Button primary scary>
<Gridicon icon="cart" />
Expand All @@ -106,53 +110,65 @@ class Buttons extends React.PureComponent {
</div>
<div className="docs__design-button-row">
<Button borderless>
<Gridicon icon="cross" /> Remove
<Gridicon icon="cross" />
<span className="button-text">Remove</span>
</Button>
<Button borderless>
<Gridicon icon="trash" /> Trash
<Gridicon icon="trash" />
<span className="button-text">Trash</span>
</Button>
<Button borderless>
<Gridicon icon="link-break" /> Disconnect
<Gridicon icon="link-break" />
<span className="button-text">Disconnect</span>
</Button>
<Button borderless>
<Gridicon icon="trash" />
</Button>
<Button borderless disabled>
<Gridicon icon="cross" /> Remove
<Gridicon icon="cross" />
<span className="button-text">Remove</span>
</Button>
</div>
<div className="docs__design-button-row">
<Button borderless primary>
<Gridicon icon="cross" /> Remove
<Gridicon icon="cross" />
<span className="button-text">Remove</span>
</Button>
<Button borderless primary>
<Gridicon icon="trash" /> Trash
<Gridicon icon="trash" />
<span className="button-text">Trash</span>
</Button>
<Button borderless primary>
<Gridicon icon="link-break" /> Disconnect
<Gridicon icon="link-break" />
<span className="button-text">Disconnect</span>
</Button>
<Button borderless primary>
<Gridicon icon="trash" />
</Button>
<Button borderless primary disabled>
<Gridicon icon="cross" /> Remove
<Gridicon icon="cross" />
<span className="button-text">Remove</span>
</Button>
</div>
<div className="docs__design-button-row">
<Button borderless scary>
<Gridicon icon="cross" /> Remove
<Gridicon icon="cross" />
<span className="button-text">Remove</span>
</Button>
<Button borderless scary>
<Gridicon icon="trash" /> Trash
<Gridicon icon="trash" />
<span className="button-text">Trash</span>
</Button>
<Button borderless scary>
<Gridicon icon="link-break" /> Disconnect
<Gridicon icon="link-break" />
<span className="button-text">Disconnect</span>
</Button>
<Button borderless scary>
<Gridicon icon="trash" />
</Button>
<Button borderless scary disabled>
<Gridicon icon="cross" /> Remove
<Gridicon icon="cross" />
<span className="button-text">Remove</span>
</Button>
</div>
<div className="docs__design-button-row">
Expand All @@ -164,7 +180,8 @@ class Buttons extends React.PureComponent {
Primary busy button
</Button>
<Button primary scary busy>
<Gridicon icon="trash" /> Primary scary busy button
<Gridicon icon="trash" />
<span className="button-text">Primary scary busy button</span>
</Button>
</div>
</Card>
Expand All @@ -175,7 +192,8 @@ class Buttons extends React.PureComponent {
<div className="docs__design-button-row">
<Button compact>Compact button</Button>
<Button compact>
<Gridicon icon="heart" /> Compact icon button
<Gridicon icon="heart" />
<span className="button-text">Compact icon button</span>
</Button>
<Button compact>
<Gridicon icon="plugins" />
Expand All @@ -189,7 +207,8 @@ class Buttons extends React.PureComponent {
Compact scary button
</Button>
<Button compact scary>
<Gridicon icon="globe" /> Compact scary icon button
<Gridicon icon="globe" />
<span className="button-text">Compact scary icon button</span>
</Button>
<Button compact scary>
<Gridicon icon="pencil" />
Expand All @@ -203,7 +222,8 @@ class Buttons extends React.PureComponent {
Compact primary button
</Button>
<Button compact primary>
<Gridicon icon="camera" /> Compact primary icon button
<Gridicon icon="camera" />
<span className="button-text">Compact primary icon button</span>
</Button>
<Button compact primary>
<Gridicon icon="time" />
Expand All @@ -217,7 +237,8 @@ class Buttons extends React.PureComponent {
Compact primary scary button
</Button>
<Button compact primary scary>
<Gridicon icon="user-circle" /> Compact primary scary icon button
<Gridicon icon="user-circle" />
<span className="button-text">Compact primary scary icon button</span>
</Button>
<Button compact primary scary>
<Gridicon icon="cart" />
Expand All @@ -228,53 +249,65 @@ class Buttons extends React.PureComponent {
</div>
<div className="docs__design-button-row">
<Button compact borderless>
<Gridicon icon="cross" /> Remove
<Gridicon icon="cross" />
<span className="button-text">Remove</span>
</Button>
<Button compact borderless>
<Gridicon icon="trash" /> Trash
<Gridicon icon="trash" />
<span className="button-text">Trash</span>
</Button>
<Button compact borderless>
<Gridicon icon="link-break" /> Disconnect
<Gridicon icon="link-break" />
<span className="button-text">Disconnect</span>
</Button>
<Button compact borderless>
<Gridicon icon="trash" />
</Button>
<Button compact borderless disabled>
<Gridicon icon="cross" /> Remove
<Gridicon icon="cross" />
<span className="button-text">Remove</span>
</Button>
</div>
<div className="docs__design-button-row">
<Button compact primary borderless>
<Gridicon icon="cross" /> Remove
<Gridicon icon="cross" />
<span className="button-text">Remove</span>
</Button>
<Button compact primary borderless>
<Gridicon icon="trash" /> Trash
<Gridicon icon="trash" />
<span className="button-text">Trash</span>
</Button>
<Button compact primary borderless>
<Gridicon icon="link-break" /> Disconnect
<Gridicon icon="link-break" />
<span className="button-text">Disconnect</span>
</Button>
<Button compact primary borderless>
<Gridicon icon="trash" />
</Button>
<Button compact primary borderless disabled>
<Gridicon icon="cross" /> Remove
<Gridicon icon="cross" />
<span className="button-text">Remove</span>
</Button>
</div>
<div className="docs__design-button-row">
<Button compact borderless scary>
<Gridicon icon="cross" /> Remove
<Gridicon icon="cross" />
<span className="button-text">Remove</span>
</Button>
<Button compact borderless scary>
<Gridicon icon="trash" /> Trash
<Gridicon icon="trash" />
<span className="button-text">Trash</span>
</Button>
<Button compact borderless scary>
<Gridicon icon="link-break" /> Disconnect
<Gridicon icon="link-break" />
<span className="button-text">Disconnect</span>
</Button>
<Button compact borderless scary>
<Gridicon icon="trash" />
</Button>
<Button compact borderless scary disabled>
<Gridicon icon="cross" /> Remove
<Gridicon icon="cross" />
<span className="button-text">Remove</span>
</Button>
</div>
<div className="docs__design-button-row">
Expand All @@ -288,7 +321,8 @@ class Buttons extends React.PureComponent {
Primary busy button
</Button>
<Button compact primary scary busy>
<Gridicon icon="trash" /> Compact primary scary busy button
<Gridicon icon="trash" />
<span className="button-text">Compact primary scary busy button</span>
</Button>
</div>
</Card>
Expand Down
5 changes: 4 additions & 1 deletion client/components/button/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ button {
.gridicon {
top: 5px;
margin-top: -8px;
margin-right: 4px;
}
// Make the left margin of the small plus icon visually less huge
.gridicons-plus-small {
Expand Down Expand Up @@ -104,6 +103,10 @@ button {
margin-top: -2px;
width: 18px;
height: 18px;

&:not(:last-child) {
margin-right: 4px;
}
}
}

Expand Down

0 comments on commit 79d4784

Please sign in to comment.