From 6f9f2098ab40bc0498d6cb29288b6e2a428eaa80 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 24 May 2022 14:21:39 -0500 Subject: [PATCH 1/3] docs(react): update docs for toggletip and icon button (#11450) --- .../src/components/IconButton/IconButton.mdx | 64 +++++++++++++++++++ .../{next => }/IconButton.stories.js | 6 +- .../react/src/components/IconButton/index.js | 2 +- .../Toggletip/{next => }/Toggletip.mdx | 2 +- .../Toggletip/{next => }/Toggletip.stories.js | 6 +- 5 files changed, 74 insertions(+), 6 deletions(-) create mode 100644 packages/react/src/components/IconButton/IconButton.mdx rename packages/react/src/components/IconButton/{next => }/IconButton.stories.js (93%) rename packages/react/src/components/Toggletip/{next => }/Toggletip.mdx (97%) rename packages/react/src/components/Toggletip/{next => }/Toggletip.stories.js (95%) diff --git a/packages/react/src/components/IconButton/IconButton.mdx b/packages/react/src/components/IconButton/IconButton.mdx new file mode 100644 index 000000000000..bf5b8c20dc7e --- /dev/null +++ b/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) + + + + +## Table of Contents + +- [Overview](#overview) +- [Component API](#component-api) +- [Feedback](#feedback) + + + +## 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 ( + + + + ); +} +``` + +## 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 + + + +## 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). + diff --git a/packages/react/src/components/IconButton/next/IconButton.stories.js b/packages/react/src/components/IconButton/IconButton.stories.js similarity index 93% rename from packages/react/src/components/IconButton/next/IconButton.stories.js rename to packages/react/src/components/IconButton/IconButton.stories.js index 0cb6f640e964..0e62a195027c 100644 --- a/packages/react/src/components/IconButton/next/IconButton.stories.js +++ b/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: { diff --git a/packages/react/src/components/IconButton/index.js b/packages/react/src/components/IconButton/index.js index ac1a32997ad4..112a7329b985 100644 --- a/packages/react/src/components/IconButton/index.js +++ b/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} diff --git a/packages/react/src/components/Toggletip/next/Toggletip.mdx b/packages/react/src/components/Toggletip/Toggletip.mdx similarity index 97% rename from packages/react/src/components/Toggletip/next/Toggletip.mdx rename to packages/react/src/components/Toggletip/Toggletip.mdx index b6ca8bfff8ad..55d1a5b6fbf2 100644 --- a/packages/react/src/components/Toggletip/next/Toggletip.mdx +++ b/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). diff --git a/packages/react/src/components/Toggletip/next/Toggletip.stories.js b/packages/react/src/components/Toggletip/Toggletip.stories.js similarity index 95% rename from packages/react/src/components/Toggletip/next/Toggletip.stories.js rename to packages/react/src/components/Toggletip/Toggletip.stories.js index b1163c54abbd..767b6bdc380c 100644 --- a/packages/react/src/components/Toggletip/next/Toggletip.stories.js +++ b/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 { From 0904046428086a0c8193cb0dcba16b6b4075dfdc Mon Sep 17 00:00:00 2001 From: Abbey Hart Date: Tue, 24 May 2022 15:04:56 -0500 Subject: [PATCH 2/3] feat(styles): export font weights and font family (#11473) * feat(styles): export font weights and font family * fix(styles): add tests for new exports Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- packages/styles/scss/__tests__/type-test.js | 10 ++++++++++ packages/styles/scss/type/_index.scss | 3 +++ 2 files changed, 13 insertions(+) diff --git a/packages/styles/scss/__tests__/type-test.js b/packages/styles/scss/__tests__/type-test.js index 009116fbe24c..87e7915d8213 100644 --- a/packages/styles/scss/__tests__/type-test.js +++ b/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", ] `); diff --git a/packages/styles/scss/type/_index.scss b/packages/styles/scss/type/_index.scss index 22bdb0f36324..717bef66a179 100644 --- a/packages/styles/scss/type/_index.scss +++ b/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'; From 5175c28b2a0fd6c39cc26e16b0790fefe45f5da5 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 24 May 2022 15:57:41 -0500 Subject: [PATCH 3/3] fix(structured-list): change role of structured list (#11448) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../react/src/components/StructuredList/next/StructuredList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/StructuredList/next/StructuredList.js b/packages/react/src/components/StructuredList/next/StructuredList.js index 8c2d7d275e11..d502d57a1d01 100644 --- a/packages/react/src/components/StructuredList/next/StructuredList.js +++ b/packages/react/src/components/StructuredList/next/StructuredList.js @@ -36,7 +36,7 @@ export function StructuredListWrapper(props) { return ( -
+
{children}