feat(): set line-height to the expansion-panel title and subtitle#2237
Open
adrianptrv wants to merge 1 commit into
Open
feat(): set line-height to the expansion-panel title and subtitle#2237adrianptrv wants to merge 1 commit into
adrianptrv wants to merge 1 commit into
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses text clipping in the igc-expansion-panel header by ensuring the slotted title and subtitle use a font-dependent line height, preventing descenders (e.g., “g”, “p”, “y”) from being cut off—especially noticeable with some Windows default fonts and/or external typography resets.
Changes:
- Set
line-height: normalon the slotted title content. - Set
line-height: normalon the slotted subtitle content.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes: #1978
There were actually two separate issues in this bug.
The first issue came from the Bootstrap CDN import, which applies global styles to all

headingelements.As a result, in the sample, our slotted

h1andh6elements received a fixedline-heightof 1.2. This value was too small for some of the used fonts (mainly noticeable with the default Windows OS font), causing parts of the text to overflow outside of the element.The only way to make our component styles override those externally applied styles would be to add
!importantto our title and subtitle classes, which we prefer to avoid.If we still want to use external styles such as the Bootstrap CDN import, we should be more mindful of which elements we are slotting into the component slots. For the Expansion Panel
titleandsubtitlespecifically, the best approach is to usespanelements. (We are currently working on another task to improve the documentation for slotted elements and clarify which elements are recommended to use in each slot.)However, regarding the second issue, I tried removing the Bootstrap CDN import, and after doing so, I noticed that the title still had the same problem. The set
font-sizeandline-heightvalues were too close, which again caused some fonts (mostly the default Windows OS font) to overflow outside of the element. Because of this, I changed theline-heighttonormalinstead of using a fixed value. This ensures that the text always renders correctly regardless of the font being used.