[Tab] Add css custom property to override built-in padding

[macandcheese]

Check existing issues

• [x] I have checked for existing issues to avoid duplicates

Description

Currently, Tab provides built in y-padding that is not overridable in a supported way.

Acceptance Criteria

We should expose a css custom property, such as --calcite-tab-padding. This aligns with Block, Modal, and other components where built-in padding is provided.

Relevant Info

Related to this comment: https://github.com/Esri/calcite-design-system/issues/8139#issuecomment-1830397218

Which Component

Tab / Tabs

Example Use Case

As a user, I want to have a full-height content in a Tab, with no built-in padding.

Priority impact

p4 - not time sensitive

Calcite package

• [X] @esri/calcite-components
• [ ] @esri/calcite-components-angular
• [ ] @esri/calcite-components-react
• [ ] @esri/calcite-design-tokens
• [ ] @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

[RSantosGIS]

Adding from our Teams thread I brought up:

I just updated Studio to Calcite 2.1 from 1.9. I noticed that padding is now being applied to the CalciteTab " element, which is causing our layout to get thrown off and creating an undesirable white stripe above the content. Is there a way to turn off this padding, similar to the x-content-padding prop that exists on other components, or some kind of recommended way to do this?

It looks like the difference is occurring because of a change to the way the padding-block style is being applied. It looks like with the old way, it was a non-inheritable property and so was never actually applied (perhaps your team considered this a bug?), but the new selector is being applied in 2.1 and I can't figure out a way to override it.

Please see the screenshots below:

1.9 (no padding, desired)

2.1 (padding, not desired)

[RSantosGIS]

Adding a follow up comment on this due to the recent R1 completion announcement. This is a style regression in ArcGIS Knowledge Studio. If the proposed property isn't going to make it, we need some kind of guidance on a way to hack/workaround to remove the padding.

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

Verified in 2.3.0-next.1 with https://codepen.io/geospatialem/pen/ZEPXOWL with the tab's new CSS property of --calcite-tab-content-block-padding.

cc @RSantosGIS the property can also specify a value of 0 to support the use case.

<calcite-tab style="--calcite-tab-content-block-padding: 0;">
   ...
</calcite-tab>