New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support overriding the line height in calcite-block
with a css variable
#6443
Comments
calcite-block
with a css variablecalcite-block
with a css variable
Hi @ethanbdev - is it possible you have conflicting styles or another version CC in play? This is what I'm seeing with various combinations of collapsible and slotted actions in 1.0.3 : https://codepen.io/mac_and_cheese/pen/NWBVmRw?editors=100 This seems like a place we'd like to standardize on an appropriate line height. cc @ashetland / @SkyeSeitz for design input. |
Second that from the Figma side as well. We are already using a 16px line height defined in So hopefully that is good news, @ethanbdev :) |
Okay, thanks for the input! Yeah I am seeing some inconsistency trying to apply the line height in different deployments of the components we are building. Does it seem like then that the second screen shot has too much line height and I need to investigate something? |
@geospatialem - for triage - issue could be scoped to fixing above. @ethanbdev - is that an ok resolution? I know you mentioned making the |
I think if it looks like the screenshot from @SkyeSeitz thats perfect, and I think I was just confused about the collabsible / non-collabsible difference. As an aside, this looks like NOT the default right? This is what I am trying to fix: |
Correct, the line height in that screenshot doesn't match the default for the component. |
Add a p- tag to this.. would be great to standardize the line height getting applied inside the block |
It looks like this issue is missing some information:
Issues without reproduction samples may not be prioritized. If you were unable to create a sample, please try to answer any questions that arise once development begins. Thanks for your understanding. |
Thanks @ethanbdev - will get this prioritized. |
**Related Issue:** #6443 ## Summary The previous Tailwind text declaration wasn't setting a line-height, meaning the description could unintentionally inherit line-height from a parent container. This wasn't affecting the `collapsible` block as the rendered button has additional style set that prevents the issue. | Before | After | | ----------- | ----------- | | <img width="460" alt="Screen Shot 2023-04-03 at 5 53 38 PM" src="https://user-images.githubusercontent.com/4733155/229659153-e9cfb318-1bdc-4778-8545-12ff70d9c110.png"> | <img width="460" alt="Screen Shot 2023-04-03 at 5 53 47 PM" src="https://user-images.githubusercontent.com/4733155/229659124-a4b4f3a6-b3c6-44d5-a89a-82032cf3d2bc.png"> |
Installed and assigned for verification. |
Verified for non-collapsable |
Description
For some use cases, have received feedback that the line height in the calcite block description text is a bit much:
vs
It would be nice to customize this via a css variable to give some extra flexibility to fit different amounts of text.
Alternatively, the prop
description
could accept a<div>
or<p>
tagIt seems like there might also be some interference with the
collabsible
propertyAcceptance Criteria
Provide a way to override the default line height for the calcite block description text
Relevant Info
No response
Which Component
calcite-block
Example Use Case
No response
Esri team
ArcGIS Web Analysis
The text was updated successfully, but these errors were encountered: