Carbon: MultiSelect checkboxes are not carbon checkbox

[tahaimt]

I noticed that in the sandbox of the latest version of the library styles are not imported as they are in the react tutorial. However, in my local app in which the following components are used

"carbon-components": "^10.7.3",
"carbon-components-react": "^7.7.3",

I have to load styles in index.scss like below for styles to work. But even after this, the checkbox in MultiSelect are native checkboxes rather than carbon checkbox. Screenshot below.

@import 'carbon-components/scss/components/button/button';
@import 'carbon-components/src/components/multi-select/multi-select.scss';

Can someone please point out what I am doing wrong???

[tahaimt]

@asudoh can you please take a look at this?

[tahaimt]

I noticed that in the sandbox html markup, there are a _:before_ and _:after_ element is inserted in the label of the checkbox, however in my local project they are not present. I am wondering if I am not loading the latest version of carbon-component-react even though they are the latest in package.json because this behavior seems like something that would come with JS MultiSelect classes rather than stylesheets.

[jendowns]

Hey @tahaimt! In the sandbox environment, the MultiSelect uses the correct checkbox styling because inside ./public/index.html, the sandbox environment is importing all component styles via minified compiled css.

However, in your project, you are importing individual scss files for each component. And it looks like the checkbox styles are not being imported into the multi-select styles. This causes your multi select to have unstyled checkboxes.

This is a bug. 🤔 I can fix propose a fix if you like?

[tahaimt]

That'd be great @jendowns. I just noticed that I am indeed missing checkbox styles from my main scss.

[tahaimt]

That fixed it. Thanks.

[tahaimt]

Can you take a look at my other issues please @jendowns ? Do you mind if I tag you in them?

[tahaimt]

I would like to point out an issue in documentation related to MultiSelect. If you visit the demo for Multiselect then under knobs check the option for _Filterable (<MultiSelect.Filterable> instead of <MultiSelect>)_. Now open readme on the top right and you will notice that the story source now shows FilterableMultiSelect which is not a valid component.

[jendowns]

Oh thanks @tahaimt! You are right -- the component is MultiSelect.Filterable, not FilterableMultiSelect. 🤔 It looks like the display name is wrong. I have an idea to fix that one so I'll open a PR for it.