topic any success with --calcite-label-margin-bottom? in ArcGIS JavaScript Maps SDK Questions

any success with --calcite-label-margin-bottom?

coryeicher — Mon, 22 Aug 2022 15:24:37 GMT

Hello,

Has anyone been able to update the calcite variable --calcite-label-margin-bottom and have that take effect?

I have tried applying a style with this variable set to the <CalciteLabel> element, and also to a wrapping <div>, but I do not see any change with either approach. I'm trying to change the calcite label element's margin-bottom from 12. I am working in React and bringing in Calcite via esri/calcite-components-react.

Thanks,

Re: any success with --calcite-label-margin-bottom?

ReneRubalcava — Mon, 22 Aug 2022 15:49:40 GMT

You can do it via the :root css.

:root { --calcite-label-margin-bottom: 100px; /*LOL*/ }

That works in a sample I tried it. Might be something with how the framework is loading css too. I would define this in a global css that won't get scoped.

https://codepen.io/odoe/pen/ExEMoBg?editors=1000

Re: any success with --calcite-label-margin-bottom?

coryeicher — Mon, 22 Aug 2022 18:01:22 GMT

Hi Rene,

Thanks for the tip. I tried what you recommended and that did not work on
my end. I've been able to update other calcite css variables without issue.

-Cory

Re: any success with --calcite-label-margin-bottom?

ReneRubalcava — Mon, 22 Aug 2022 18:57:14 GMT

Do you have a repro app? It might be something like the calcite css loading after your variables are defined, but can't really tell without looking at something.

Ok, so I don't know. I tried this with a regular app using the npm install and calcite and can't override it. Weird, looks like the built code has the values baked in. You might need to try a specific css target or wrap it in a span or div maybe.

Re: any success with --calcite-label-margin-bottom?

BenElan — Mon, 22 Aug 2022 22:20:56 GMT

Here is a sample:

https://codesandbox.io/s/calcite-label-margin-bottom-elxnkc?file=/src/App.js

For future reference, Calcite also has an Esri Community which I monitor more closely than this one:

https://community.esri.com/t5/calcite-design-system-questions/bd-p/calcite-design-system-questions

Re: any success with --calcite-label-margin-bottom?

coryeicher — Thu, 25 Aug 2022 14:02:45 GMT

Ben, @ReneRubalcava,

Thanks. I see that your sandbox works, but this is not working in my app. I will prepare a repro app.

-Cory

Re: any success with --calcite-label-margin-bottom?

coryeicher — Thu, 25 Aug 2022 21:15:01 GMT

@BenElan Here is an app to reproduce (attached .zip). See readme.md for build/run steps

The problematic CalciteLabel wraps an address typeahead, built from a CalciteInput + CalciteDropdown.

I actually found a workaround solution for what I was trying to do, but the original issue appears to remain. Setting this calcite variable does not affect the CalciteLabel containing my address typeahead.

In the code, search this to find the bug...

// *** calcite variable not applied ***

... and search this to find/apply my workaround solution:

/** uncomment for my solution **/

Thanks,

-Cory

Re: any success with --calcite-label-margin-bottom?

BenElan — Fri, 26 Aug 2022 17:28:09 GMT

Hmm yeah I'm not sure. It's a pretty big repro app there could be a lot going on. Can you reproduce the issue in a simplified sample? If so I'd be happy to take a closer look.

Re: any success with --calcite-label-margin-bottom?

BenElan — Tue, 30 Aug 2022 23:10:53 GMT

Hi @coryeicher ,

It looks like you are using v0.21.0 of CCR in the repro app. The CSS variable wasn't introduced at that point. It will work in v0.27.0 or later (v0.30.0 is the latest).

The documentation site represents the latest version. If you are stuck on an older version you can use the changelog to determine when a feature was added:

https://github.com/Esri/calcite-components/blob/master/CHANGELOG.md#100-beta84-2022-07-12

You can determine which CC version is being used by a CCR version on the cli:

npm view @esri/calcite-components-react@0.21.0 dependencies["@esri/calcite-components"]

Re: any success with --calcite-label-margin-bottom?

coryeicher — Wed, 31 Aug 2022 18:50:31 GMT

Hi @BenElan

That was it! The variable is working for me after upgrading esri/calcite-components-react to 0.30.0, and also making sure esri/calcite-components is upgraded to 1.0.0-beta.93.

Thanks again,

-Cory