Checkboxes are misaligned when used in a list

Vonage / vivid-react

Typescript friendly Reactjs :atom: wrappers/bindings for Vonage's web UI 🎨 toolbelt

https://www.npmjs.com/package/@vonage/vivid-react

5 stars 3 forks source link

Checkboxes are misaligned when used in a list #45

Closed k-paxian closed 2 years ago

k-paxian commented 2 years ago

<VwcList>
      <VwcCheckListItem>foo</VwcCheckListItem>
      <VwcCheckListItem>bar</VwcCheckListItem>
</VwcList>

Originated from: https://vonage.slack.com/archives/C013F0YKH99/p1655985327387479

k-paxian commented 2 years ago

Post mortem

@vonage/vwc-list/vwc-check-list-item was not tested in isolation(mainly because of storybook environment, which is importing almost all vivid elements in a bulk it works properly there), it uses material checkbox under the hood, but means to use vwc-checkbox but doesn't import the element explicitly.

Since those extra styles are a part of that import we have broken expectations when this checklist is used in isolation

k-paxian commented 2 years ago

fixed in aca4618368043b902b5c66da473ab71b814f6ac1 & https://github.com/Vonage/vivid/pull/1325 very very similar bug mechanic is here #36