Skip to content

Commit

Permalink
Dropdown: add marginStart to selected check icon (#3951)
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlbertCarreras
AlbertCarreras authored Jan 17, 2025
1 parent 45d7c1e commit 87da6f6
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 38 deletions.
6 changes: 4 additions & 2 deletions packages/gestalt/src/Dropdown/OptionItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,12 +148,14 @@ const OptionItemWithForwardRef = forwardRef<HTMLElement | null | undefined, Prop
alignItems="center"
color="transparent"
display={!iconEnd ? 'flex' : 'none'}
justifyContent="center"
justifyContent="end"
marginStart={2}
minWidth={12}
>
{isSelectedItem && !iconEnd ? (
<Icon accessibilityLabel="Selected item" color="default" icon="check" size={12} />
) : (
<Box width={12} />
<Box minWidth={12} />
)}
</Box>
{iconEnd && (
Expand Down
90 changes: 54 additions & 36 deletions packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,11 +66,12 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -108,11 +109,12 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -150,11 +152,12 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -192,11 +195,12 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -234,11 +238,12 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -276,11 +281,12 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -318,11 +324,12 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -360,11 +367,12 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -402,11 +410,12 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -444,11 +453,12 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -486,11 +496,12 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -528,11 +539,12 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -621,11 +633,12 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -663,11 +676,12 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -711,11 +725,12 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayNone xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayNone xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
<div
Expand Down Expand Up @@ -803,11 +818,12 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayFlex xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayFlex xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
</div>
Expand Down Expand Up @@ -881,11 +897,12 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayNone xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayNone xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
<div
Expand Down Expand Up @@ -949,11 +966,12 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
</div>
</div>
<div
class="box justifyCenter transparent xsDisplayNone xsItemsCenter"
class="box justifyEnd marginStart200 transparent xsDisplayNone xsItemsCenter"
style="min-width: 12px;"
>
<div
class="box"
style="width: 12px;"
style="min-width: 12px;"
/>
</div>
<div
Expand Down

0 comments on commit 87da6f6

Please sign in to comment.