Merge branch 'main' into release/v11.4.0-rc.0

packages/react/src/components/IconButton/IconButton.mdx

@@ -0,0 +1,64 @@
+import { ArgsTable, Canvas, Story } from '@storybook/addon-docs';
+
+# IconButton
+
+[Source
+code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/IconButton)
+ | 
+[Usage guidelines](https://www.carbondesignsystem.com/components/button/usage)
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Feedback](#feedback)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Overview
+
+The `IconButton` component is useful when you have a button where the
+content is an icon. In this situation, it's important that the button itself is
+labeled in a way that can be understandable by mouse, keyboard, and screen
+readers. As a result, this component makes it easy to create accessible icon buttons
+
+```jsx
+import { IconButton } from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+
+function ExampleComponent() {
+  return (
+    <IconButton label="Add">
+      <Add />
+    </IconButton>
+  );
+}
+```
+
+## Alignment
+
+The `align` prop allows you to specify where your content should be placed
+relative to the `IconButton`. For example, if you provide `align="top"` to the
+`IconButton` component then the tooltip will render above your component.
+Similarly, if you provide `align="bottom"` then the tooltip will render below
+your component.
+
+## Customizing the label
+
+You can customize the label, or tooltip, of the `IconButton` with the `label`
+prop. However, it's important that this label contain no interactive content so
+that the component remains accessible.
+
+## Component API
+
+<ArgsTable />
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/IconButton/IconButton.mdx).
+

packages/react/src/components/IconButton/next/IconButton.stories.js → packages/react/src/components/IconButton/IconButton.stories.js

@@ -7,7 +7,8 @@
 
 import { Edit } from '@carbon/icons-react';
 import React from 'react';
-import { IconButton } from '../';
+import { IconButton } from '../IconButton';
+import mdx from './IconButton.mdx';
 
 export default {
   title: 'Components/IconButton',
@@ -16,6 +17,9 @@ export default {
     controls: {
       hideNoControlsWarning: true,
     },
+    docs: {
+      page: mdx,
+    },
     layout: 'centered',
   },
   argTypes: {

packages/react/src/components/IconButton/index.js

@@ -40,7 +40,7 @@ const IconButton = React.forwardRef(function IconButton(props, ref) {
         kind={kind}
         ref={ref}
         size={size}
-        className={cx(`${prefix}--btn--icon-only`, { [className]: className })}>
+        className={cx(`${prefix}--btn--icon-only`, className)}>
         {children}
       </Button>
     </Tooltip>

packages/react/src/components/StructuredList/next/StructuredList.js

@@ -36,7 +36,7 @@ export function StructuredListWrapper(props) {
   return (
     <GridSelectedRowStateContext.Provider value={selectedRow}>
       <GridSelectedRowDispatchContext.Provider value={setSelectedRow}>
-        <div role="grid" className={classes} {...other} aria-label={ariaLabel}>
+        <div role="table" className={classes} {...other} aria-label={ariaLabel}>
           {children}
         </div>
       </GridSelectedRowDispatchContext.Provider>

packages/react/src/components/Toggletip/next/Toggletip.mdx → packages/react/src/components/Toggletip/Toggletip.mdx

@@ -83,4 +83,4 @@ example:
 
 Help us improve this component by providing feedback, asking questions on Slack,
 or updating this file on
-[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Toggletip/next/Toggletip.mdx).
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Toggletip/Toggletip.mdx).

packages/react/src/components/Toggletip/next/Toggletip.stories.js → packages/react/src/components/Toggletip/Toggletip.stories.js

@@ -7,15 +7,15 @@
 
 import { Information } from '@carbon/icons-react';
 import React from 'react';
-import { default as Button } from '../../Button';
-import { default as Link } from '../../Link';
+import { default as Button } from '../Button';
+import { default as Link } from '../Link';
 import {
   ToggletipLabel,
   Toggletip,
   ToggletipButton,
   ToggletipContent,
   ToggletipActions,
-} from '../../Toggletip';
+} from '../Toggletip';
 import mdx from './Toggletip.mdx';
 
 export default {

packages/styles/scss/__tests__/type-test.js

@@ -27,19 +27,27 @@ describe('@carbon/styles/scss/type', () => {
           reset: meta.mixin-exists('reset', 'type'),
           type-style: meta.mixin-exists('type-style', 'type'),
           font-family: meta.mixin-exists('font-family', 'type'),
+          font-weight: meta.mixin-exists('font-family', 'type'),
           default-type: meta.mixin-exists('default-type', 'type'),
           type-classes: meta.mixin-exists('type-classes', 'type'),
         ),
+        functions: (
+          font-weight: meta.function-exists('font-family', 'type'),
+        ),
       ));
     `);
 
     const { value: api } = get('api');
+    expect(api.functions).toEqual({
+      'font-weight': true,
+    });
     expect(api.mixins).toEqual({
       reset: true,
       'type-style': true,
       'font-family': true,
       'default-type': true,
       'type-classes': true,
+      'font-weight': true,
     });
     expect(api.variables).toMatchInlineSnapshot(`
       Array [
@@ -73,6 +81,8 @@ describe('@carbon/styles/scss/type', () => {
         "display-02",
         "display-03",
         "display-04",
+        "font-families",
+        "font-weights",
         "tokens",
       ]
     `);

packages/styles/scss/type/_index.scss

@@ -13,6 +13,7 @@
   font-family,
   default-type,
   type-classes,
+  font-weight,
 
   // Variables
   $caption-01,
@@ -46,6 +47,8 @@
   $display-02,
   $display-03,
   $display-04,
+  $font-families, 
+  $font-weights,
   $tokens;
 
 @use '@carbon/type';