alishaevn
commented
7 months ago I'm unsure off the top of my head if I can make the storybook color picker a dropdown....but I can look into it.
@labradford updating the propTypes fixed this. great suggestion!
story
create ability to customize the collapsed menu button color.
detailed explanation
[move the default theme colors into a module.scss file](https://github.com/scientist-softserv/webstore-component-library/commit/26467543e581dca9280c6ca94a857346c386d400) this move was done in preparation for allowing the toggle icon rendered by the "navbar-toggler" class to be styled with the same colors as the rest of the navbar. the colors exist in a "module.scss" file so that they can be imported into our ".scss" AND ".jsx" files. I also updated the colors from greyscale to match those in the webstore template. greyscale was chosen initially as not to spend too much time picking a color palette and distracting from component creation. using color now allows us to see some of the slight color variances better. [use an editable svg as the navbar toggle icon](https://github.com/scientist-softserv/webstore-component-library/commit/4ebd693be4bee12bb4bac5fad9b00602ca87cfa6) by default, the background image rendered by the "navbar-toggler-icon" class is a dark colored hamburger menu icon. since it uses an image, it was incapable of being dynamically styled with css alone. this commit replaces the "navbar-toggler-icon" class inside "navbar-toggler" with an editable svg, allowing us to change the color. [adjust navbar toggle behavior](https://github.com/scientist-softserv/webstore-component-library/pull/208/commits/a4e7d0405e69dcde73e942fc61e9bafe47709272) for some reason after adding the custom `ToggleIcon` component to the Navbar, the screen size that the navbar collapses at changed. It used to collapse at <992px, but changed to <1232px. changing the `expand` prop to `md` collapses the navbar at <1008px, which is closer to the original behavior. - ref: https://react-bootstrap.github.io/docs/components/navbar#responsive-behaviors [overriding the spread radius for ".navbar-toggler:focus"](https://github.com/scientist-softserv/webstore-component-library/pull/208/commits/69afdc2b59e67581f17b81986d5330414319da54) I would like to make it the same color as the icon too, but that isn't possible dynamically with scssdemo
https://github.com/scientist-softserv/webstore-component-library/assets/29032869/806cb956-aed7-4932-bd32-db9d86a1720e