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.

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: add right margin to <Button kind='inline'/> using icons #1664

Merged
merged 3 commits into from
Dec 4, 2023

Conversation

dsmmcken
Copy link
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>
```
Copy link

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
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

packages/components/src/Button.tsx Outdated Show resolved Hide resolved
Co-authored-by: Matthew Runyon <matthewrunyon@deephaven.io>
@dsmmcken dsmmcken enabled auto-merge (squash) December 4, 2023 17:18
@dsmmcken dsmmcken merged commit fd8a6c6 into main Dec 4, 2023
5 checks passed
@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