[CheckableButton] 3987 - fix checkbox border issue on focus

[lhoffbeck]

WHY are these changes introduced?

Fixes #3987

First noticed this in Admin, the right border disappears when the bulk actions checkbox is focused.

WHAT is this pull request doing?

After investigation, the issue is with how we're dealing with overlapping borders. Subsequent buttons have a margin-left: -1px, so their left border overlaps the right border of the previous element so we don't have a double border:

However, CheckableButton has a border-right: none;. This is fine when the checkbox isn't focused since the Edit customers button's border overlaps the rightmost 1px of 2 selected regardless of whether there's a border underneath or not, but when the checkbox is focused it's also given an increased z-index: 20 which is higher than that of Edit customers. As a result, the rightmost edge of 2 selected now appears above the Edit customers border.

The fix is to re-introduce a border-right to the CheckableButton. When not focused, the border appears beneath the subsequent button's border. When focused, the CheckableButton's border is shown.

10-53-9ffq8-s68sc.video.mp4

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟡 This pull request modifies 2 files and might impact 4 other files. This is an average splash zone for a change, remember to tophat areas that could be affected.

Details:

All files potentially affected (total: 4)

• /src/components/CheckableButton/CheckableButton.tsx
• /src/components/BulkActions/BulkActions.tsx
• /src/components/IndexTable/IndexTable.tsx
• /src/components/ResourceList/ResourceList.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/CheckableButton/CheckableButton.scss (total: 4)

Files potentially affected (total: 4)

• /src/components/CheckableButton/CheckableButton.tsx
• /src/components/BulkActions/BulkActions.tsx
• /src/components/IndexTable/IndexTable.tsx
• /src/components/ResourceList/ResourceList.tsx

[ghost]

🎉 Thanks for your contribution to Polaris React!