Skip to content

fix: add right margin to <Button kind='inline'/> using icons#1664

Merged
dsmmcken merged 3 commits intomainfrom
dmckenzie_button_inline_fix
Dec 4, 2023
Merged

fix: add right margin to <Button kind='inline'/> using icons#1664
dsmmcken merged 3 commits intomainfrom
dmckenzie_button_inline_fix

Conversation

@dsmmcken
Copy link
Copy Markdown
Contributor

@dsmmcken dsmmcken commented Nov 30, 2023

btn-inline did not have a rule to add margin to svgs in the css, like other kinds. This should do it in a backwards compatible way, and ensure all button kinds have the correct margin. We have a bunch of css for other kinds that would be no longer necessary, but not removing in case we use it in a non-standard way elsewhere.

// previously missing margin between icon and text
<Button kind="inline" icon="dhTruck">Test</Button>

edit: was somewhat more complicated then expected, because children doesn't mean visible children

// should handle this case without adding margin
<Button kind="inline" icon="dhTruck"><DropdownMenu/></Button>

btn-inline did not have a rule to add margin to svgs in the css, like other kinds. This should do it in a backwards compitable way, and ensure all button kinds have the correct margin. We have a bunch of css for other kinds that would be no longer necessary, but not removing in case we use it in a non-standard way elsewhere.

```jsx
// previously missing margin between icon and text
<button kind="inline" icon="dhTruck">Test</Button>
```
@dsmmcken dsmmcken requested a review from mattrunyon November 30, 2023 16:42
@codecov
Copy link
Copy Markdown

codecov Bot commented Nov 30, 2023

Codecov Report

Attention: 10 lines in your changes are missing coverage. Please review.

Comparison is base (c0cc966) 46.62% compared to head (6da3bd0) 46.64%.
Report is 2 commits behind head on main.

Files Patch % Lines
packages/components/src/Button.tsx 16.66% 10 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #1664      +/-   ##
==========================================
+ Coverage   46.62%   46.64%   +0.02%     
==========================================
  Files         597      599       +2     
  Lines       36620    36681      +61     
  Branches     9172     9196      +24     
==========================================
+ Hits        17073    17109      +36     
- Misses      19495    19520      +25     
  Partials       52       52              
Flag Coverage Δ
unit 46.64% <16.66%> (+0.02%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Copy Markdown
Collaborator

@mattrunyon mattrunyon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. Just wanted to add a little more context to the comment for future us

Comment thread packages/components/src/Button.tsx Outdated
Co-authored-by: Matthew Runyon <matthewrunyon@deephaven.io>
@dsmmcken dsmmcken requested a review from mattrunyon December 4, 2023 17:17
@dsmmcken dsmmcken enabled auto-merge (squash) December 4, 2023 17:18
@dsmmcken dsmmcken merged commit fd8a6c6 into main Dec 4, 2023
@dsmmcken dsmmcken deleted the dmckenzie_button_inline_fix branch December 4, 2023 17:40
@github-actions github-actions Bot locked and limited conversation to collaborators Dec 4, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants