topic calcite-block disablePadding deprecated in Calcite Design System Questions

calcite-block disablePadding deprecated

GregoryBologna — Fri, 07 Oct 2022 18:24:54 GMT

How do I use --calcite-block-padding to remove padding on block?

disablePadding disable-padding

deprecated
Use --calcite-block-padding CSS variable instead.

Here's my code

let block = document.createElement('calcite-block');
block.setAttribute('id', 'pao-accordion-block');
block.setAttribute('heading', 'Buffer Results');
block.setAttribute('description', ' '); // populated on table update
block.setAttribute('collapsible', '');
block.setAttribute('open', '');
block.addEventListener(
	'calciteBlockToggle',
	toggleAccordionBlockDescription
);

Re: calcite-block disablePadding deprecated

KittyHurley — Mon, 10 Oct 2022 15:28:10 GMT

Hi @GregoryBologna, you can set the CSS variable on the component:

calcite-block { --calcite-block-padding: 0rem; }

For setting the CSS variable using JavaScript, can use properties:

block.style.setProperty("--calcite-block-padding", "0rem");

There is a new documentation page on web concepts that includes some guidance on CSS variables releasing this week. Will post an update when the page is available.

Re: calcite-block disablePadding deprecated

KittyHurley — Wed, 12 Oct 2022 18:07:54 GMT

Hi @GregoryBologna , we added a new page to the Calcite’s ArcGIS Developers Site around web concepts.

Since we've had a few conversations around a few web component concepts, wanted to share some more in-depth details – if interested in exploring some of the terms further.