--calcite-input-message-spacing-value var not inheritable

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

<calcite-input-message> elements retain their default top margin if --calcite-input-message-spacing-value is not set directly on the element, but rather on an ancestor element.

Expected Behavior

<calcite-input-message> elements assume the top margin as set by --calcite-input-message-spacing-value regardless if the var is set directly or on an ancestor element.

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/KKOZKYx

Reproduction Steps

1. Visit the sample and observe the input-message is aligned to the top rather than half-way down the preview area.
2. In the CSS section, uncomment where --calcite-input-message-spacing-value is set directly on the input-message element.
3. Compare the element's positioning with its positioning from step 1. After fixing the bug, they should be the same.

Reproduction Version

2.13.1

Relevant Info

Minimally preferring the var() function's fallback value should work well here:

calcite-design-system/packages/calcite-components/src/components/input-message/input-message.scss

Lines 11 to 12 in 6704555

	--calcite-input-message-spacing-value: theme("spacing.1");
	margin-block-start: var(--calcite-input-message-spacing-value);

-  --calcite-input-message-spacing-value: theme("spacing.1");
-  margin-block-start: var(--calcite-input-message-spacing-value);
+  margin-block-start: var(--calcite-input-message-spacing-value, theme("spacing.1"));

Possibly worth auditing other components to make sure their CSS vars are inheritable.

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

Impact is towards dev productivity and maintainability. The expectation is that CSS is inherently cascading. When that doesn't happen, it's unexpected and takes time to debug. Maintenance-wise, given a collection of elements that should be treated uniformly, it's a better practice to set common styles/vars on a shared ancestor rather than every leaf element.

Calcite package

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

Esri team

ArcGIS Field Apps