mi6
Dismissible chip leaves gap to the left of other content when dismissed in a row
Summary of the bug
When several dismissible chips are displayed in a row, dismissing the first causes a gap to appear on the left of the remaining chips, forcing it out of line with other content on the page. The issue is amplified the more chips that are dismissed.
🪜 How to reproduce
- Go to the dismissible story in storybook.
- Dismiss some of the light chips on the first row.
- See the error
📸 Screenshots or code
🧐 Expected behaviour
The chips should remain inline with other content on the page, to not disrupt the reading flow and alignment of web pages.
📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Given that a dismissible chip exists on a page When it renders Then it should be inline with the other page content
Given that multiple dismissible chips exist on a page When the first is dismissed Then the second should be inline with the other page content
Additional info
Potentially caused by the styling applied to the host element, since when it is dismissed the content within the shadow dom is gone but the host persists on the page.
This may also explain the slight overlapping on the left shown in the first image.
