feat(ui-popover, ui-select): allow overriding Select's dropdown border

[ToMESSKa]

Closes: INSTUI-4395

ISUUE: the border of Select's dropdown cannot be overridden now. CLX team need a version without borders. The border radius need to be changed too, but that can be done with a InstUISettingsProvider.

TEST PLAN:

• open an example in Select
• apply following themeoverride on the Select component:

themeOverride={{
    popoverBorderWidth: 'none'
  }}

• the dropdown should not have a border now
• it should work with other values too eg. 'large'
• test the borderRadius too with InstUISettingsProvider

[github-actions]

PR Preview Action v1.6.0
🚀 View preview at https://instructure.github.io/instructure-ui/pr-preview/pr-1862/
Built to branch gh-pages at 2025-02-14 10:13 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[ToMESSKa]

I inserted this about the no arrow version, because the arrow version uses ContextView which would result in having to rewrite ContextView too unfortunately.

[matyasf]

So as I see one can now use this prop and after merging #1860 the border radius will work nice too.
After #1860 is merged can you please rebase this and ask the CLX team for a review?

This is the sample code that they need:

<InstUISettingsProvider
  theme={{
        componentOverrides: {
          Select: { popoverBorderWidth: 'large' },
          View: {borderRadiusMedium: '1rem'}
        }
  }}
>
  <SimpleSelect renderLabel="Uncontrolled Select" >
    <SimpleSelect.Option id="foo" value="foo"
                         renderBeforeLabel={(props) => {
                           return <IconCheckSolid />
                         }}>
      Foo
    </SimpleSelect.Option>
    <SimpleSelect.Option id="bar" value="bar">
      Bar
    </SimpleSelect.Option>
    <SimpleSelect.Option id="baz" value="baz">
      Baz
    </SimpleSelect.Option>
  </SimpleSelect>
</InstUISettingsProvider>

[matyasf]

see my comment above, it good to go from me

[ToMESSKa]

So as I see one can now use this prop and after merging #1860 the border radius will work nice too. After #1860 is merged can you please rebase this and ask the CLX team for a review?

This is the sample code that they need:

<InstUISettingsProvider
  theme={{
        componentOverrides: {
          Select: { popoverBorderWidth: 'large' },
          View: {borderRadiusMedium: '1rem'}
        }
  }}
>
  <SimpleSelect renderLabel="Uncontrolled Select" >
    <SimpleSelect.Option id="foo" value="foo"
                         renderBeforeLabel={(props) => {
                           return <IconCheckSolid />
                         }}>
      Foo
    </SimpleSelect.Option>
    <SimpleSelect.Option id="bar" value="bar">
      Bar
    </SimpleSelect.Option>
    <SimpleSelect.Option id="baz" value="baz">
      Baz
    </SimpleSelect.Option>
  </SimpleSelect>
</InstUISettingsProvider>

@matyasf I rebased it and added @igera93 for review

[igera93]

Thanks for this change, LGTM 👍