Improve customizability of Select component
#413
Conversation
src/components/Select/Select.jsx
Outdated
| style={{ | ||
| content: "", | ||
| width: "0", | ||
| height: "0", | ||
| border: "0.5rem solid transparent", | ||
| borderColor: | ||
| "var(--select-anchor-color) transparent transparent transparent", | ||
| position: "absolute", | ||
| top: "-0.3rem", | ||
| right: "0.3rem", | ||
| ...(props.selectProps.menuIsOpen && { | ||
| top: "-0.9rem", | ||
| borderColor: | ||
| "transparent transparent var(--color-primary) transparent", |
There was a problem hiding this comment.
avoid using inline styling, use conditioned classes
There was a problem hiding this comment.
@amass01, thanks for your review. I'd prefer the conditioned classes too, but with them, the arrow disappears in decrediton. The divs didn't receive the class definitions. I tried to figure out why, but only this inline styling works. Now, I revisited it without result. Do you have any idea how to solve this?
There was a problem hiding this comment.
hrmm I'm not sure, I guess it related react-select, as the divs are wrapped with
components.DropdownIndicator. I would just leave a comment about the limitation
we can't find a solution or a workaround.
I see in the documentation that there is another classNamePrefix that might work. iirc we already
use that one.
See: https://react-select.com/styles#using-classnames
src/components/Select/Select.jsx
Outdated
| style={{ | ||
| position: "relative", | ||
| height: "100%", | ||
| width: "2rem", | ||
| }}> |
| @@ -27,9 +27,7 @@ const config = { | |||
| external(), | |||
| postcss({ | |||
| extract: true, | |||
| modules: { | |||
| globalModulePaths: ["src/components/Select/styles.css"], | |||
There was a problem hiding this comment.
wondering why we had this here, as src/components/Select/styles.css file didn't exist before this commit 🤔
There was a problem hiding this comment.
It didn't exist before this commit, but it did exist before this PR.
The globalModulePaths config was introduced by: #227
There was a problem hiding this comment.
oh, i see, makes sense.
it was imported then as plain .css as it included pure css classes prefixed with customSelect which isn't
the case anymore, glad it evolved to a css module. 👍🏽
decred/decrediton#3631 needs additional customization for the
Selectcomponent.This diff adds: