diff --git a/.changeset/purple-rivers-divide.md b/.changeset/purple-rivers-divide.md new file mode 100644 index 000000000..3dee0aa79 --- /dev/null +++ b/.changeset/purple-rivers-divide.md @@ -0,0 +1,36 @@ +--- +'@strapi/design-system': patch +--- + +fix: Checkbox Item Not Centered + +Added justify-content: center and align-items: center to Checkbox Indicator component + +Original: + +const CheckboxIndicator = styled(Checkbox.Indicator)` width: 100%; + height: 100%; + cursor: pointer;`; + +Updated: + +const CheckboxIndicator = styled(Checkbox.Indicator)` + +- display: inline-flex; +- pointer-events: auto !important; + width: 100%; + height: 100%; + cursor: pointer; +- justify-content: center; +- align-items: center; + `; + +Refactored inline styling and added it to checkbox indicator stype component + +Original: + + + +Updated: + + diff --git a/packages/design-system/src/components/Checkbox/Checkbox.tsx b/packages/design-system/src/components/Checkbox/Checkbox.tsx index 4f0b6a40e..403ef66d4 100644 --- a/packages/design-system/src/components/Checkbox/Checkbox.tsx +++ b/packages/design-system/src/components/Checkbox/Checkbox.tsx @@ -52,7 +52,7 @@ const CheckboxEl = React.forwardRef( return ( - + {checked === true ? : null} {checked === 'indeterminate' ? : null} @@ -101,9 +101,13 @@ const CheckboxRoot = styled(Checkbox.Root)` `; const CheckboxIndicator = styled(Checkbox.Indicator)` + display: inline-flex; + pointer-events: auto !important; width: 100%; height: 100%; cursor: pointer; + justify-content: center; + align-items: center; `; /* -------------------------------------------------------------------------------------------------