The arrow icon of the Combobox component is not visible in v5

[wendellestradairely]

Describe the bug

In v5, the arrow icon of the dropdown of the Combobox component isn't visible. I think this is because the icon was migrated to cds-icon but the size attribute does not accept integer values.

Before update:

After the update:

How to reproduce

<clr-combobox-container>
  <label>Two</label>
  <clr-combobox name="two" required [disabled]="disabled">
         <clr-options>
         <clr-option clrValue="1">1</clr-option>
         <clr-option clrValue="2">2</clr-option>
         <clr-option clrValue="3">3</clr-option>
      </clr-options>
   </clr-combobox>
</clr-combobox-container>

I can't provide a stackblitz, the template is currently broken.

Expected behavior

The dropdown arrow icon should be shown

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v3.x
• v4.x
• [x ] v5.x

Framework:

• [x ] Angular
• React
• Vue
• Other:

Framework version:
Angular 12

Device:
Windows 10 Enterprise

• Type: [e.g. MacBook]
• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional notes

As a workaround fix, I created a directive that sets the size attribute of the cds-icon to "sm", which is a responsive style of sizing.

[mathisscott]

That's a good workaround, @wendellestradairely

But I don't think it's the numeric sizing that's the problem, I think it may be the var() in the calc() statement. I haven't been able to replicate the issue locally. But could you verify that you are importing the @cds/core/global.min.css file or that the var(--cds-global-base) custom property has a value in the chrome inspector?

[rbirkgit]

I could find two controls where there is a size set and using these controls will not render the icons. The close icon of the details pane of the datagrid and the dropdown arrow of the combobox along with the close icon of the multi-select pills there.

Adding this to your global styles fixes this:

:root {
    --cds-global-base: 20;
}

[coryrylan]

The fix would be providing a fallback value here I believe https://github.com/vmware/clarity/blob/next/packages/core/src/internal/utils/css.ts#L44

`calc((${pxValue} / var(--cds-global-base, 16)) * 1rem)`;

Probably should fallback to 16 since that would be the default browser font if the global CSS wasnt loaded and then add that css snippet above to clr-ui to set it to 20

[wendellestradairely]

@mathisscott Importing the @cds/core/global.min.css produces compilation errors.

Also, it's not just the combobox that has the issue but the cds-icon itself. It only happens when I put a size attribute with an integer value.

./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ParserError: Syntax Error at line: 1, column 120
    at C:\Projects\i21RESTfulApi\Documentation\node_modules\@cds\core\global.min.css:1:23768
    at Parser.error (C:\Projects\i21RESTfulApi\Documentation\node_modules\postcss-values-parser\lib\parser.js:127:11)
    at Parser.operator (C:\Projects\i21RESTfulApi\Documentation\node_modules\postcss-values-parser\lib\parser.js:162:20)
    at Parser.parseTokens (C:\Projects\i21RESTfulApi\Documentation\node_modules\postcss-values-parser\lib\parser.js:245:14)
    at Parser.loop (C:\Projects\i21RESTfulApi\Documentation\node_modules\postcss-values-parser\lib\parser.js:132:12)
    at Parser.parse (C:\Projects\i21RESTfulApi\Documentation\node_modules\postcss-values-parser\lib\parser.js:51:17)
    at parse (C:\Projects\i21RESTfulApi\Documentation\node_modules\postcss-custom-properties\index.cjs.js:47:30)
    at C:\Projects\i21RESTfulApi\Documentation\node_modules\postcss-custom-properties\index.cjs.js:333:24
    at C:\Projects\i21RESTfulApi\Documentation\node_modules\postcss\lib\container.js:91:18
    at C:\Projects\i21RESTfulApi\Documentation\node_modules\postcss\lib\container.js:74:18
    at Rule.each (C:\Projects\i21RESTfulApi\Documentation\node_modules\postcss\lib\container.js:60:16)
    at processResult (C:\Projects\i21RESTfulApi\Documentation\node_modules\webpack\lib\NormalModule.js:703:19)
    at C:\Projects\i21RESTfulApi\Documentation\node_modules\webpack\lib\NormalModule.js:809:5
    at C:\Projects\i21RESTfulApi\Documentation\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\Projects\i21RESTfulApi\Documentation\node_modules\loader-runner\lib\LoaderRunner.js:251:18
    at context.callback (C:\Projects\i21RESTfulApi\Documentation\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (C:\Projects\i21RESTfulApi\Documentation\node_modules\postcss-loader\dist\index.js:96:7)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

Here's what my angular.json contains:

"styles": [
	"node_modules/@clr/ui/clr-ui-dark.min.css",
	"node_modules/@clr/icons/clr-icons.min.css",
	"src/styles.scss"
],
"scripts": [
	"node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js",
	"node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js",
	"node_modules/@clr/icons/clr-icons.min.js"
]

[wendellestradairely]

@mathisscott By the way the var(--cds-global-base) doesn't have a value in Chrome.

But this one works:

:root {
    --cds-global-base: 20;
}

[coryrylan]

@wendellestradairely There is an issue with the CSS minification step with the Angular CLI currently. See this comment for a workaround nrwl/nx#4381 (comment)

[rbirkgit]

Would be good to add this to the angular css file. That way one can use cds icons with numeric size without having to include the whole cds css files. Not sure if we need to open a separate bug for that? It is a breaking change otherwise as our users of our libraries suddenly need to include new cds css files (or add this themselves manually in their app).

:root {
    --cds-global-base: 20;
}

[rbirkgit]

Do you think we can get the css update above into the clarity angular css? That would help a lot with our users of our libraries.

[bbogdanov]

As @mathisscott mentioned, we are not able to replicate the issue. I am closing this issue as resolved.

Feel free to reopen if you have more questions or info around this topic.

Thank you!

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.