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(kcopy): icon having left margin when format is hidden #1897

Merged

Conversation

kleinfreund
Copy link
Contributor

@kleinfreund kleinfreund commented Dec 7, 2023

Summary

fix(kcopy): icon having left margin when format is hidden

Fix an issue when using KCopy’s props.format being set to 'hidden' that adds an unnecessary left margin to the icon even though no text is shown.

chore(kcopy): remove unused styles

fix(kcopy): rendering badgeLabel content when badgeLabel isn’t set

Signed-off-by: Philipp Rudloff [email protected]

Notes

  • This slightly narrows the gap between text and copy icon when using props.badge on account of .truncate-content adding a right marging and .text-icon-wrapper adding a left margin. It seems like this gap is unintentionally big currently.
  • There is one more instance in KCopy where using gap on a container would be a more robust strategy to create space between elements: .copy-badge-text. I left this untouched as it’s not strictly speaking a visual bug.
  • Is .k-copy { &-badge-text { margin-right: var(--kui-space-40, $kui-space-40); } } a dead style? I think nothing is actually using it so I’m removing it in 466ba91.

Screenshots

Note the difference in gap for format hidden to the blue box.

Before After
image image
image image

PR Checklist

  • Conventional Commits all commits follow the conventional commit standards outlined in the main README.
  • Tests coverage: test coverage was added for new features and bug fixes
  • Docs: includes a technically accurate README

@kleinfreund kleinfreund self-assigned this Dec 7, 2023
@kleinfreund kleinfreund requested a review from a team as a code owner December 7, 2023 12:07
Copy link

netlify bot commented Dec 7, 2023

Deploy Preview for kongponents-sandbox ready!

Name Link
🔨 Latest commit 6cebded
🔍 Latest deploy log https://app.netlify.com/sites/kongponents-sandbox/deploys/6571cc8cd0d3df0008c1813c
😎 Deploy Preview https://deploy-preview-1897--kongponents-sandbox.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Dec 7, 2023

Deploy Preview for kongponents ready!

Name Link
🔨 Latest commit 6cebded
🔍 Latest deploy log https://app.netlify.com/sites/kongponents/deploys/6571cc8cb0e13f000859f171
😎 Deploy Preview https://deploy-preview-1897--kongponents.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Philipp Rudloff added 3 commits December 7, 2023 14:33
Fix an issue when using KCopy’s `props.format` being set to `'hidden'` that adds an unnecessary left margin to the icon even though no text is shown.

Signed-off-by: Philipp Rudloff <[email protected]>
Signed-off-by: Philipp Rudloff <[email protected]>
@kleinfreund kleinfreund force-pushed the fix/kcopy-having-left-margin-when-format-is-hidden branch from 8becf64 to 6cebded Compare December 7, 2023 13:45
@kleinfreund kleinfreund merged commit 9597f9e into alpha Dec 7, 2023
9 checks passed
@kleinfreund kleinfreund deleted the fix/kcopy-having-left-margin-when-format-is-hidden branch December 7, 2023 15:28
@kleinfreund kleinfreund removed their assignment Dec 7, 2023
kongponents-bot pushed a commit that referenced this pull request Dec 7, 2023
# [9.0.0-alpha.71](v9.0.0-alpha.70...v9.0.0-alpha.71) (2023-12-07)

### Bug Fixes

* **kcopy:** icon having left margin when format is hidden ([#1897](#1897)) ([9597f9e](9597f9e))
@kongponents-bot
Copy link
Collaborator

🎉 This PR is included in version 9.0.0-alpha.71 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants