v11 Beta 3

[joshblack]

Have you tried out the v11 Beta 23 release and have any feedback? We'd love to hear it! From issues that you might have run into to questions you might have, feel free to post anything release-related here.

Thanks so much for your help! We really appreciate it 🙏

[mattrosno]

Using @carbon/react 0.11.0. Search component:

        <Search
          id="catalog-search"
          labelText="Search component index by name, keyword, or domain"
          placeholder="Component name, keyword, domain"
          value={search}
          onBlur={handleOnBlur}
          onChange={handleOnChange}
          onClear={handleOnClear}
          size="lg"
        />

That's rendering at 40px tall not 48px, even though the --lg class name is getting applied. Per the migration guide, lg should be 48px. https://v11.carbondesignsystem.com/migrating/guide/develop#size-prop-updates-breaking

Storybook doesn't have any knobs so I can't verify the bug. https://carbon-react-next.netlify.app/?path=/story/components-search--default

[joshblack]

Issue: #10295

[mattrosno]

Pagination next/previous missing icons in 0.11.0. https://carbon-react-next.netlify.app/?path=/story/components-pagination--pagination

[joshblack]

Issue: #10294

[mattrosno]

UI shell header action icons aren't centered in 0.11.0. https://carbon-react-next.netlify.app/?path=/story/components-ui-shell--header-base-w-actions-and-right-panel

[joshblack]

Issue: #10294

[mattrosno]

The new IconButton does not pass the size prop to the button, and instead appears to hardcode the sm button. To render at 48px, I had to override.

            <IconButton
              className={clsx(styles.button, view === 'grid' && styles.selected)}
              kind="ghost"
              label="Grid view"
              onClick={() => {
                onView('grid')
              }}
              size="lg"
            >
              <GridIcon size={20} />
            </IconButton>

.button {
  // override carbon because `lg` isn't supported
  width: $spacing-09;
  height: $spacing-09;

  // override icon alignment because the IconButton only supports `sm` size currently
  &:global(.cds--btn--sm) {
    padding-right: 14px;
    padding-left: 14px;
  }
}

[joshblack]

Issue for reference: #10293

[Eugeno]

Questions and suggestions about tokens

text-error is red-30 on gray-100 looks too pink, how about making it red-40? It would be consistent with support-error which has different colors for gray-90 and gray-100.

highlight looks strange: blue-20 for white, gray-10, gray-100 and blue-70 for gray-90.

toggle-off: gray-50 on gray-100 so shiny, I suggest gray-60.

border-disabled: at every theme it is more visible and clear than border-subtle (problems for accordion with disabled item).

[aagonzales]

@joshblack seems like we need to include another color token QA audit for the RC release.
Link to table with most accurate intended values: https://carbondesignsystem.notion.site/final-List-of-new-tokens-c507394e43fe4daa9f0cd0eedb25d1e4

[aagonzales]

Actually just took a look at text-error again and I think we can actually do Red 40 in the Gray 100 theme.

[Eugeno]

Thanks for your feedback!

Looking at your table in notion, I would like to highlight two more potential problems: layer-accent-active-02 and layer-active-03, both at Gray 100.

[aagonzales]

Yeah those seem weird because they're following the rules for active states and the at the 60 step in the scale colors start to darken instead if lighten. I noted it as weird when I made those value and I've been waiting to see how it plays out when people use it. It is pretty nested in the layering model at that point so I'm not sure how much it gets used. But I wanted to see some real examples before we bent the color rules.

[joshblack]

Issue for reference: #10292

[ricardo-valero]

This is irrelevant from the beta, but I thought it might be easier to consider before an official release

I mentioned this in the svelte components repo a while ago
carbon-design-system/carbon-components-svelte#709

But I'd like to know what does the main library thinks about naming components and conventions, for example:

• FormGroup (rename to InputGroup? it can be misinterpreted as a group of forms, which is obviously not... see Bootstrap's naming)
• FormItem (rename to InputItem?)
• FormLabel (rename to Label?)
• RadioTile and SelectableTile are RadioButton and Checkbox equivalents
  • Proposal: RadioButtonTile, CheckboxTile
• Use only one word to represent groups (Set, Group or plural form)
  • Current: ButtonSet, RadioButtonGroup, Tabs
  • Proposal: ButtonGroup, RadioButtonGroup, TabGroup

I get that it isn't very important for the end user, I just wish to contribute in some way.

[Eugeno]

A FormGroup aggregates the values of each child FormControl into one object (see Angular's naming) 😄

[ricardo-valero]

But with that definition shouldn't it be FormControlGroup?
I'd say that's inconsistent.

Why is
RadioButtonGroup a group of RadioButtons
but
FormGroup not a group of Forms?

That is basically what I was trying to say.

[Eugeno]

https://v11.carbondesignsystem.com/components/text-input/usage/ password input

[ricardo-valero]

Side nav link with icon looks great

<SideNavLink href="/" renderIcon={Home}>
    Home
</SideNavLink>

Unfortunately button with icon doesn't

<Button renderIcon={Home}>
    Home
</Button>

[ricardo-valero]

Works with @carbon/react 0.13.0-rc.0

[Eugeno]

Tokens for buttons also need careful validation.
Example: primary danger button (https://v11.carbondesignsystem.com/components/button/style/)

Container	background-color	$button-danger-primary
Container:hover	background-color	$button-danger-hover

gray90 (https://carbondesignsystem.notion.site/final-List-of-new-tokens-c507394e43fe4daa9f0cd0eedb25d1e4):

button-danger-primary	Red 60
button-danger-hover	Red-40-hover

Base red-60 and red-40-hover for hover, doubtful.

Btw, how about change focus-inset at gray10 and gray90 into gray-10 and gray-90 (instead of white and gray-100)? Imo looks better for tertiary.

[aagonzales]

Ah yes good catch that hover should be Red-60-Hover. The v11 button colors have been hard to validate and reference as they are not part of this element preview. @joshblack can we add the button tokens to the element preview or is there another place to easily inspect the button token colors?

[aagonzales]

It looks like the v11 danger button is rendering correctly so it was probably just an error in the Notion table but looks like its correct in the code. I'll try and track down the button token colors in code and confirm.

[Eugeno]

I see difference in focus state for ghost danger button in v11 danger button and https://v11.carbondesignsystem.com/components/button/style/#ghost-danger-button

[Eugeno]

Looks like problems in the first link, And active doesn't work for tertiary.

[Eugeno]

And more: tertiary, danger tertiary and danger ghost at disabled state have text-on-color-disabled while ghost has text-disabled.
Tertiary has a wrong description about label color at hover (active, focus) — text-on-color, should be text-inverse, I suppose.

[mattrosno]

I'm using @include type-style('display-01', true); with "@carbon/react": "^0.12.0" and getting a deprecation warning.

Which is coming from this line in the type package.

carbon/packages/type/scss/modules/_styles.scss

Line 699 in c7e1cdf

@return $value / ($value * 0 + 1);

[joshblack]

@mattrosno PR up: #10591

[mattrosno]

Thanks! 🚀