Action: text-only actions render off-centered #6879

paulcpederson · 2023-04-27T19:09:13Z

Actual Behavior

There is an extra margin to the right of a calcite action which prevents it from being properly centered in cases where the action is displayed inline with an auto width.

Expected Behavior

Shoudl be able to render an action which is just text where the text is centered in the bounding box of the action.

Reproduction Sample

https://codepen.io/paulcp/pen/zYmzEdQ

Reproduction Steps

Notice the extra space to the right of the word "testing"

Reproduction Version

v1.3.1

Relevant Info

All OS, all browsers.

Caused by #6562 , broken in 1.1.0

Regression?

v1.0.8

Priority impact

p4 - not time sensitive

Impact

We'd like to display a text-only action. We already have these in some interfaces so it will be broken until the upstream calcite issue is fixed.

Esri team

ArcGIS Online

macandcheese · 2023-05-23T21:39:13Z

+1 - this is pretty noticeable in some interfaces. cc @SkyeSeitz @ashetland

ashetland · 2023-05-23T21:50:11Z

I think ideally the fix in pr #6562 would only apply to Actions inside an Action Bar. Another possible way to address this might be to have Action Bar account for the space needed by the indicator instead of the Actions themselves. Are vertical Action Bars the only place the indicator space matters? I'd expect horizontal Action Bars could be a little more fluid, like the behavior in Chip Group.

geospatialem · 2023-07-19T18:49:08Z

A considerations/observation is when icon only present, it is positioned absolute.

ashetland · 2023-09-25T19:36:55Z

Figma file for this issue. Restores Action to previous behavior and requires Action Bar accommodate the needed space for the indicator.

github-actions · 2023-09-25T19:37:25Z

cc @geospatialem, @brittneytewks

SkyeSeitz · 2023-09-26T21:52:24Z

Figma file for this issue. Restores Action to previous behavior and requires Action Bar accommodate the needed space for the indicator.

Accounting for the indicator space at the Action Bar level makes a lot of sense 👍🏽

driskull · 2023-11-13T17:52:55Z

Can we just position the indicator absolutely like we do when there is an icon? This should be a simple fix.

I'm not sure how we're expecting the action bar to account for extra space. The width of the action bar is based off of the action content inside.

macandcheese · 2023-11-13T18:24:02Z

WDYT @SkyeSeitz @ashetland - I think positioning this absolutely on any provided icon makes sense. That would still solve the original issue that was fixed that caused this one (expanding action bar with indicator on longest string).

For cases that an icon is not provided and the Action is text-enabled - it could be displayed alongside the text as it was previous to the change that caused this new issue.

ashetland · 2023-11-13T18:42:46Z

For cases that an icon is not provided and the Action is text-enabled - it could be displayed alongside the text as it was previous to the change that caused this new issue.

Would Action Bar need to expand to accommodate the indicator like it did before in this case? Maybe not the end of the world?

macandcheese · 2023-11-13T18:45:22Z

Yeah, in the case that there are no icons present. But that's a small case and the bump in width is ... less impactful in a negative way... I'd say than the current behavior. The original issue of "action bar with icons becoming wider when indicator is present on longest string" won't occur when icons are used.

**Related Issue:** #6879 ## Summary Ensures extra space is not added to an action. This is solved by: When an icon is present, the indicator will always be appended to the bottom right. This ensures it remains in the same place whether a parent Action Bar is expanded, or not. The indicator moved a couple of px away - in the future I think we can improve this with a border or clipped ring around the indicator to prevent overlap. Also resolves #5860, for icon-only uses. When an icon is not present, the indicator will be positioned adjacent to the text container. | Before | After | | ------------- | ------------- | | <img width="500" alt="Screenshot 2023-11-15 at 5 00 35 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/ae4d202b-260e-411d-b6fc-30fea2c549ea"> | <img width="500" alt="Screenshot 2023-11-15 at 4 58 47 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/284119d3-e8c4-40e1-8272-7ee204a36539"> | | Before | After | | ------------- | ------------- | | <img width="500" alt="Screenshot 2023-11-15 at 5 00 25 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/fe845c89-abb6-4416-8013-5e105c0b3ebf"> | <img width="500" alt="Screenshot 2023-11-15 at 4 59 26 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/89ef62bf-7a7b-4a1f-ba29-3165df698347"> | (Note, in this one, the "beaker" image is NOT an `icon` property, it is just a slotted element - so the indicator is not positioned over it. This isn't really a documented / expected use case.) | Before | After | | ------------- | ------------- | | <img width="500" alt="Screenshot 2023-11-15 at 5 00 47 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/c8722108-d9df-4540-b268-e7c8e263afdd"> | <img width="500" alt="Screenshot 2023-11-15 at 5 01 02 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/d5a06b63-92bc-4e53-a348-505c9d173188"> | | Before | <img width="1030" alt="Screenshot 2023-11-15 at 6 17 38 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/c3ef3696-71bc-4bde-b066-ea56aebd07bd"> | | ------------- | ------------- | | After | <img width="1030" alt="Screenshot 2023-11-15 at 6 17 57 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/61d91130-a637-4257-84b2-42df18ecb790"> | | Before | <img width="1313" alt="Screenshot 2023-11-15 at 6 21 22 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/26289014-9df0-4e3d-ab2e-491be34cf97b"> | | ------------- | ------------- | | After | <img width="1313" alt="Screenshot 2023-11-15 at 6 18 30 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/d32c2249-86ac-4a4f-9ac8-a7cbde0c322c"> |

github-actions · 2023-11-20T18:40:25Z

Installed and assigned for verification.

DitwanP · 2023-11-20T21:53:05Z

Verified locally with the main branch

paulcpederson 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 Apr 27, 2023

github-actions bot added ArcGIS Online Issues logged by ArcGIS Online team members. impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Apr 27, 2023

ashetland added the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label May 31, 2023

geospatialem added design Issues that need design consultation prior to development. p - medium Issue is non core or affecting less that 60% of people using the library estimate - 2 Small fix or update, may require updates to tests. labels Jul 19, 2023

brittneytewks added p - high Issue should be addressed in the current milestone, impacts component or core functionality and removed p - medium Issue is non core or affecting less that 60% of people using the library needs triage Planning workflow - pending design/dev review. labels Aug 17, 2023

brittneytewks added this to the Design Backlog milestone Aug 17, 2023

ashetland modified the milestones: Design Backlog, Design Sprint Next Aug 18, 2023

ashetland self-assigned this Sep 13, 2023

ashetland added 1 - assigned Issues that are assigned to a sprint and a team member. and removed 0 - new New issues that need assignment. labels Sep 13, 2023

ashetland modified the milestones: Design Next, Design Now Sep 13, 2023

ashetland added the ready for dev Issues ready for development implementation. label Sep 25, 2023

github-actions bot added 0 - new New issues that need assignment. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Sep 25, 2023

github-actions bot unassigned ashetland Sep 25, 2023

github-actions bot removed this from the Design Now milestone Sep 25, 2023

macandcheese added this to the 2023 November Priorities milestone Nov 13, 2023

macandcheese removed the 0 - new New issues that need assignment. label Nov 13, 2023

macandcheese self-assigned this Nov 13, 2023

brittneytewks added 1 - assigned Issues that are assigned to a sprint and a team member. and removed needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. labels Nov 13, 2023

This was referenced Nov 13, 2023

Enhance indicator positioning with a wide calcite-action #5860

Closed

fix(action): Ensure action content is correctly spaced #8184

Merged

macandcheese added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 1 - assigned Issues that are assigned to a sprint and a team member. labels Nov 20, 2023

github-actions bot assigned geospatialem, DitwanP, ashetland, SkyeSeitz and brittneytewks and unassigned macandcheese Nov 20, 2023

DitwanP closed this as completed Nov 20, 2023

DitwanP added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Nov 20, 2023

ashetland removed the figma changes Issues that require additions or updates to the Figma UI Kit where no `design` label exists label Nov 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Action: text-only actions render off-centered #6879

Action: text-only actions render off-centered #6879

paulcpederson commented Apr 27, 2023

macandcheese commented May 23, 2023

ashetland commented May 23, 2023

geospatialem commented Jul 19, 2023

ashetland commented Sep 25, 2023

github-actions bot commented Sep 25, 2023

SkyeSeitz commented Sep 26, 2023

driskull commented Nov 13, 2023

macandcheese commented Nov 13, 2023

ashetland commented Nov 13, 2023 •

edited

Loading

macandcheese commented Nov 13, 2023

github-actions bot commented Nov 20, 2023

DitwanP commented Nov 20, 2023

Action: text-only actions render off-centered #6879

Action: text-only actions render off-centered #6879

Comments

paulcpederson commented Apr 27, 2023

Actual Behavior

Expected Behavior

Reproduction Sample

Reproduction Steps

Reproduction Version

Relevant Info

Regression?

Priority impact

Impact

Esri team

macandcheese commented May 23, 2023

ashetland commented May 23, 2023

geospatialem commented Jul 19, 2023

ashetland commented Sep 25, 2023

github-actions bot commented Sep 25, 2023

SkyeSeitz commented Sep 26, 2023

driskull commented Nov 13, 2023

macandcheese commented Nov 13, 2023

ashetland commented Nov 13, 2023 • edited Loading

macandcheese commented Nov 13, 2023

github-actions bot commented Nov 20, 2023

DitwanP commented Nov 20, 2023

ashetland commented Nov 13, 2023 •

edited

Loading