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

**Fix**: Remove unnecessary button margin #893

Merged
merged 2 commits into from
Jan 18, 2019
Merged

**Fix**: Remove unnecessary button margin #893

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
874fda8
Fixes #892: Removes unnecessary button margin
Jan 18, 2019
c57fbfd
Update snapshots
Jan 18, 2019
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
5 changes: 4 additions & 1 deletion src/Button/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,10 @@ const containerStyles: Interpolation<
},
}
: {}),
marginRight: theme.space.small,

"* + &": {
TejasQ marked this conversation as resolved.
Show resolved Hide resolved
marginLeft: theme.space.small,
},
}
}

Expand Down
20 changes: 20 additions & 0 deletions src/Button/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,26 @@ Using a `to` prop navigates automatically, and render proper anchor tags with hr
<Button to="/some-url">Button One</Button>
```

### Neighbor Behavior

`Button`s placed next to other elements need to space their surroundings correctly, whereas individual `Button`s don't displace anything.

```jsx
<Card
action={
<>
<Button condensed>I should have a right margin</Button>
<Button condensed>I should not have a right margin</Button>
</>
}
>
<div style={{ border: "1px solid red", width: "fit-content" }}>
<Button condensed>I should have a right margin</Button>
<Button condensed>I should not have a right margin</Button>
</div>
</Card>
```

### Full-width Buttons

```jsx
Expand Down
2 changes: 1 addition & 1 deletion src/Button/__tests__/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`Button Component Should initialize properly 1`] = `
class="css-ar73w8-Messages"
/>
<button
class="css-19mfxrd-button"
class="css-11s4t93-button"
>
hi
</button>
Expand Down
2 changes: 1 addition & 1 deletion src/ButtonGroup/__tests__/__snapshots__/ButtonGroup.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`ButtonGroup Component Should initialize properly 1`] = `
class="css-1o7twmc-buttongroup"
>
<button
class="css-19mfxrd-button"
class="css-11s4t93-button"
>
Hello
</button>
Expand Down
8 changes: 4 additions & 4 deletions src/Paginator/__tests__/__snapshots__/Paginator.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@ exports[`Paginator Component Should initialize properly 1`] = `
class="css-g700yk-paginator"
>
<button
class="css-1bcwm3d-button"
class="css-tq148m-button"
type="first"
>
first
</button>
<button
class="css-1dxr53j-button"
class="css-pdfiqa-button"
type="previous"
>
<svg
Expand All @@ -44,7 +44,7 @@ exports[`Paginator Component Should initialize properly 1`] = `
of 258
</div>
<button
class="css-1dxr53j-button"
class="css-pdfiqa-button"
type="next"
>
<span>
Expand All @@ -63,7 +63,7 @@ exports[`Paginator Component Should initialize properly 1`] = `
</svg>
</button>
<button
class="css-1bcwm3d-button"
class="css-tq148m-button"
type="last"
>
last
Expand Down