Components: refactor BorderControl to pass exhaustive-deps

[chad1008]

What?

Updates the BorderControl component to satisfy the exhaustive-deps eslint rule

Why?

Part of the effort in #41166 to apply exhuastive-deps to the Components package

How?

• remove sanitizeBorder from dependency array. sanitizeBorder isn't a prop, and mutating it doesn't rerender the component so it's not a valid dependency
• add colorSelection and styleSelection to dependency array

Testing Instructions

1. Rebase this PR on top of Components: Add exhaustive-deps eslint rule #41166, OR manually set
   'react-hooks/exhaustive-deps': 'warn' in your local eslint file
2. From your local Gutenberg directory, run npx eslint packages/components/src/border-control
3. Confirm that the linter returns no errors
4. Launch Storybook
5. Test the component, any stories, and its docs to ensure everything still works as expected.

[ciampo]

@aaronrobertshaw , do you remember if there's any particular reason why you added sanitizeBorder to the list of dependencies here?

[aaronrobertshaw]

🤔 Honestly can't recall and looks like I added it before tidying up local experimentation and drafting the initial PR.

I probably just had it in my head that changing sanitizeBorder would mean a changed callback. It makes sense that coming from an outer scope it isn't a valid dependency and should be removed.

[aaronrobertshaw]

Thanks for fixing this @chad1008 👍

✅ No linting errors
✅ BorderControl and BorderBoxControl continue to function in Storybook
✅ Border controls within the editor work correctly

LGTM! 🚢

[aaronrobertshaw]

🤔 Honestly can't recall and looks like I added it before tidying up local experimentation and drafting the initial PR.

I probably just had it in my head that changing sanitizeBorder would mean a changed callback. It makes sense that coming from an outer scope it isn't a valid dependency and should be removed.

[stokesman]

Just chiming in to say it looks like the testing instructions for these PRs could be simplified with command line overrides. I tested: npx eslint --rule 'react-hooks/exhaustive-deps: warn' packages/components/src/border-control and it did the trick. No need to rebase or add the rule to config.