diff --git a/docs/guides/adding-component-types.md b/docs/guides/adding-component-types.md new file mode 100644 index 000000000000..1d8e679628de --- /dev/null +++ b/docs/guides/adding-component-types.md @@ -0,0 +1,150 @@ +# Adding component types + +This document lays out the goal, strategy, and guidelines for adding +[TypeScript](https://www.TypeScriptlang.org/) types for components within +`@carbon/react`. + + + + +## Table of Contents + +- [Goal](#goal) + - [Purpose](#purpose) +- [Strategy](#strategy) + - [Steps to provide baseline type definitions for components](#steps-to-provide-baseline-type-definitions-for-components) +- [FAQ](#faq) + - [How do I know what's part of the public api?](#how-do-i-know-whats-part-of-the-public-api) + - [Should components have both prototypes and ts interface?](#should-components-have-both-prototypes-and-ts-interface) + - [Should comment docs be duplicated into the ts interface?](#should-comment-docs-be-duplicated-into-the-ts-interface) + - [Where should I put the ts interface in the file?](#where-should-i-put-the-ts-interface-in-the-file) + + + + +## Goal + +The goal of this workstream is to provide as much downstream value to consumers +who are using TypeScript, as quickly as possible, while writing the least amount +of TypeScript. + +The goal is _not_ to convert the entire codebase to TypeScript right now. + +### Purpose + +By adding TypeScript types to components we anticipate a number of benefits: + +- Developer productivity will increase due to Component API's being + self-documenting and providing tight integration with code editor + intellisense. +- The qualtiy of products developed will increase due to more stable, correct, + and thorough component API typings provided first-party through + `@carbon/react` itself. +- Maintenance of the types themselves will be simplified by not having to go + through the DefinitelyTyped contribution process/system. + +Despite these benefits, adding TypeScript to the codebase is still a large shift +for the developer community surrounding the Carbon Design System. Most projects +are not using TypeScript, and contributors are more likely to not have in-depth +knowledge of TypeScript. + +The bar to contribute to Carbon should be as low as possible to facilitate +experimentation, innovation, and progress within the system. Adding TypeScript +raises this bar of contribution adding additional friction to even the smallest +of pull requests. + +We believe the majority of the benefits of TypeScript can be provided to +consumers without needing to convert the entire codebase to use TypeScript. +Overall, this effort will be focused on limiting the amount of TypeScript within +the repository for now. + +## Strategy + +TypeScript will be incrementally adopted, focusing first on adding types to +components prop APIs that are included as part of the public API of +`@carbon/react`. + +Internal components, helpers, function, etc. will not initially be typed. These +internal files/components not included in the public API should be left as +`.js`, given a +[jsdoc type annotation](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html#providing-type-hints-in-js-via-jsdoc) +of `/** @type any */`, and +[errors should be enabled](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html#ts-check) +by adding `// @ts-check` to the first line in the file. + +Other packages, such as `@carbon/icons-react`, `@carbon/elements`, etc will not +initially be typed. + +Within this incremental adoption strategy, **for now types will not be bound to +semver**. + +This means that types are provided on an as-is basis. Ideally types will be +stable and not ship breaking changes, but the reality is typings may at times be +incorrect, outdated, or missing. Full details available within our +[versioning documentation](https://github.com/carbon-design-system/carbon/blob/main/docs/guides/versioning.md#a-change-is-made-to-component-typingsdefinitions). + +### Steps to provide baseline type definitions for components + +Below is a general outline of what needs to be done for each component within +the repository. There is an issue tracking curring status of this effort, +[#12513](https://github.com/carbon-design-system/carbon/issues/12513) + +- Change extension to `.tsx` +- Copying the proptypes def to above the component definition +- Retool the proptypes to be a ts interface +- Fix errors as they appear +- Do not add types to internal components or functions that are not exported as + part of the Public API. + + - Leave internals as `.js` + - Add a + [jsdoc type annotation](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html#providing-type-hints-in-js-via-jsdoc) + of `/** @type any */` + - [Enable errors](https://www.typescriptlang.org/docs/handbook/intro-to-js-ts.html#ts-check) + by adding `// @ts-check` to the first line in the file. + +- Test your changes - there are a few options here: + - At the bottom of a file, write a dummy component that uses the component + that you’re converting to ensure that you can still pass all appropriate + props that you need to. + - Take a storybook example for a component, copy and paste it into the bottom + of the .tsx file and validate whether or not it accepts the props as you’ve + defined them +- Submit a pull request for the changes + - Please keep pull requests as small as possible + - Avoid adding additional components to a single PR unless necessary + - [Link to close the related issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword#linking-a-pull-request-to-an-issue-using-a-keyword), + e.g. `Closes #12513` +- Ask questions if you get stuck! + - The team is available on slack + [`#carbon-wg-typescript`](https://ibm-studios.slack.com/archives/C03C8VASVED), + [discord](https://discord.gg/J7JEUEkTRX), or on + [the issue itself](https://github.com/carbon-design-system/carbon/issues/12513). + +## FAQ + +### How do I know what's part of the public api? + +- If it's not on [the storybook](https://react.carbondesignsystem.com), it's + probably not public. +- The entire Public API is snapshotted, you can + [search the snapshot here](https://github.com/carbon-design-system/carbon/blob/main/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap). + If it's not included there, it's not part of the public API. + +### Should components have both prototypes and ts interface? + +- Yes + +### Should comment docs be duplicated into the ts interface? + +- Yes + - Duplicate comments between the proptypes definition and ts interface + - Storybook prefers react-docgen for now + - Once we have ts interfaces for everything we can switch out the storybook + config to favor TypeScript docs + +### Where should I put the ts interface in the file? + +- Above the component definition (likely the top of the file) + - The component implementation should be sandwiched inbetween the ts interface + and the proptypes definition diff --git a/docs/guides/versioning.md b/docs/guides/versioning.md index 4f8721b4fd36..71f238180065 100644 --- a/docs/guides/versioning.md +++ b/docs/guides/versioning.md @@ -6,9 +6,10 @@ ## Table of Contents - [Overview](#overview) -- [`carbon-components-react`](#carbon-components-react) +- [`carbon-components-react`, `@carbon/react`](#carbon-components-react-carbonreact) - [Changes](#changes) - [Examples](#examples) + - [A change is made to component typings/definitions](#a-change-is-made-to-component-typingsdefinitions) - [A new prop is added to a component](#a-new-prop-is-added-to-a-component) - [An existing prop is deprecated](#an-existing-prop-is-deprecated) - [An existing prop is removed](#an-existing-prop-is-removed) @@ -17,6 +18,8 @@ - [A `PropTypes.func` prop type is changed to have different arguments](#a-proptypesfunc-prop-type-is-changed-to-have-different-arguments) - [A `PropTypes.func` prop type is changed to have additional arguments](#a-proptypesfunc-prop-type-is-changed-to-have-additional-arguments) - [A `PropTypes.func` prop type is changed to have fewer arguments](#a-proptypesfunc-prop-type-is-changed-to-have-fewer-arguments) + - [The DOM node that an `id` corresponds to is changed](#the-dom-node-that-an-id-corresponds-to-is-changed) + - [The DOM node that an `aria-label` corresponds to is changed](#the-dom-node-that-an-aria-label-corresponds-to-is-changed) diff --git a/packages/icons/examples/preview/.yarn/install-state.gz b/packages/icons/examples/preview/.yarn/install-state.gz new file mode 100644 index 000000000000..0679070d1784 Binary files /dev/null and b/packages/icons/examples/preview/.yarn/install-state.gz differ diff --git a/packages/icons/examples/preview/yarn.lock b/packages/icons/examples/preview/yarn.lock index 59891eeb9fd8..72c4fc4a1cb6 100644 --- a/packages/icons/examples/preview/yarn.lock +++ b/packages/icons/examples/preview/yarn.lock @@ -4271,13 +4271,13 @@ fsevents@~2.3.2: linkType: hard "loader-utils@npm:^1.1.0": - version: 1.4.0 - resolution: "loader-utils@npm:1.4.0" + version: 1.4.1 + resolution: "loader-utils@npm:1.4.1" dependencies: big.js: ^5.2.2 emojis-list: ^3.0.0 json5: ^1.0.1 - checksum: d150b15e7a42ac47d935c8b484b79e44ff6ab4c75df7cc4cb9093350cf014ec0b17bdb60c5d6f91a37b8b218bd63b973e263c65944f58ca2573e402b9a27e717 + checksum: ea0b648cba0194e04a90aab6270619f0e35be009e33a443d9e642e93056cd49e6ca4c9678bd1c777a2392551bc5f4d0f24a87f5040608da1274aa84c6eebb502 languageName: node linkType: hard diff --git a/packages/react/src/components/ContentSwitcher/next/ContentSwitcher-story.js b/packages/react/src/components/ContentSwitcher/next/ContentSwitcher-story.js deleted file mode 100644 index c0cf8ff5ea84..000000000000 --- a/packages/react/src/components/ContentSwitcher/next/ContentSwitcher-story.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/* eslint-disable storybook/story-exports */ - -import React from 'react'; -import { - ContentSwitcher, - ContentTabs, - ContentTab, - ContentPanels, - ContentPanel, -} from './'; - -export default { - title: 'Experimental/unstable_ContentSwitcher', - component: ContentSwitcher, - subcomponents: { - ContentTabs, - ContentTab, - ContentPanels, - ContentPanel, - }, - includeStories: [], -}; - -export const Default = () => { - return ( - - - Tab 1 - Tab 2 - Tab 3 - - - Panel 1 - Panel 2 - Panel 3 - - - ); -}; diff --git a/packages/react/src/components/ContentSwitcher/next/index.js b/packages/react/src/components/ContentSwitcher/next/index.js deleted file mode 100644 index 4df9fe28484b..000000000000 --- a/packages/react/src/components/ContentSwitcher/next/index.js +++ /dev/null @@ -1,313 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import PropTypes from 'prop-types'; -import React from 'react'; -import cx from 'classnames'; -import { match, matches, keys } from '../../../internal/keyboard'; -import { useId } from '../../../internal/useId'; -import { useControllableState } from '../../../internal/useControllableState'; -import { usePrefix } from '../../../internal/usePrefix'; - -// Used to manage the overall state of the ContentSwitcher -const ContentSwitcherContext = React.createContext(); - -// Used to keep track of position in a tablist -const ContentTabContext = React.createContext(); - -// Used to keep track of position in a list of tab panels -const ContentPanelContext = React.createContext(); - -function ContentSwitcher({ - children, - defaultSelectedIndex = 0, - onChange, - selectedIndex: controlledSelectedIndex, -}) { - const baseId = useId('ccs'); - // The active index is used to track the element which has focus in our tablist - const [activeIndex, setActiveIndex] = React.useState(defaultSelectedIndex); - // The selected index is used for the tab/panel pairing which is "visible" - const [selectedIndex, setSelectedIndex] = useControllableState({ - value: controlledSelectedIndex, - defaultValue: defaultSelectedIndex, - onChange: (value) => { - if (onChange) { - onChange({ selectedIndex: value }); - } - }, - }); - const value = { - baseId, - activeIndex, - setActiveIndex, - selectedIndex, - setSelectedIndex, - }; - - return ( - - {children} - - ); -} - -ContentSwitcher.propTypes = { - /** - * Provide child elements to be rendered inside of the `ContentSwitcher`. - * These elements should render either `ContentTabs` or `ContentPanels` - */ - children: PropTypes.node, - - /** - * Specify which content tab should be initially selected when the component - * is first rendered - */ - defaultSelectedIndex: PropTypes.number, - - /** - * Provide an optional function which is called whenever the state of the - * `ContentSwitcher` changes - */ - onChange: PropTypes.func, - - /** - * Control which content panel is currently selected. This puts the component - * in a controlled mode and should be used along with `onChange` - */ - selectedIndex: PropTypes.number, -}; - -/** - * A `ContentPanel` corresponds to a tablist in the Tabs pattern as written in - * WAI-ARIA Authoring Practices. - * - * @see https://w3c.github.io/aria-practices/#tabpanel - */ -function ContentTabs({ - activation = 'automatic', - 'aria-label': label, - children, - className: customClassName, - size = 'md', - ...rest -}) { - const { activeIndex, selectedIndex, setSelectedIndex, setActiveIndex } = - React.useContext(ContentSwitcherContext); - const ref = React.useRef(null); - const prefix = usePrefix(); - const className = cx(customClassName, `${prefix}--content-switcher`, { - [`${prefix}--content-switcher--${size}`]: size, - }); - const count = React.Children.count(children); - const tabs = []; - - function onKeyDown(event) { - if ( - matches(event, [keys.ArrowRight, keys.ArrowLeft, keys.Home, keys.End]) - ) { - const nextIndex = getNextIndex( - event, - count, - activation === 'automatic' ? selectedIndex : activeIndex - ); - - if (activation === 'automatic') { - setSelectedIndex(nextIndex); - } else if (activation === 'manual') { - setActiveIndex(nextIndex); - } - - tabs[nextIndex].current.focus(); - } - } - - return ( - // eslint-disable-next-line jsx-a11y/interactive-supports-focus -
- {React.Children.map(children, (child, index) => { - const ref = React.createRef(); - tabs.push(ref); - return ( - - {React.cloneElement(child, { - ref, - })} - - ); - })} -
- ); -} - -ContentTabs.propTypes = { - /** - * Specify whether the content tab should be activated automatically or - * manually - */ - activation: PropTypes.oneOf(['automatic', 'manual']), - - /** - * Provide an accessible label to be read when a user interacts with this - * component - */ - 'aria-label': PropTypes.string.isRequired, - - /** - * Provide child elements to be rendered inside of `ContentTabs`. - * These elements should render a `ContentTab` - */ - children: PropTypes.node, - - /** - * Specify an optional className to be added to the container node - */ - className: PropTypes.string, - - /** - * Specify the size of the Content Switcher. Currently supports either `sm`, 'md' (default) or 'lg` as an option. - */ - size: PropTypes.oneOf(['sm', 'md', 'lg']), -}; - -/** - * Get the next index for a givne keyboard event given a count of the total - * items and the current index - * @param {Event} event - * @param {number} total - * @param {number} index - * @returns {number} - */ -function getNextIndex(event, total, index) { - if (match(event, keys.ArrowRight)) { - return (index + 1) % total; - } else if (match(event, keys.ArrowLeft)) { - return (total + index - 1) % total; - } else if (match(event, keys.Home)) { - return 0; - } else if (match(event, keys.End)) { - return total - 1; - } -} - -const ContentTab = React.forwardRef(function ContentTab( - { children, ...rest }, - ref -) { - const { selectedIndex, setSelectedIndex, baseId } = React.useContext( - ContentSwitcherContext - ); - const index = React.useContext(ContentTabContext); - const id = `${baseId}-tab-${index}`; - const panelId = `${baseId}-tabpanel-${index}`; - const prefix = usePrefix(); - const className = cx(`${prefix}--content-switcher-btn`, { - [`${prefix}--content-switcher--selected`]: selectedIndex === index, - }); - - return ( - - ); -}); - -ContentTab.propTypes = { - /** - * Provide child elements to be rendered inside of `ContentTab`. - * These elements must be noninteractive - */ - children: PropTypes.node, -}; - -/** - * Used to display all of the tab panels inside of a Content Switcher. This - * components keeps track of position in for each ContentPanel. - * - * Note: children should either be a `ContentPanel` or should render a - * `ContentPanel`. Fragments are not currently supported. - */ -function ContentPanels({ children }) { - return React.Children.map(children, (child, index) => { - return ( - - {child} - - ); - }); -} - -ContentPanels.propTypes = { - /** - * Provide child elements to be rendered inside of `ContentPanels`. - * These elements should render a `ContentPanel` - */ - children: PropTypes.node, -}; - -/** - * A `ContentPanel` corresponds to a tabpanel in the Tabs pattern as written in - * WAI-ARIA Authoring Practices. This component reads the selected - * index and base id from context in order to determine the correct `id` and - * display status of the component. - * - * @see https://w3c.github.io/aria-practices/#tabpanel - */ -const ContentPanel = React.forwardRef(function ContentPanel(props, ref) { - const { children, ...rest } = props; - const { selectedIndex, baseId } = React.useContext(ContentSwitcherContext); - const index = React.useContext(ContentPanelContext); - const id = `${baseId}-tabpanel-${index}`; - const tabId = `${baseId}-tab-${index}`; - - // TODO: tabindex should only be 0 if no interactive content in children - return ( - - ); -}); - -ContentPanel.propTypes = { - /** - * Provide child elements to be rendered inside of `ContentPanel`. - */ - children: PropTypes.node, -}; - -export { - ContentSwitcher, - ContentTabs, - ContentTab, - ContentPanels, - ContentPanel, -}; diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap index 041dc78208b4..b1c00a31dcf8 100644 --- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap +++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap @@ -2406,20 +2406,11 @@ exports[`DataTable should render 1`] = ` } } > - - - - - + + + + + + + + + + - - + + + + + + + + + + - - + + + + + + + + + `; diff --git a/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js b/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js index fbc007392f6c..fab8e53d3a34 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js @@ -271,10 +271,10 @@ export const WithOverflowMenu = () => ( {cell.value} ))} - - Action 1 - Action 2 - Action 3 + + + + @@ -334,9 +334,9 @@ export const Playground = (args) => ( ))} - Action 1 - Action 2 - Action 3 + + + diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js deleted file mode 100644 index cf18dfe85cb1..000000000000 --- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js +++ /dev/null @@ -1,37 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -/* eslint-disable no-console */ - -import React from 'react'; -import { withKnobs, boolean } from '@storybook/addon-knobs'; -import DataTableSkeleton from '../DataTableSkeleton'; -import { headers } from '../DataTable/stories/shared'; - -const props = () => ({ - showHeaders: boolean('Show table headers', true), - zebra: boolean('Use zebra stripe (zebra)', false), - compact: boolean('Compact variant (compact)', false), - showHeader: boolean('Show the Table Header (showHeader)', true), - showToolbar: boolean('Show the Table Toolbar (showToolbar)', true), -}); - -export default { - title: 'Components/DataTable/Skeleton', - component: DataTableSkeleton, - decorators: [withKnobs], -}; - -export const Skeleton = () => { - const { showHeaders, ...rest } = props(); - return ( -
- -
-
- ); -}; diff --git a/packages/react/src/components/DataTableSkeleton/next/DataTableSkeleton.stories.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js similarity index 89% rename from packages/react/src/components/DataTableSkeleton/next/DataTableSkeleton.stories.js rename to packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js index 7af57be95419..de5ad05662a3 100644 --- a/packages/react/src/components/DataTableSkeleton/next/DataTableSkeleton.stories.js +++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton.stories.js @@ -9,8 +9,8 @@ import React from 'react'; import { withKnobs, boolean } from '@storybook/addon-knobs'; -import DataTableSkeleton from '../DataTableSkeleton'; -import { headers } from '../../DataTable/stories/shared'; +import DataTableSkeleton from './DataTableSkeleton'; +import { headers } from '../DataTable/stories/shared'; const props = () => ({ showHeaders: boolean('Show table headers', true), diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js deleted file mode 100644 index cc551aa1bcf9..000000000000 --- a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js +++ /dev/null @@ -1,111 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React from 'react'; -import { action } from '@storybook/addon-actions'; -import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; -import { OverflowMenu } from './OverflowMenu'; -import OverflowMenuItem from '../OverflowMenuItem'; -import mdx from './OverflowMenu.mdx'; -import { Filter } from '@carbon/icons-react'; - -const directions = { - 'Bottom of the trigger button (bottom)': 'bottom', - 'Top of the trigger button (top)': 'top', -}; - -const sizes = { - 'Small (sm)': 'sm', - 'Medium (md) - default': undefined, - 'Large (lg)': 'lg', -}; - -const props = { - menu: () => ({ - direction: select('Menu direction (direction)', directions, 'bottom'), - ariaLabel: text('ARIA label (ariaLabel)', 'Menu'), - iconDescription: text('Icon description (iconDescription)', ''), - flipped: boolean('Flipped (flipped)', false), - light: boolean('Light (light)', false), - selectorPrimaryFocus: text( - 'Primary focus element selector (selectorPrimaryFocus)', - '' - ), - size: select('Size (size)', sizes, undefined) || undefined, - onClick: action('onClick'), - onFocus: action('onFocus'), - onKeyDown: action('onKeyDown'), - onClose: action('onClose'), - onOpen: action('onOpen'), - }), - menuItem: () => ({ - className: 'some-class', - disabled: boolean('Disabled (disabled)', false), - requireTitle: boolean( - 'Use hover over text for menu item (requireTitle)', - false - ), - onClick: action('onClick'), - hasDivider: boolean('Has divider (hasDivider)', false), - isDelete: boolean('Is delete (isDelete)', false), - }), -}; - -OverflowMenu.displayName = 'OverflowMenu'; - -export default { - title: 'Components/OverflowMenu', - component: OverflowMenu, - decorators: [withKnobs], - subcomponents: { - OverflowMenuItem, - }, - - parameters: { - docs: { - page: mdx, - }, - }, -}; - -export const Default = () => ( - - - - - - - -); - -export const RenderCustomIcon = () => ( - - - - -); - -export const Playground = () => ( - - - - - - - -); diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js new file mode 100644 index 000000000000..e4451e56d6e9 --- /dev/null +++ b/packages/react/src/components/OverflowMenu/OverflowMenu.stories.js @@ -0,0 +1,137 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import { OverflowMenu } from './OverflowMenu'; +import { default as OverflowMenuItem } from '../OverflowMenuItem'; +import { Filter } from '@carbon/icons-react'; +import mdx from './OverflowMenu.mdx'; + +export default { + title: 'Components/OverflowMenu', + component: OverflowMenu, + subcomponents: { + OverflowMenuItem, + }, + parameters: { + docs: { + page: mdx, + }, + }, +}; + +export const Default = () => ( + + + + + + + + +); + +export const RenderCustomIcon = () => ( + + + + +); + +export const Playground = (args) => ( + + + + + + + + +); + +Playground.argTypes = { + ariaLabel: { + table: { + disable: true, + }, + }, + children: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + direction: { + table: { + disable: true, + }, + }, + flipped: { + control: { + type: 'boolean', + }, + defaultValue: false, + }, + focusTrap: { + control: { + type: 'boolean', + }, + defaultValue: false, + }, + iconClass: { + table: { + disable: true, + }, + }, + iconDescription: { + control: { type: 'text' }, + }, + id: { + table: { + disable: true, + }, + }, + light: { + table: { + disable: true, + }, + }, + menuOffset: { + table: { + disable: true, + }, + }, + menuOffsetFlip: { + table: { + disable: true, + }, + }, + menuOptionsClass: { + table: { + disable: true, + }, + }, + open: { + control: { + type: 'boolean', + }, + defaultValue: false, + }, + renderIcon: { + table: { + disable: true, + }, + }, + size: { + options: ['sm', 'md', 'lg'], + control: { type: 'select' }, + }, +}; diff --git a/packages/react/src/components/OverflowMenu/index.js b/packages/react/src/components/OverflowMenu/index.js index 7f64d2789748..a3ea0fa7e175 100644 --- a/packages/react/src/components/OverflowMenu/index.js +++ b/packages/react/src/components/OverflowMenu/index.js @@ -5,10 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import * as FeatureFlags from '@carbon/feature-flags'; import { OverflowMenu } from './OverflowMenu'; import { createClassWrapper } from '../../internal/createClassWrapper'; -export default FeatureFlags.enabled('enable-v11-release') - ? createClassWrapper(OverflowMenu) - : OverflowMenu; +export default createClassWrapper(OverflowMenu); diff --git a/packages/react/src/components/OverflowMenu/next/OverflowMenu.stories.js b/packages/react/src/components/OverflowMenu/next/OverflowMenu.stories.js deleted file mode 100644 index d9a27cf98e46..000000000000 --- a/packages/react/src/components/OverflowMenu/next/OverflowMenu.stories.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React from 'react'; -import { OverflowMenu } from '../OverflowMenu'; -import { default as OverflowMenuItem } from '../../OverflowMenuItem'; -import { Filter } from '@carbon/icons-react'; -import mdx from '../OverflowMenu.mdx'; - -export default { - title: 'Components/OverflowMenu', - component: OverflowMenu, - argTypes: { - size: { - options: ['sm', 'md', 'lg'], - control: { type: 'select' }, - }, - light: { - table: { - disable: true, - }, - }, - }, - args: { - size: 'md', - }, - subcomponents: { - OverflowMenuItem, - }, - parameters: { - docs: { - page: mdx, - }, - }, -}; - -export const Default = (args) => ( - - - - - - - - -); - -export const RenderCustomIcon = (args) => ( - - - - -); diff --git a/packages/react/src/components/ProgressBar/ProgressBar-story.js b/packages/react/src/components/ProgressBar/ProgressBar-story.js deleted file mode 100644 index 525e6c2484e0..000000000000 --- a/packages/react/src/components/ProgressBar/ProgressBar-story.js +++ /dev/null @@ -1,97 +0,0 @@ -/** - * Copyright IBM Corp. 2021 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React, { useState, useEffect } from 'react'; - -import { - withKnobs, - text, - boolean, - number, - select, -} from '@storybook/addon-knobs'; -import ProgressBar from '../ProgressBar'; - -const sizes = { - 'Small (small)': 'small', - 'Big (big) - default': 'big', -}; - -const types = { - 'Default (default)': 'default', - 'Inline (inline)': 'inline', - 'indented (indented)': 'indented', -}; - -const props = () => ({ - helperText: text('Helper text (helperText)', 'Optional helper text'), - hideLabel: boolean('Hide the label (hideLabel)', false), - label: text('Label text (label)', 'Progress bar label'), - max: number('Maximum value (max)', 100), - size: select('Size (size)', sizes, 'big'), - type: select('Type (type)', types, 'default'), - value: number('Current value (value)', 75), -}); - -export default { - title: 'Experimental/unstable_ProgressBar', - component: ProgressBar, - decorators: [withKnobs], -}; - -export const Default = () => ( - -); - -export const Indeterminate = () => ( - -); - -export const Example = () => { - const size = 728; - const [progress, setProgress] = useState(0); - - useEffect(() => { - setTimeout(() => { - const interval = setInterval(() => { - setProgress((currentProgress) => { - const advancement = Math.random() * 8; - if (currentProgress + advancement < size) { - return currentProgress + advancement; - } else { - clearInterval(interval); - return size; - } - }); - }, 50); - }, 3000); - }, []); - - const running = progress > 0; - - let helperText = running - ? `${progress.toFixed(1)}MB of ${size}MB` - : 'Fetching assets...'; - if (progress >= size) { - helperText = 'Done'; - } - - return ( - - ); -}; - -export const Playground = () => ; diff --git a/packages/react/src/components/ProgressBar/next/ProgressBar.stories.js b/packages/react/src/components/ProgressBar/ProgressBar.stories.js similarity index 92% rename from packages/react/src/components/ProgressBar/next/ProgressBar.stories.js rename to packages/react/src/components/ProgressBar/ProgressBar.stories.js index a7c48d0c87f7..d0cc7541f3e5 100644 --- a/packages/react/src/components/ProgressBar/next/ProgressBar.stories.js +++ b/packages/react/src/components/ProgressBar/ProgressBar.stories.js @@ -7,7 +7,7 @@ import React, { useState, useEffect } from 'react'; -import ProgressBar from '../'; +import ProgressBar from './'; export default { title: 'Components/ProgressBar', @@ -33,6 +33,14 @@ const PlaygroundStory = (args) => ( export const Playground = PlaygroundStory.bind({}); Playground.argTypes = { + className: { + table: { + disable: true, + }, + }, + hideLabel: { + control: { type: 'boolean' }, + }, status: { options: ['active', 'finished', 'error'], control: { type: 'select' }, diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js index 97b8a2b522a6..21c7e1d7eef1 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js @@ -72,3 +72,64 @@ export const Interactive = () => ( ); export const Skeleton = () => ; + +export const Playground = (args) => ( + + + + + + + +); + +Playground.argTypes = { + children: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + onChange: { + table: { + disable: true, + }, + }, + currentIndex: { + control: { type: 'number' }, + defaultValue: 0, + }, + spaceEqually: { + control: { type: 'boolean' }, + defaultValue: false, + }, + vertical: { + control: { type: 'boolean' }, + defaultValue: false, + }, +}; diff --git a/packages/react/src/components/Theme/next/Theme-story.scss b/packages/react/src/components/Theme/Theme-story.scss similarity index 100% rename from packages/react/src/components/Theme/next/Theme-story.scss rename to packages/react/src/components/Theme/Theme-story.scss diff --git a/packages/react/src/components/Theme/next/Theme.mdx b/packages/react/src/components/Theme/Theme.mdx similarity index 100% rename from packages/react/src/components/Theme/next/Theme.mdx rename to packages/react/src/components/Theme/Theme.mdx diff --git a/packages/react/src/components/Theme/next/Theme.stories.js b/packages/react/src/components/Theme/Theme.stories.js similarity index 96% rename from packages/react/src/components/Theme/next/Theme.stories.js rename to packages/react/src/components/Theme/Theme.stories.js index b7eef1834e23..1d824b131da5 100644 --- a/packages/react/src/components/Theme/next/Theme.stories.js +++ b/packages/react/src/components/Theme/Theme.stories.js @@ -7,8 +7,8 @@ import './Theme-story.scss'; import React from 'react'; -import { GlobalTheme, Theme, useTheme } from '../../Theme'; -import { Layer } from '../../Layer'; +import { GlobalTheme, Theme, useTheme } from '../Theme'; +import { Layer } from '../Layer'; import mdx from './Theme.mdx'; export default { diff --git a/packages/react/src/components/Tile/Tile.stories.js b/packages/react/src/components/Tile/Tile.stories.js index 128fe92ef6b2..b94e96e42aa0 100644 --- a/packages/react/src/components/Tile/Tile.stories.js +++ b/packages/react/src/components/Tile/Tile.stories.js @@ -40,6 +40,13 @@ export default { page: mdx, }, }, + argTypes: { + light: { + table: { + disable: true, + }, + }, + }, }; export const Default = () => { diff --git a/packages/styles/scss/components/data-table/_data-table.scss b/packages/styles/scss/components/data-table/_data-table.scss index fb95dc30444c..0215b82e3f90 100644 --- a/packages/styles/scss/components/data-table/_data-table.scss +++ b/packages/styles/scss/components/data-table/_data-table.scss @@ -329,26 +329,6 @@ transition: background-color $duration-fast-01 motion(entrance, productive); } - .#{$prefix}--data-table - .#{$prefix}--table-column-checkbox - .#{$prefix}--checkbox:focus - + .#{$prefix}--checkbox-label::before { - //make checkbox focus larger to match expansion btn focus - outline-offset: rem(6px); - } - - .#{$prefix}--data-table--compact - .#{$prefix}--table-column-checkbox - .#{$prefix}--checkbox:focus - + .#{$prefix}--checkbox-label::before, - .#{$prefix}--data-table--xs - .#{$prefix}--table-column-checkbox - .#{$prefix}--checkbox:focus - + .#{$prefix}--checkbox-label::before { - //make checkbox match expansion button focus size - outline-offset: rem(2px); - } - .#{$prefix}--data-table thead th.#{$prefix}--table-column-checkbox, .#{$prefix}--data-table tbody td.#{$prefix}--table-column-checkbox, .#{$prefix}--data-table thead th.#{$prefix}--table-expand,