+
{children}
);
@@ -314,3 +353,12 @@ StructuredListCell.defaultProps = {
head: false,
noWrap: false,
};
+
+export default {
+ StructuredListWrapper,
+ StructuredListHead,
+ StructuredListBody,
+ StructuredListRow,
+ StructuredListInput,
+ StructuredListCell,
+};
diff --git a/packages/react/src/components/StructuredList/next/StructuredList.stories.js b/packages/react/src/components/StructuredList/StructuredList.stories.js
similarity index 98%
rename from packages/react/src/components/StructuredList/next/StructuredList.stories.js
rename to packages/react/src/components/StructuredList/StructuredList.stories.js
index ae5f879dee50..2b7d13e3f404 100644
--- a/packages/react/src/components/StructuredList/next/StructuredList.stories.js
+++ b/packages/react/src/components/StructuredList/StructuredList.stories.js
@@ -16,8 +16,8 @@ import {
StructuredListRow,
StructuredListInput,
StructuredListCell,
-} from './StructuredList';
-import StructuredListSkeleton from '../StructuredList.Skeleton';
+} from './';
+import StructuredListSkeleton from './StructuredList.Skeleton';
const prefix = 'cds';
diff --git a/packages/react/src/components/StructuredList/index.js b/packages/react/src/components/StructuredList/index.js
index 5a66977aa16c..9fc3f1a77021 100644
--- a/packages/react/src/components/StructuredList/index.js
+++ b/packages/react/src/components/StructuredList/index.js
@@ -4,58 +4,6 @@
* 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 {
- StructuredListWrapper as StructuredListWrapperNext,
- StructuredListHead as StructuredListHeadNext,
- StructuredListInput as StructuredListInputNext,
- StructuredListBody as StructuredListBodyNext,
- StructuredListRow as StructuredListRowNext,
- StructuredListCell as StructuredListCellNext,
-} from './next/StructuredList';
-import {
- StructuredListWrapper as StructuredListWrapperClassic,
- StructuredListHead as StructuredListHeadClassic,
- StructuredListInput as StructuredListInputClassic,
- StructuredListBody as StructuredListBodyClassic,
- StructuredListRow as StructuredListRowClassic,
- StructuredListCell as StructuredListCellClassic,
-} from './StructuredList';
-import { createComponentToggle } from '../../internal/ComponentToggle';
-
-export const StructuredListWrapper = createComponentToggle({
- name: 'StructuredListWrapper',
- next: StructuredListWrapperNext,
- classic: StructuredListWrapperClassic,
-});
-
-export const StructuredListHead = createComponentToggle({
- name: 'StructuredListHead',
- next: StructuredListHeadNext,
- classic: StructuredListHeadClassic,
-});
-
-export const StructuredListInput = createComponentToggle({
- name: 'StructuredListInput',
- next: StructuredListInputNext,
- classic: StructuredListInputClassic,
-});
-
-export const StructuredListBody = createComponentToggle({
- name: 'StructuredListBody',
- next: StructuredListBodyNext,
- classic: StructuredListBodyClassic,
-});
-
-export const StructuredListRow = createComponentToggle({
- name: 'StructuredListRow',
- next: StructuredListRowNext,
- classic: StructuredListRowClassic,
-});
-
-export const StructuredListCell = createComponentToggle({
- name: 'StructuredListCell',
- next: StructuredListCellNext,
- classic: StructuredListCellClassic,
-});
+export * from './StructuredList';
export { default as StructuredListSkeleton } from './StructuredList.Skeleton';
diff --git a/packages/react/src/components/StructuredList/next/StructuredList-test.js b/packages/react/src/components/StructuredList/next/StructuredList-test.js
deleted file mode 100644
index 47d645b139d1..000000000000
--- a/packages/react/src/components/StructuredList/next/StructuredList-test.js
+++ /dev/null
@@ -1,205 +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 {
- StructuredListWrapper,
- StructuredListHead,
- StructuredListInput,
- StructuredListBody,
- StructuredListRow,
- StructuredListCell,
-} from '../StructuredList';
-import { mount, shallow } from 'enzyme';
-
-const prefix = 'cds';
-
-describe('StructuredListWrapper', () => {
- describe('Renders as expected', () => {
- const wrapper = shallow(
-
hi
- );
-
- it('should have the expected classes', () => {
- expect(
- wrapper.find('div').hasClass(`${prefix}--structured-list`)
- ).toEqual(true);
- });
-
- it('Should add extra classes that are passed via className', () => {
- expect(wrapper.find('div').hasClass('extra-class')).toEqual(true);
- });
-
- it('By default, selection prop is false', () => {
- expect(wrapper.hasClass(`${prefix}--structured-list--selection`)).toEqual(
- false
- );
- });
-
- it('Should add the modifier class for selection when selection prop is true', () => {
- wrapper.setProps({ selection: true });
- expect(
- wrapper.find('div').hasClass(`${prefix}--structured-list--selection`)
- ).toEqual(true);
- });
-
- it('Should add the modifier class for condensed when isCondensed prop is true', () => {
- wrapper.setProps({ isCondensed: true });
- expect(
- wrapper.find('div').hasClass(`${prefix}--structured-list--condensed`)
- ).toEqual(true);
- });
-
- it('Should add the modifier class for flush when isFlush prop is true', () => {
- wrapper.setProps({ isFlush: true });
- expect(
- wrapper.find('div').hasClass(`${prefix}--structured-list--flush`)
- ).toEqual(true);
- });
- });
-});
-
-describe('StructuredListHead', () => {
- describe('Renders as expected', () => {
- const wrapper = shallow(
-
hi
- );
-
- it('should have the expected classes', () => {
- expect(wrapper.hasClass(`${prefix}--structured-list-thead`)).toEqual(
- true
- );
- });
-
- it('Should add extra classes that are passed via className', () => {
- expect(wrapper.hasClass('extra-class')).toEqual(true);
- });
-
- it('Should accept other props from ...other', () => {
- const wrapperProps = shallow(
-
hi
- );
- expect(wrapperProps.props().title).toEqual('title');
- });
- });
-});
-
-describe('StructuredListInput', () => {
- describe('Renders as expected', () => {
- const wrapper = shallow(
);
-
- it('should have the expected classes', () => {
- expect(wrapper.hasClass(`${prefix}--structured-list-input`)).toEqual(
- true
- );
- });
-
- it('Should add extra classes that are passed via className', () => {
- expect(wrapper.hasClass('extra-class')).toEqual(true);
- });
-
- it('Should accept other props from ...other', () => {
- const wrapperProps = shallow(
);
- expect(wrapperProps.props().title).toEqual('title');
- });
-
- it('Should render unique id with multiple inputs when no id prop is given', () => {
- const wrapper1 = mount(
);
- const wrapper2 = mount(
);
- expect(wrapper1.find('[id]')).not.toEqual(wrapper2.find('[id]'));
- });
- });
-});
-
-describe('StructuredListRow', () => {
- describe('Renders as expected', () => {
- const wrapper = shallow(
);
-
- it('should have the expected classes', () => {
- expect(wrapper.hasClass(`${prefix}--structured-list-row`)).toEqual(true);
- });
-
- it('Should add extra classes that are passed via className', () => {
- expect(wrapper.hasClass('extra-class')).toEqual(true);
- });
-
- it('should use correct class when head prop is true', () => {
- wrapper.setProps({ head: true });
-
- expect(
- wrapper.hasClass(`${prefix}--structured-list-row--header-row`)
- ).toEqual(true);
- });
-
- it('Should accept other props from ...other', () => {
- const wrapperProps = shallow(
-
hi
- );
- expect(wrapperProps.props().title).toEqual('title');
- });
- });
-});
-
-describe('StructuredListBody', () => {
- describe('Renders as expected', () => {
- const wrapper = shallow(
-
hi
- );
-
- it('should have the expected classes', () => {
- expect(wrapper.hasClass(`${prefix}--structured-list-tbody`)).toEqual(
- true
- );
- });
-
- it('Should add extra classes that are passed via className', () => {
- expect(wrapper.hasClass('extra-class')).toEqual(true);
- });
-
- it('Should accept other props from ...other', () => {
- const wrapperProps = shallow(
-
hi
- );
- expect(wrapperProps.props().title).toEqual('title');
- });
- });
-});
-
-describe('StructuredListCell', () => {
- describe('Renders as expected', () => {
- const wrapper = shallow(
-
hi
- );
-
- it('Should add extra classes that are passed via className', () => {
- expect(wrapper.hasClass('extra-class')).toEqual(true);
- });
-
- it('should have the expected classes', () => {
- expect(wrapper.hasClass(`${prefix}--structured-list-td`)).toEqual(true);
- });
-
- it('should use correct class when head prop is true', () => {
- wrapper.setProps({ head: true });
- expect(wrapper.hasClass(`${prefix}--structured-list-th`)).toEqual(true);
- });
-
- it('should use correct class when noWrap prop is true', () => {
- wrapper.setProps({ noWrap: true });
- expect(
- wrapper.hasClass(`${prefix}--structured-list-content--nowrap`)
- ).toEqual(true);
- });
-
- it('Should accept other props from ...other', () => {
- const wrapperProps = shallow(
-
hi
- );
- expect(wrapperProps.props().title).toEqual('title');
- });
- });
-});
diff --git a/packages/react/src/components/StructuredList/next/StructuredList.js b/packages/react/src/components/StructuredList/next/StructuredList.js
deleted file mode 100644
index d502d57a1d01..000000000000
--- a/packages/react/src/components/StructuredList/next/StructuredList.js
+++ /dev/null
@@ -1,364 +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, { useState } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { useId } from '../../../internal/useId';
-import deprecate from '../../../prop-types/deprecate';
-import { usePrefix } from '../../../internal/usePrefix';
-
-const GridSelectedRowStateContext = React.createContext(null);
-const GridSelectedRowDispatchContext = React.createContext(null);
-
-export function StructuredListWrapper(props) {
- const {
- children,
- selection,
- className,
- ariaLabel,
- isCondensed,
- isFlush,
- ...other
- } = props;
- const prefix = usePrefix();
- const classes = classNames(`${prefix}--structured-list`, className, {
- [`${prefix}--structured-list--selection`]: selection,
- [`${prefix}--structured-list--condensed`]: isCondensed,
- [`${prefix}--structured-list--flush`]: isFlush,
- });
- const [selectedRow, setSelectedRow] = React.useState(null);
-
- return (
-
-
-
- {children}
-
-
-
- );
-}
-
-StructuredListWrapper.propTypes = {
- /**
- * Specify a label to be read by screen readers on the container node
- */
- ariaLabel: PropTypes.string,
-
- /**
- * Provide the contents of your StructuredListWrapper
- */
- children: PropTypes.node,
-
- /**
- * Specify an optional className to be applied to the container node
- */
- className: PropTypes.string,
-
- /**
- * Specify if structured list is condensed, default is false
- */
- isCondensed: PropTypes.bool,
-
- /**
- * Specify if structured list is flush, default is false
- */
- isFlush: PropTypes.bool,
-
- /**
- * Specify whether your StructuredListWrapper should have selections
- */
- selection: PropTypes.bool,
-};
-
-StructuredListWrapper.defaultProps = {
- selection: false,
- isCondensed: false,
- isFlush: false,
- ariaLabel: 'Structured list section',
-};
-
-export function StructuredListHead(props) {
- const { children, className, ...other } = props;
- const prefix = usePrefix();
- const classes = classNames(`${prefix}--structured-list-thead`, className);
-
- return (
-
- {children}
-
- );
-}
-
-StructuredListHead.propTypes = {
- /**
- * Provide the contents of your StructuredListHead
- */
- children: PropTypes.node,
-
- /**
- * Specify an optional className to be applied to the node
- */
- className: PropTypes.string,
-};
-
-export function StructuredListBody(props) {
- const { children, className, ...other } = props;
- const prefix = usePrefix();
- const classes = classNames(`${prefix}--structured-list-tbody`, className);
-
- return (
-
- {children}
-
- );
-}
-
-StructuredListBody.propTypes = {
- /**
- * Provide the contents of your StructuredListBody
- */
- children: PropTypes.node,
-
- /**
- * Specify an optional className to be applied to the container node
- */
- className: PropTypes.string,
-
- head: PropTypes.bool,
-
- /**
- * Provide a handler that is invoked on the key down event for the control
- */
- onKeyDown: PropTypes.func,
-};
-
-StructuredListBody.defaultProps = {
- onKeyDown: () => {},
-};
-
-const GridRowContext = React.createContext(null);
-
-export function StructuredListRow(props) {
- const { onKeyDown, children, className, head, ...other } = props;
- const [hasFocusWithin, setHasFocusWithin] = useState(false);
- const id = useId('grid-input');
- const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
- const prefix = usePrefix();
- const value = { id };
- const classes = classNames(`${prefix}--structured-list-row`, className, {
- [`${prefix}--structured-list-row--header-row`]: head,
- [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
- });
-
- return head ? (
-
- {children}
-
- ) : (
- // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-
setSelectedRow(id)}
- onFocus={() => {
- setHasFocusWithin(true);
- }}
- onBlur={() => {
- setHasFocusWithin(false);
- }}
- onKeyDown={onKeyDown}>
-
- {children}
-
-
- );
-}
-
-StructuredListRow.propTypes = {
- /**
- * Provide the contents of your StructuredListRow
- */
- children: PropTypes.node,
-
- /**
- * Specify an optional className to be applied to the container node
- */
- className: PropTypes.string,
-
- /**
- * Specify whether your StructuredListRow should be used as a header row
- */
- head: PropTypes.bool,
-
- /**
- * Specify whether a `
` should be used
- */
- label: deprecate(
- PropTypes.bool,
- `\nThe \`label\` prop is no longer needed and will be removed in the next major version of Carbon.`
- ),
-
- /**
- * Provide a handler that is invoked on the key down event for the control,
- */
- onKeyDown: PropTypes.func,
-};
-
-StructuredListRow.defaultProps = {
- head: false,
- onKeyDown: () => {},
-};
-
-export function StructuredListInput(props) {
- const defaultId = useId('structureListInput');
- const {
- className,
- name = `structured-list-input-${defaultId}`,
- title,
- id,
- ...other
- } = props;
- const prefix = usePrefix();
- const classes = classNames(
- `${prefix}--structured-list-input`,
- `${prefix}--visually-hidden`,
- className
- );
- const row = React.useContext(GridRowContext);
- const selectedRow = React.useContext(GridSelectedRowStateContext);
- const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
-
- return (
-
- {children}
-
- );
- }
-
- return (
-
- {children}
-
- );
-}
-
-StructuredListCell.propTypes = {
- /**
- * Provide the contents of your StructuredListCell
- */
- children: PropTypes.node,
-
- /**
- * Specify an optional className to be applied to the container node
- */
- className: PropTypes.string,
-
- /**
- * Specify whether your StructuredListCell should be used as a header cell
- */
- head: PropTypes.bool,
-
- /**
- * Specify whether your StructuredListCell should have text wrapping
- */
- noWrap: PropTypes.bool,
-};
-
-StructuredListCell.defaultProps = {
- head: false,
- noWrap: false,
-};
-
-export default {
- StructuredListWrapper,
- StructuredListHead,
- StructuredListBody,
- StructuredListRow,
- StructuredListInput,
- StructuredListCell,
-};
diff --git a/packages/react/src/components/StructuredList/next/StructuredList.mdx b/packages/react/src/components/StructuredList/next/StructuredList.mdx
deleted file mode 100644
index 6632318ffd71..000000000000
--- a/packages/react/src/components/StructuredList/next/StructuredList.mdx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Props } from '@storybook/addon-docs';
-
-# StructuredList
-
-[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/StructuredList)
- |
-[Usage guidelines](https://www.carbondesignsystem.com/components/structured-list/usage)
- |
-[Accessibility](https://www.carbondesignsystem.com/components/structured-list/accessibility)
-
-## Table of Contents
-
-## Overview
-
-## Component API
-
-
+
{'Tag content'}
-
+
{'Tag content'}
-
+
{'Tag content'}
-
+
{'Tag content'}
-
+
{'Tag content'}
-
+
{'Tag content'}
-
+
{'Tag content'}
-
+
{'Tag content'}
+ title="Clear Filter">
{'Tag content'}
+ title="Clear Filter">
{'Tag content'}
+ title="Clear Filter">
{'Tag content'}
-
+
{'Tag content'}
);
};
+
+export const Playground = (args) => {
+ return {'Tag content'} ;
+};
+
+Playground.argTypes = {
+ children: {
+ control: false,
+ },
+ className: {
+ control: false,
+ },
+ disabled: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ filter: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ id: {
+ control: false,
+ },
+ renderIcon: {
+ control: false,
+ },
+ size: {
+ defaultValue: 'md',
+ options: ['sm', 'md'],
+ control: {
+ type: 'select',
+ },
+ },
+ title: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'Clear filter',
+ },
+ type: {
+ options: [
+ 'red',
+ 'magenta',
+ 'purple',
+ 'blue',
+ 'cyan',
+ 'teal',
+ 'green',
+ 'gray',
+ 'cool-gray',
+ 'warm-gray',
+ 'high-contrast',
+ 'outline',
+ ],
+ control: {
+ type: 'select',
+ },
+ },
+};
diff --git a/packages/react/src/components/TextArea/TextArea-test.js b/packages/react/src/components/TextArea/TextArea-test.js
index 6d203263a3d7..bee02c651684 100644
--- a/packages/react/src/components/TextArea/TextArea-test.js
+++ b/packages/react/src/components/TextArea/TextArea-test.js
@@ -44,7 +44,7 @@ describe('TextArea', () => {
});
it('should set cols as expected', () => {
- expect(textarea().props().cols).toEqual(50);
+ expect(textarea().props().style).toEqual({ width: '100%' });
wrapper.setProps({ cols: 200 });
expect(textarea().props().cols).toEqual(200);
});
diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
index 441a4a2a0a79..5fa92e064a7a 100644
--- a/packages/react/src/components/TextArea/TextArea.js
+++ b/packages/react/src/components/TextArea/TextArea.js
@@ -128,6 +128,13 @@ const TextArea = React.forwardRef(function TextArea(
aria-invalid={invalid || null}
aria-describedby={invalid ? errorId : null}
disabled={other.disabled}
+ style={
+ other.cols
+ ? {}
+ : {
+ width: `100%`,
+ }
+ }
/>
);
@@ -268,7 +275,6 @@ TextArea.defaultProps = {
onClick: () => {},
placeholder: '',
rows: 4,
- cols: 50,
invalid: false,
invalidText: '',
helperText: '',
diff --git a/packages/react/src/components/TextArea/TextArea.stories.js b/packages/react/src/components/TextArea/TextArea.stories.js
index 5a89e26b4738..296cf048905a 100644
--- a/packages/react/src/components/TextArea/TextArea.stories.js
+++ b/packages/react/src/components/TextArea/TextArea.stories.js
@@ -15,13 +15,19 @@ export default {
subcomponents: {
TextAreaSkeleton,
},
+ argTypes: {
+ light: {
+ table: {
+ disable: true,
+ },
+ },
+ },
};
export const Default = () => (
@@ -33,7 +39,6 @@ export const WithLayer = () => {
@@ -41,7 +46,6 @@ export const WithLayer = () => {
@@ -49,7 +53,6 @@ export const WithLayer = () => {
@@ -65,26 +68,18 @@ export const Playground = (args) => ;
Playground.argTypes = {
className: {
- control: {
- type: 'text',
- },
+ control: false,
},
cols: {
control: {
type: 'number',
},
- defaultValue: 50,
},
defaultValue: {
control: {
type: 'text',
},
},
- value: {
- control: {
- type: 'text',
- },
- },
disabled: {
control: {
type: 'boolean',
@@ -109,9 +104,7 @@ Playground.argTypes = {
defaultValue: false,
},
id: {
- control: {
- type: 'text',
- },
+ control: false,
},
invalid: {
control: {
@@ -123,22 +116,35 @@ Playground.argTypes = {
control: {
type: 'text',
},
+ defaultValue: '',
},
labelText: {
control: {
type: 'text',
},
},
- light: {
+ maxCount: {
control: {
- type: 'boolean',
+ type: 'number',
},
- defaultValue: false,
},
- maxCount: {
+ placeholder: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: '',
+ },
+ rows: {
control: {
type: 'number',
},
+ defaultValue: 4,
+ },
+ value: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: '',
},
};
diff --git a/packages/react/src/components/TextInput/TextInput.stories.js b/packages/react/src/components/TextInput/TextInput.stories.js
index 139f29969e27..026bc7d86eed 100644
--- a/packages/react/src/components/TextInput/TextInput.stories.js
+++ b/packages/react/src/components/TextInput/TextInput.stories.js
@@ -47,6 +47,7 @@ export const TogglePasswordVisibility = () => {
id="text-input-1"
labelText="Text input label"
helperText="Optional help text"
+ autoComplete="true"
/>
);
};
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/react/src/components/TimePicker/TimePicker-story.js b/packages/react/src/components/TimePicker/TimePicker-story.js
deleted file mode 100644
index 11ab1263b9b6..000000000000
--- a/packages/react/src/components/TimePicker/TimePicker-story.js
+++ /dev/null
@@ -1,94 +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 {
- withKnobs,
- boolean,
- number,
- select,
- text,
-} from '@storybook/addon-knobs';
-import TimePicker from '../TimePicker';
-import TimePickerSelect from '../TimePickerSelect';
-import SelectItem from '../SelectItem';
-import mdx from './TimePicker.mdx';
-
-const sizes = {
- 'Small (sm)': 'sm',
- 'Medium (md) - default': undefined,
- 'Large (lg)': 'lg',
-};
-
-const props = {
- timepicker: () => ({
- pattern: text(
- 'Regular expression for the value (pattern in )',
- '(1[012]|[1-9]):[0-5][0-9](\\s)?'
- ),
- placeholder: text(
- 'Placeholder text (placeholder in )',
- 'hh:mm'
- ),
- disabled: boolean('Disabled (disabled in )', false),
- light: boolean('Light variant (light in )', false),
- labelText: text('Label text (labelText in )', 'Select a time'),
- invalid: boolean(
- 'Show form validation UI (invalid in )',
- false
- ),
- invalidText: text(
- 'Form validation UI content (invalidText in )',
- 'A valid value is required'
- ),
- maxLength: number('Maximum length (maxLength in )', 5),
- size: select('Field size (size)', sizes, undefined) || undefined,
- }),
- select: () => ({
- disabled: boolean('Disabled (disabled in )', false),
- labelText: text(
- 'Label text (labelText in )',
- 'Please select'
- ),
- ['aria-label']: text(
- 'ARIA label (aria-label in )',
- 'open list of options'
- ),
- }),
-};
-
-export default {
- title: 'Components/TimePicker',
- component: TimePicker,
- decorators: [withKnobs],
- subcomponents: {
- TimePickerSelect,
- SelectItem,
- },
- parameters: {
- docs: {
- page: mdx,
- },
- },
-};
-
-export const Default = () => {
- const selectProps = props.select();
- return (
-
-
-
-
-
-
- );
-};
diff --git a/packages/react/src/components/TimePicker/TimePicker-test.js b/packages/react/src/components/TimePicker/TimePicker-test.js
index 4dd08e725bfd..7aec125bb018 100644
--- a/packages/react/src/components/TimePicker/TimePicker-test.js
+++ b/packages/react/src/components/TimePicker/TimePicker-test.js
@@ -6,177 +6,63 @@
*/
import React from 'react';
-import TimePicker from '../TimePicker';
-import { mount, shallow } from 'enzyme';
+import { default as TimePicker } from './TimePicker';
-const prefix = 'cds';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
describe('TimePicker', () => {
- describe('renders as expected', () => {
- describe('input', () => {
- let wrapper;
- let timePicker;
- let textInput;
-
- beforeEach(() => {
- wrapper = mount(
- {(prefix) => {
- const timePickerInputProps = {
- className: classNames(
- `${prefix}--time-picker__input-field`,
- `${prefix}--text-input`,
- [enabled ? null : className],
- {
- [`${prefix}--text-input--light`]: light,
- }
- ),
-
- onChange: (evt) => {
- if (!other.disabled) {
- this.setState({
- value: evt.target.value,
- });
- onChange(evt);
- }
- },
- onClick: (evt) => {
- if (!other.disabled) {
- this.setState({
- value: evt.target.value,
- });
- onClick(evt);
- }
- },
- onBlur: (evt) => {
- if (!other.disabled) {
- this.setState({
- value: evt.target.value,
- });
- onBlur(evt);
- }
- },
- pattern,
- placeholder,
- maxLength,
- id,
- type,
- value: this.state.value,
- };
-
- const timePickerClasses = classNames({
- [`${prefix}--time-picker`]: true,
- [`${prefix}--time-picker--light`]: light,
- [`${prefix}--time-picker--invalid`]: invalid,
- [`${prefix}--time-picker--${size}`]: size,
- [className]: className,
- });
-
- const labelClasses = classNames(`${prefix}--label`, {
- [`${prefix}--visually-hidden`]: hideLabel,
- [`${prefix}--label--disabled`]: other.disabled,
- });
-
- const label = labelText ? (
-
- {labelText}
-
- ) : null;
-
- const error = invalid ? (
- {invalidText}
- ) : null;
-
- return (
-
- );
- }}
-
- );
+ function handleOnChange(evt) {
+ if (!disabled) {
+ setValue(isValue);
+ onChange(evt);
+ }
}
-}
+
+ function handleOnBlur(evt) {
+ if (!disabled) {
+ setValue(isValue);
+ onBlur(evt);
+ }
+ }
+
+ const timePickerInputClasses = cx(
+ `${prefix}--time-picker__input-field`,
+ `${prefix}--text-input`,
+ [className],
+ {
+ [`${prefix}--text-input--light`]: light,
+ }
+ );
+
+ const timePickerClasses = cx({
+ [`${prefix}--time-picker`]: true,
+ [`${prefix}--time-picker--light`]: light,
+ [`${prefix}--time-picker--invalid`]: invalid,
+ [`${prefix}--time-picker--${size}`]: size,
+ [className]: className,
+ });
+
+ const labelClasses = cx(`${prefix}--label`, {
+ [`${prefix}--visually-hidden`]: hideLabel,
+ [`${prefix}--label--disabled`]: disabled,
+ });
+
+ const label = labelText ? (
+
+ {labelText}
+
+ ) : null;
+
+ const error = invalid ? (
+ {invalidText}
+ ) : null;
+
+ return (
+
+ );
+});
+
+TimePicker.propTypes = {
+ /**
+ * Pass in the children that will be rendered next to the form control
+ */
+ children: PropTypes.node,
+
+ /**
+ * Specify an optional className to be applied to the container node
+ */
+ className: PropTypes.string,
+
+ /**
+ * Specify whether the `
+
+
-
+
-
+
+
+
+
+
+
+ );
+};
+
+Playground.argTypes = {
+ children: {
+ table: {
+ disable: true,
+ },
+ },
+ className: {
+ table: {
+ disable: true,
+ },
+ },
+ id: {
+ table: {
+ disable: true,
+ },
+ },
+ disabled: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ hideLabel: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ invalid: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ invalidText: {
+ control: { type: 'text' },
+ },
+ labelText: {
+ control: { type: 'text' },
+ },
+ size: {
+ options: ['sm', 'md', 'lg'],
+ control: { type: 'select' },
+ },
+ light: {
+ table: {
+ disable: true,
+ },
+ },
+ pattern: {
+ table: {
+ disable: true,
+ },
+ },
+};
diff --git a/packages/react/src/components/TimePicker/index.js b/packages/react/src/components/TimePicker/index.js
index f1fdaeb0e0e5..f41baa0c4a41 100644
--- a/packages/react/src/components/TimePicker/index.js
+++ b/packages/react/src/components/TimePicker/index.js
@@ -5,14 +5,4 @@
* LICENSE file in the root directory of this source tree.
*/
-import * as FeatureFlags from '@carbon/feature-flags';
-
-import { default as TimePickerNext } from './next/TimePicker';
-
-import { default as TimePickerClassic } from './TimePicker';
-
-const TimePicker = FeatureFlags.enabled('enable-v11-release')
- ? TimePickerNext
- : TimePickerClassic;
-
-export default TimePicker;
+export default from './TimePicker';
diff --git a/packages/react/src/components/TimePicker/next/TimePicker-test.js b/packages/react/src/components/TimePicker/next/TimePicker-test.js
deleted file mode 100644
index 7aec125bb018..000000000000
--- a/packages/react/src/components/TimePicker/next/TimePicker-test.js
+++ /dev/null
@@ -1,68 +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 { default as TimePicker } from './TimePicker';
-
-import { render, screen, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-describe('TimePicker', () => {
- describe('input', () => {
- it('renders as expected', () => {
- render(
- {labelText}
-
- ) : null;
-
- const error = invalid ? (
- {invalidText}
- ) : null;
-
- return (
-
- );
-});
-
-TimePicker.propTypes = {
- /**
- * Pass in the children that will be rendered next to the form control
- */
- children: PropTypes.node,
-
- /**
- * Specify an optional className to be applied to the container node
- */
- className: PropTypes.string,
-
- /**
- * Specify whether the `