[Action / Pad / Group] Extra border when using Action Pad / Group / Action in Grid layout

[macandcheese]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When using Action Pad in "Grid" layout, along with an Action Group and set of Actions - there is 1px extra at the left and right edges.

Expected Behavior

I'd expect the Action Group to extend fully to the edges of the Pad and not have 1px transparent border.

Reproduction Sample

https://codepen.io/mac_and_cheese/pen/mdQzRXo?editors=1000

Reproduction Steps

1. Open Codepen

Reproduction Version

Latest

Relevant Info

No response

Regression?

No response

Priority impact

p4 - not time sensitive

Impact

No response

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react

Esri team

Calcite (design)

[maxpatiiuk]

Besides 1px gap, there is also a 1px padding (only if layout is grid):

Fortunately, it's easy enough to override with css

[SkyeSeitz]

I agree Action Group should extend fully to the edges of the Pad without 1px transparent border. However, I could see the dividing borders between Actions remaining on layout=grid to provide some visual structure when there are both rows and columns.

[macandcheese]

I think that's a good medium - the visual border isn't needed with a single row Action Pad or Action Group, but when there are multiple rows of Actions in a layout="grid" - I agree having the border there is nice. I will update OP.

[maxpatiiuk]

This issue wasn't a big priority before because I could overwrite the padding and gap by setting styles on <calcite-action-grid>, but in Calcite 1.7.0, the grid is now applied on a shadow DOM element, rather than on the host element (ever since commit b34f36d @driskull)

Thus, after Calcite update, I am not able to overwrite these styles without going into shadow dom, which broke my UI:

(before update on the left; after update on the right)

Can you please either remove padding, or add a CSS variable to customize it?
I would appreciate the removal/customization of gap too, but that is a bit less critical as I can change grid background to mask it (though, there would still be a small issue of a 1px unclickable areas between buttons, which could lead to bad UX for a tacktile widget like a D-pad)

(this is needed before the next JS SDK release a month from now)

[jcfranco]

As a workaround, could you override the background-color of the action-pad to at least make the grid spacing less apparent (see https://codepen.io/jcfranco/pen/MWZePdb?editors=1000)?

[maxpatiiuk]

yes, that's why I mentioned:

but that is a bit less critical as I can change grid background to mask it

and the consequence:

though, there would still be a small issue of a 1px unclickable areas between buttons, which could lead to bad UX for a tacktile widget like a D-pad

but again, the padding:1px is a larger issue

[jcfranco]

but that is a bit less critical as I can change grid background to mask it

Whoops. Sorry I missed that. 😅

@macandcheese Is there an existing CSS prop we could add to action-pad for this?

[driskull]

I think we would need to introduce a css var on the action-group for this.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 1.9.0-next.5 with the --calcite-action-group-gap and --calcite-action-group-padding css variables (when the Action Group's layout is set to "grid":

  calcite-action-group {
    --calcite-action-group-gap: 0;
    --calcite-action-group-padding: 0;
  }