bumbag-ui icon indicating copy to clipboard operation
bumbag-ui copied to clipboard

Access to Button Props on SelectMenu

Open b-gibbs opened this issue 3 years ago • 0 comments

Describe the bug

I'm not able to set styles on the button component of the SelectMenu component for different modes. I've tried setting them in the theme, using applyTheme and buttonProps on the component. popoverProps works as expected, but buttonProps does not: {subjectSelectionOptions && ( <Field component={SelectMenuField.Formik} hasTags isMultiSelect label="Subjects" placeholder="Select subjects..." name="subjects" options={subjectSelectionOptions} popoverProps={{ backgroundColor: "info300", color: "red" }} buttonProps={{ backgroundColor: "info500" }} /> )}

With applyTheme, this works for both default and dark modes: const GPSelectMenu = applyTheme(SelectMenu, { Button: { styles: { base: { border: "1px solid", borderColor: "gray700", background: "linear-gradient(#27303f, #303847)" } } } });

This has no effect: const GPSelectMenuModes = applyTheme(SelectMenu, { modes: { dark: { Button: { styles: { base: { border: "1px solid", borderColor: "gray700", background: "linear-gradient(#27303f, #303847)" } } } } } });

To Reproduce See the code above.

Expected behavior

I'd like to be able to change the background gradient and borderColor for the Button in the SelectMenu component in some manner-- ideally in the theme, but I'd also be happy with buttonProps or applyTheme.

Device information (please complete the following information):

Chrome 87 & FF Dev Ed.

b-gibbs avatar Jan 22 '21 02:01 b-gibbs