fix(link): ensure Icon in component has inline display property to respect dimensions of the parent #6349
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 5b0d61e:
|
tomdavies73
force-pushed
the
FE-6197
branch
2 times, most recently
from
b215da6 to
03cbe15
Compare
| @@ -72,6 +73,18 @@ context("Test for Link component", () => { | |||
| tooltipPreview().should("have.text", testCypress); | |||
| }); | |||
|
|
|||
There was a problem hiding this comment.
question: wondering if these cypress tests would be necessary here, given we are testing the same styling with jest tests?
There was a problem hiding this comment.
Good question, technically we could probably get away with just having unit tests, but I thought it was worth just doubling up as we've done the same for other features in Link
There was a problem hiding this comment.
Don't really mind if you leave both unit and CI tests in tbh. However I do think a test story so chromatic can capture it would be best
| parameters: { | ||
| info: { disable: true }, | ||
| chromatic: { | ||
| disableSnapshot: true, | ||
| disableSnapshot: false, |
There was a problem hiding this comment.
This will mean chromatic captures both the DefaultStory and FlexContainer stories. If that's not what you intended I think revert this and set the parameters directly on the FlexContainer story.
FlexContainer.parameters = { chromatic: { disableSnapshot: false }};
…spect dimensions of the parent all children of anchor elements in `Link` have the inline-block display property applied. However due to our new `Icon` font sizes this now causes `Icon`s to not respect the dimensions of parent containers. To mitigate this we've set display to inline instead when `Link`s are rendered with no children and an `Icon`, ensuring the parents dimensions are properly respected fix #6295
|
🎉 This PR is included in version 122.0.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
fix #6295
Proposed behaviour
All elements which are children of anchor elements in
Linkhave theinline-blockdisplay property applied. However, due to our newIconfont sizes this now causesIcons to not respect the dimensions of parent containers.To mitigate this we've set display to
inlineinstead whenLinks are rendered with no children and anIcon, ensuring the parents dimensions are properly respected.Current behaviour
All elements which are children of anchor elements in
Linkhave theinline-blockdisplay property applied, causing a visual bug whereIcons do not properly respect the dimensions of their parent containersChecklist
d.tsfile added or updated if requiredQA
Additional context
Testing instructions
The following CodeSandbox is an example of the broken behaviour.
You can see the new behaviour by looking at the version in the comment by
codesandbox[bot].