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

Action: icon aligned at end overlaps with indicator . #6568

Closed
anveshmekala opened this issue Mar 6, 2023 · 4 comments
Closed

Action: icon aligned at end overlaps with indicator . #6568

anveshmekala opened this issue Mar 6, 2023 · 4 comments
Labels
0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. design Issues that need design consultation prior to development. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive needs triage Planning workflow - pending design/dev review.

Comments

@anveshmekala
Copy link
Contributor

anveshmekala commented Mar 6, 2023

Actual Behavior

When the icon is aligned to the end of the action with text-enabled turned off, it overlaps with the indicator icon.

C446887F-B595-4369-8401-08A7C0D42533_4_5005_c

Expected Behavior

The icon shouldn't be overlapping with indicator icon.

Reproduction Sample

https://codepen.io/ANVESHMEKALA/pen/JjayyWX?editors=100

Reproduction Steps

  1. Observe the first calcite-action in the codepen with no text overlaps with indicator icon.
  2. The second calcite-action with text-enabled with indicator icon has no overlap.

Reproduction Version

1.0.7

Relevant Info

This issue could be related to #5860

Regression?

No response

Priority impact

p3 - not time sensitive

Impact

No response

Esri team

N/A

@anveshmekala anveshmekala added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Mar 6, 2023
@github-actions github-actions bot added the impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive label Mar 6, 2023
@geospatialem geospatialem added the design Issues that need design consultation prior to development. label May 2, 2023
@geospatialem
Copy link
Member

@ashetland @SkyeSeitz Is the action and indicator placement by design? Wondering if we need to consider this request for implementation.

@ashetland
Copy link
Contributor

I think this is a byproduct of a funky/invalid configuration. If we look at it in the context of an Action Bar, when collapsed, the indicator placement is correct.
CleanShot 2023-05-02 at 10 31 09@2x
CleanShot 2023-05-02 at 10 30 57@2x

@SkyeSeitz
Copy link

Yes, this is by design - the indicator should overlap with icon when text is not enabled. My hesitation with designing the indicator to sit to the side of the icon on alignment=end is the space reserved for the indicator becomes a bit awkward when text isn't present. Overlapping the icon when text-enabled=false seems the most space efficient and consistent with the collapsed state of Action Bar imo.
image

@geospatialem
Copy link
Member

Awesome, thank you both. Will close this issue out per Aaron and Skye's notes above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
0 - new New issues that need assignment. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. design Issues that need design consultation prior to development. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive needs triage Planning workflow - pending design/dev review.
Projects
None yet
Development

No branches or pull requests

4 participants