question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Make the gap between Anchor's icon and label configurable

See original GitHub issue

Expected Behavior

Add support in the theme and as a prop to set the gap size between the <Anchor/> component’s icon and label

Actual Behavior

The gap size between the icon and label is set and non-configurable. This same type of issue was fixed for <Button/> components in this PR. There was a comment in the initial request for this change in <Button/>s that states the gap being bound to global.edgeSize.small and can be seen here.

URL, screen shot, or Codepen exhibiting the issue

Anchor-Gap

Steps to Reproduce

  1. N/A

Your Environment

Grommet version: 2.17.4 Browser Name and version: Chrome (latest) Operating System and version (desktop or mobile): MacOS

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
iabhitechcommented, Aug 23, 2021

I need a suggestion, Where can I add this new Gap feature preview in the storybook. Currently, I created a new menu for that as ‘Gap’ as shown in the image. image

Is it fine or not? @britt6612

1reaction
britt6612commented, Aug 23, 2021

@iabhitech it would be great if you can contribute! Feel free to open a PR!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Make the gap between Button's icon and label configurable
The only way to configure the gap right now is to change the theme's global.edgeSize.small value since that's the gap size that Button...
Read more >
icon is moving out of the anchor tag - html - Stack Overflow
The issue is you are using float:right in the <img> tag which take the image out of the parent flow..So remove float:right and...
Read more >
How to Create Anchor Links in WordPress (3 Easy Methods)
Today we'll be diving into how to create anchor links in WordPress and explore why you might want to start using them. From...
Read more >
<a>: The Anchor element - HTML: HyperText Markup Language
The relationship of the linked URL as space-separated link types. target. Where to display the linked URL, as the name for a browsing...
Read more >
Insert the anchor macro | Confluence Cloud - Atlassian Support
Use the Anchor macro · Select the macro placeholder. · Select the Edit icon to open the configuration panel. · Configure the parameters....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found