+
-
+
+ {title && (
+
+ {title}
+
+ )}
+ {subtitle && (
+
+ {subtitle}
+
+ )}
{children}
-
+
- {actions}
{!hideCloseButton && (
)}
@@ -501,12 +473,187 @@ export function InlineNotification({
InlineNotification.propTypes = {
/**
- * Pass in the action nodes that will be rendered within the InlineNotification
+ * Specify the content
+ */
+ children: PropTypes.node,
+
+ /**
+ * Specify an optional className to be applied to the notification box
+ */
+ className: PropTypes.string,
+
+ /**
+ * Specify the close button should be disabled, or not
+ */
+ hideCloseButton: PropTypes.bool,
+
+ /**
+ * Specify what state the notification represents
+ */
+ kind: PropTypes.oneOf([
+ 'error',
+ 'info',
+ 'info-square',
+ 'success',
+ 'warning',
+ 'warning-alt',
+ ]),
+
+ /**
+ * Specify whether you are using the low contrast variant of the InlineNotification.
+ */
+ lowContrast: PropTypes.bool,
+
+ /**
+ * Provide a function that is called when menu is closed
+ */
+ onClose: PropTypes.func,
+
+ /**
+ * Provide a function that is called when the close button is clicked
+ */
+ onCloseButtonClick: PropTypes.func,
+
+ /**
+ * By default, this value is "status". You can also provide an alternate
+ * role if it makes sense from the accessibility-side.
+ */
+ role: PropTypes.oneOf(['alert', 'log', 'status']),
+
+ /**
+ * Provide a description for "status" icon that can be read by screen readers
+ */
+ statusIconDescription: PropTypes.string,
+
+ /**
+ * Specify the sub-title
+ */
+ subtitle: PropTypes.string,
+
+ /**
+ * Specify the title
+ */
+ title: PropTypes.string,
+};
+
+InlineNotification.defaultProps = {
+ kind: 'error',
+ role: 'status',
+ onCloseButtonClick: () => {},
+ hideCloseButton: false,
+};
+
+export function ActionableNotification({
+ actionButtonLabel,
+ ariaLabel,
+ children,
+ role,
+ onActionButtonClick,
+ onClose,
+ onCloseButtonClick,
+ statusIconDescription,
+ className,
+ inline,
+ kind,
+ lowContrast,
+ hideCloseButton,
+ hasFocus,
+ closeOnEscape,
+ title,
+ subtitle,
+ ...rest
+}) {
+ const [isOpen, setIsOpen] = useState(true);
+ const prefix = usePrefix();
+ const containerClassName = cx(className, {
+ [`${prefix}--actionable-notification`]: true,
+ [`${prefix}--actionable-notification--toast`]: !inline,
+ [`${prefix}--actionable-notification--low-contrast`]: lowContrast,
+ [`${prefix}--actionable-notification--${kind}`]: kind,
+ [`${prefix}--actionable-notification--hide-close-button`]: hideCloseButton,
+ });
+
+ const ref = useRef(null);
+ useIsomorphicEffect(() => {
+ if (ref.current && hasFocus) {
+ ref.current.focus();
+ }
+ });
+
+ const handleClose = (evt) => {
+ if (!onClose || onClose(evt) !== false) {
+ setIsOpen(false);
+ }
+ };
+ useEscapeToClose(ref, handleCloseButtonClick, closeOnEscape);
+
+ function handleCloseButtonClick(event) {
+ onCloseButtonClick(event);
+ handleClose(event);
+ }
+
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+ {title && (
+
+ {title}
+
+ )}
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+ {children}
+
+
+
+
+
+ {actionButtonLabel}
+
+
+ {!hideCloseButton && (
+
+ )}
+
+ );
+}
+
+ActionableNotification.propTypes = {
+ /**
+ * Pass in the action button label that will be rendered within the ActionableNotification.
+ */
+ actionButtonLabel: PropTypes.string.isRequired,
+
+ /**
+ * Provide a description for "close" icon button that can be read by screen readers
*/
- actions: PropTypes.node,
+ ariaLabel: PropTypes.string,
/**
- * Pass in the children that will be rendered within the InlineNotification
+ * Specify the caption
+ */
+ caption: PropTypes.string,
+
+ /**
+ * Specify the content
*/
children: PropTypes.node,
@@ -515,15 +662,25 @@ InlineNotification.propTypes = {
*/
className: PropTypes.string,
+ /**
+ * Specify if pressing the escape key should close notifications
+ */
+ closeOnEscape: PropTypes.bool,
+
+ /**
+ * Specify if focus should be moved to the component when the notification contains actions
+ */
+ hasFocus: PropTypes.bool,
+
/**
* Specify the close button should be disabled, or not
*/
hideCloseButton: PropTypes.bool,
- /**
- * Provide a description for "close" icon that can be read by screen readers
+ /*
+ * Specify if the notification should have inline styling applied instead of toast
*/
- iconDescription: PropTypes.string,
+ inline: PropTypes.bool,
/**
* Specify what state the notification represents
@@ -538,15 +695,14 @@ InlineNotification.propTypes = {
]).isRequired,
/**
- * Specify whether you are using the low contrast variant of the InlineNotification.
+ * Specify whether you are using the low contrast variant of the ActionableNotification.
*/
lowContrast: PropTypes.bool,
/**
- * By default, this value is "inline". You can also provide an alternate type
- * if it makes sense for the underlying `
` and ``
+ * Provide a function that is called when the action is clicked
*/
- notificationType: PropTypes.string,
+ onActionButtonClick: PropTypes.func,
/**
* Provide a function that is called when menu is closed
@@ -559,10 +715,10 @@ InlineNotification.propTypes = {
onCloseButtonClick: PropTypes.func,
/**
- * By default, this value is "alert". You can also provide an alternate
- * role if it makes sense from the accessibility-side
+ * By default, this value is "alertdialog". You can also provide an alternate
+ * role if it makes sense from the accessibility-side.
*/
- role: PropTypes.string.isRequired,
+ role: PropTypes.string,
/**
* Provide a description for "status" icon that can be read by screen readers
@@ -572,18 +728,20 @@ InlineNotification.propTypes = {
/**
* Specify the sub-title
*/
- subtitle: PropTypes.node,
+ subtitle: PropTypes.string,
/**
* Specify the title
*/
- title: PropTypes.string.isRequired,
+ title: PropTypes.string,
};
-InlineNotification.defaultProps = {
- role: 'alert',
- notificationType: 'inline',
- iconDescription: 'closes notification',
+ActionableNotification.defaultProps = {
+ kind: 'error',
+ role: 'alertdialog',
onCloseButtonClick: () => {},
hideCloseButton: false,
+ hasFocus: true,
+ closeOnEscape: true,
+ inline: false,
};
diff --git a/packages/react/src/components/Notification/Notification.mdx b/packages/react/src/components/Notification/Notification.mdx
index 477227b95415..eea2568a58f9 100644
--- a/packages/react/src/components/Notification/Notification.mdx
+++ b/packages/react/src/components/Notification/Notification.mdx
@@ -1,4 +1,4 @@
-import { Props } from '@storybook/addon-docs';
+import { Story, Preview, Props } from '@storybook/addon-docs';
# Notification
@@ -10,12 +10,39 @@ import { Props } from '@storybook/addon-docs';
## Table of Contents
+- [Overview](#overview)
+- [Component API](#component-api)
+- [Actionable](#actionable)
+- [References](#references)
+- [Feedback](#feedback)
+
## Overview
+There are 3 different types of notification components:
+`ActionableNotification`, `InlineNotification`, and `ToastNotification`.
+
## Component API
+
+
+## Inline
+
+
+
+
+## Toast
+
+
+
+
## Feedback
Help us improve this component by providing feedback, asking questions on Slack,
diff --git a/packages/react/src/components/Notification/index.js b/packages/react/src/components/Notification/index.js
index 7d060a62edc0..867e40e34e7b 100644
--- a/packages/react/src/components/Notification/index.js
+++ b/packages/react/src/components/Notification/index.js
@@ -5,53 +5,10 @@
* LICENSE file in the root directory of this source tree.
*/
-import {
- NotificationActionButton as NotificationActionButtonNext,
- NotificationButton as NotificationButtonNext,
- ToastNotification as ToastNotificationNext,
- InlineNotification as InlineNotificationNext,
- ActionableNotification as ActionableNotificationNext,
-} from './next/Notification';
-import {
- NotificationActionButton as NotificationActionButtonClassic,
- NotificationTextDetails as NotificationTextDetailsClassic,
- NotificationButton as NotificationButtonClassic,
- ToastNotification as ToastNotificationClassic,
- InlineNotification as InlineNotificationClassic,
+export {
+ NotificationActionButton,
+ NotificationButton,
+ ToastNotification,
+ InlineNotification,
+ ActionableNotification,
} from './Notification';
-import { createComponentToggle } from '../../internal/ComponentToggle';
-
-export const NotificationActionButton = createComponentToggle({
- name: 'NotificationActionButton',
- next: NotificationActionButtonNext,
- classic: NotificationActionButtonClassic,
-});
-
-export const NotificationTextDetails = createComponentToggle({
- name: 'NotificationTextDetails',
- classic: NotificationTextDetailsClassic,
-});
-
-export const NotificationButton = createComponentToggle({
- name: 'NotificationButton',
- next: NotificationButtonNext,
- classic: NotificationButtonClassic,
-});
-
-export const ToastNotification = createComponentToggle({
- name: 'ToastNotification',
- next: ToastNotificationNext,
- classic: ToastNotificationClassic,
-});
-
-export const InlineNotification = createComponentToggle({
- name: 'InlineNotification',
- next: InlineNotificationNext,
- classic: InlineNotificationClassic,
-});
-
-export const ActionableNotification = createComponentToggle({
- name: 'ActionableNotification',
- next: ActionableNotificationNext,
- classic: null,
-});
diff --git a/packages/react/src/components/Notification/next/Notification-test.js b/packages/react/src/components/Notification/next/Notification-test.js
deleted file mode 100644
index eacac26e2c6c..000000000000
--- a/packages/react/src/components/Notification/next/Notification-test.js
+++ /dev/null
@@ -1,342 +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 { ErrorFilled } from '@carbon/icons-react';
-import {
- NotificationButton,
- ToastNotification,
- InlineNotification,
- ActionableNotification,
-} from '../next/Notification';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { it } from 'window-or-global';
-
-const prefix = 'cds';
-
-describe('NotificationButton', () => {
- it('should place the `className` prop on the outermost DOM node', () => {
- const { container } = render(
- Sample text
-
- );
- expect(screen.queryByText(/Sample text/i)).toBeInTheDocument();
- });
-
- it('does not allow interactive elements as children', () => {
- const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-
- expect(() => {
- render(
-
- Sample button text
-
- );
- }).toThrow();
-
- expect(spy).toHaveBeenCalled();
- spy.mockRestore();
- });
-
- it('close button is rendered by default and includes aria-hidden=true', () => {
- render( false} />
- );
-
- const closeButton = screen.queryByRole('button', {
- hidden: true,
- });
- userEvent.click(closeButton);
- expect(screen.queryByRole('status')).toBeInTheDocument();
- });
-
- it('calls `onCloseButtonClick` when notification is closed', () => {
- const onCloseButtonClick = jest.fn();
- render(
-
- Sample text
-
- );
- expect(screen.queryByText(/Sample text/i)).toBeInTheDocument();
- });
-
- it('does not allow interactive elements as children', () => {
- const spy = jest.spyOn(console, 'error').mockImplementation(() => {});
-
- expect(() => {
- render(
-
- Sample button text
-
- );
- }).toThrow();
-
- expect(spy).toHaveBeenCalled();
- spy.mockRestore();
- });
-
- it('close button is rendered by default and includes aria-hidden=true', () => {
- render( false} />
- );
-
- const closeButton = screen.queryByRole('button', {
- hidden: true,
- });
- userEvent.click(closeButton);
- expect(screen.queryByRole('status')).toBeInTheDocument();
- });
-
- it('calls `onCloseButtonClick` when notification is closed', () => {
- const onCloseButtonClick = jest.fn();
- render(
-
- {children}
-
- );
-}
-
-NotificationActionButton.propTypes = {
- /**
- * Specify the content of the notification action button.
- */
- children: PropTypes.node,
-
- /**
- * Specify an optional className to be applied to the notification action button
- */
- className: PropTypes.string,
-
- /**
- * Specify if the visual treatment of the button should be for an inline notification
- */
- inline: PropTypes.bool,
-
- /**
- * Optionally specify a click handler for the notification action button.
- */
- onClick: PropTypes.func,
-};
-
-export function NotificationButton({
- ariaLabel,
- className,
- type,
- renderIcon: IconTag,
- name,
- notificationType,
- ...rest
-}) {
- const prefix = usePrefix();
- const buttonClassName = cx(className, {
- [`${prefix}--${notificationType}-notification__close-button`]:
- notificationType,
- });
- const iconClassName = cx({
- [`${prefix}--${notificationType}-notification__close-icon`]:
- notificationType,
- });
-
- return (
-
- {IconTag &&
- );
-}
-
-NotificationButton.propTypes = {
- /**
- * Specify a label to be read by screen readers on the notification button
- */
- ariaLabel: PropTypes.string,
-
- /**
- * Specify an optional className to be applied to the notification button
- */
- className: PropTypes.string,
-
- /**
- * Specify an optional icon for the Button through a string,
- * if something but regular "close" icon is desirable
- */
- name: PropTypes.string,
-
- /**
- * Specify the notification type
- */
- notificationType: PropTypes.oneOf(['toast', 'inline', 'actionable']),
-
- /**
- * Optional prop to allow overriding the icon rendering.
- * Can be a React component class
- */
- renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
- /**
- * Optional prop to specify the type of the Button
- */
- type: PropTypes.string,
-};
-
-NotificationButton.defaultProps = {
- ariaLabel: 'close notification',
- notificationType: 'toast',
- type: 'button',
- renderIcon: Close,
-};
-
-const iconTypes = {
- error: ErrorFilled,
- success: CheckmarkFilled,
- warning: WarningFilled,
- ['warning-alt']: WarningAltFilled,
- info: InformationFilled,
- ['info-square']: InformationSquareFilled,
-};
-
-function NotificationIcon({ iconDescription, kind, notificationType }) {
- const prefix = usePrefix();
- const IconForKind = iconTypes[kind];
- if (!IconForKind) {
- return null;
- }
- return (
-
- {iconDescription}
-
- );
-}
-
-NotificationIcon.propTypes = {
- iconDescription: PropTypes.string.isRequired,
- kind: PropTypes.oneOf([
- 'error',
- 'success',
- 'warning',
- 'warning-alt',
- 'info',
- 'info-square',
- ]).isRequired,
- notificationType: PropTypes.oneOf(['inline', 'toast']).isRequired,
-};
-
-export function ToastNotification({
- role,
- onClose,
- onCloseButtonClick,
- statusIconDescription,
- className,
- children,
- kind,
- lowContrast,
- hideCloseButton,
- timeout,
- title,
- caption,
- subtitle,
- ...rest
-}) {
- const [isOpen, setIsOpen] = useState(true);
- const prefix = usePrefix();
- const containerClassName = cx(className, {
- [`${prefix}--toast-notification`]: true,
- [`${prefix}--toast-notification--low-contrast`]: lowContrast,
- [`${prefix}--toast-notification--${kind}`]: kind,
- });
-
- const contentRef = useRef(null);
- useNoInteractiveChildren(contentRef);
-
- const handleClose = (evt) => {
- if (!onClose || onClose(evt) !== false) {
- setIsOpen(false);
- }
- };
- const ref = useRef(null);
-
- function handleCloseButtonClick(event) {
- onCloseButtonClick(event);
- handleClose(event);
- }
-
- const savedOnClose = useRef(onClose);
-
- useEffect(() => {
- savedOnClose.current = onClose;
- });
-
- useEffect(() => {
- if (!timeout) {
- return;
- }
-
- const timeoutId = window.setTimeout((event) => {
- setIsOpen(false);
- if (savedOnClose.current) {
- savedOnClose.current(event);
- }
- }, timeout);
- return () => {
- window.clearTimeout(timeoutId);
- };
- }, [timeout]);
-
- if (!isOpen) {
- return null;
- }
-
- return (
-
-
-
- {title && (
-
{title}
- )}
- {subtitle && (
-
- {subtitle}
-
- )}
- {caption && (
-
- {caption}
-
- )}
- {children}
-
- {!hideCloseButton && (
-
- )}
-
-
-
-
- {title && (
-
- {title}
-
- )}
- {subtitle && (
-
- {subtitle}
-
- )}
- {children}
-
-
- {!hideCloseButton && (
-
- )}
-
-
-
-
-
- {title && (
-
- {title}
-
- )}
- {subtitle && (
-
- {subtitle}
-
- )}
- {children}
-
-
-
-
-
- {actionButtonLabel}
-
-
- {!hideCloseButton && (
-
- )}
-
-
- ),
- ],
- argTypes: {
- kind: {
- options: [
- 'error',
- 'info',
- 'info-square',
- 'success',
- 'warning',
- 'warning-alt',
- ],
- control: {
- type: 'select',
- },
- },
- className: {
- control: {
- type: 'text',
- },
- },
- },
- args: {
- kind: 'error',
- lowContrast: false,
- hideCloseButton: false,
- ariaLabel: 'closes notification',
- statusIconDescription: 'notification',
- onClose: action('onClose'),
- onCloseButtonClick: action('onCloseButtonClick'),
- },
-};
-
-const ToastStory = (args) => )',
- 'radio-button-group'
- ),
- valueSelected: select(
- 'Value of the selected button (valueSelected in )',
- values,
- 'radio-3'
- ),
- orientation: select(
- 'Radio button orientation (orientation)',
- orientations,
- 'horizontal'
- ),
- labelPosition: select(
- 'Label position (labelPosition)',
- labelPositions,
- 'right'
- ),
- onChange: action('onChange'),
- }),
- radio: () => ({
- className: 'some-class',
- disabled: boolean('Disabled (disabled in )', false),
- labelText: text('The label of the RadioButton (labelText)', 'Option 1'),
- }),
-};
-
-export default {
- title: 'Components/RadioButton',
- component: RadioButtonGroup,
- decorators: [withKnobs],
- parameters: {
- docs: {
- page: mdx,
- },
- },
- subcomponents: {
- RadioButton,
- },
-};
-
-export const Default = () => {
- return (
-
-
- );
-};
-
-export const Playground = () => {
- const radioProps = props.radio();
- return (
-
-
- );
-};
diff --git a/packages/react/src/components/RadioButton/RadioButton-test.js b/packages/react/src/components/RadioButton/RadioButton-test.js
deleted file mode 100644
index 25dc7101a211..000000000000
--- a/packages/react/src/components/RadioButton/RadioButton-test.js
+++ /dev/null
@@ -1,160 +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 RadioButton from '../RadioButton';
-import RadioButtonSkeleton from '../RadioButton/RadioButton.Skeleton';
-import { mount, shallow } from 'enzyme';
-
-const prefix = 'cds';
-
-const render = (props) =>
- mount(
- is currently checked
- */
- checked: PropTypes.bool,
-
- /**
- * Provide an optional className to be applied to the containing node
- */
- className: PropTypes.string,
-
- /**
- * Specify whether the should be checked by default
- */
- defaultChecked: PropTypes.bool,
-
- /**
- * Specify whether the control is disabled
- */
- disabled: PropTypes.bool,
-
- /**
- * Specify whether the label should be hidden, or not
- */
- hideLabel: PropTypes.bool,
-
- /**
- * Provide a unique id for the underlying `
- */
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- };
-
- static contextType = PrefixContext;
- prefix = this.context;
-
- static defaultProps = {
- labelText: '',
- labelPosition: 'right',
- onChange: () => {},
- value: '',
- };
-
- uid = this.props.id || uid();
-
- handleChange = (evt) => {
- this.props.onChange(this.props.value, this.props.name, evt);
- };
-
- render() {
- const prefix = this.prefix;
- const {
- className,
- labelText,
- labelPosition,
- // eslint-disable-next-line react/prop-types
- innerRef: ref,
- hideLabel,
- ...other
- } = this.props;
- if (__DEV__) {
- warning(
- labelPosition !== 'top' && labelPosition !== 'bottom',
- '`top`/`bottom` values for `labelPosition` property in the `RadioButton` component is deprecated ' +
- 'and being removed in the next release of `carbon-components-react`.'
- );
- }
- const innerLabelClasses = classNames({
- [`${prefix}--visually-hidden`]: hideLabel,
- });
- const wrapperClasses = classNames(
- className,
- `${prefix}--radio-button-wrapper`,
- {
- [`${prefix}--radio-button-wrapper--label-${labelPosition}`]:
- labelPosition !== 'right',
- }
- );
- return (
-
-
- {labelText} }
-
-
- );
+import { usePrefix } from '../../internal/usePrefix';
+import { useId } from '../../internal/useId';
+
+const RadioButton = React.forwardRef(function RadioButton(
+ {
+ className,
+ disabled,
+ hideLabel,
+ id,
+ labelPosition = 'right',
+ labelText = '',
+ name,
+ onChange = () => {},
+ value = '',
+ ...rest
+ },
+ ref
+) {
+ const prefix = usePrefix();
+ const uid = useId('radio-button');
+ const uniqueId = id || uid;
+
+ function handleOnChange(event) {
+ onChange(value, name, event);
}
-}
-
-export { RadioButton };
-export default (() => {
- const forwardRef = (props, ref) =>
+
+ {labelText} }
+
+
+ );
+});
+
+RadioButton.displayName = 'RadioButton';
+
+RadioButton.propTypes = {
+ /**
+ * Specify whether the `` is currently checked
+ */
+ checked: PropTypes.bool,
+
+ /**
+ * Provide an optional className to be applied to the containing node
+ */
+ className: PropTypes.string,
+
+ /**
+ * Specify whether the `` should be checked by default
+ */
+ defaultChecked: PropTypes.bool,
+
+ /**
+ * Specify whether the control is disabled
+ */
+ disabled: PropTypes.bool,
+
+ /**
+ * Specify whether the label should be hidden, or not
+ */
+ hideLabel: PropTypes.bool,
+
+ /**
+ * Provide a unique id for the underlying ``
+ */
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default RadioButton;
diff --git a/packages/react/src/components/RadioButton/next/RadioButton.stories.js b/packages/react/src/components/RadioButton/RadioButton.stories.js
similarity index 52%
rename from packages/react/src/components/RadioButton/next/RadioButton.stories.js
rename to packages/react/src/components/RadioButton/RadioButton.stories.js
index 2882e29db5e8..0e5b71a09c16 100644
--- a/packages/react/src/components/RadioButton/next/RadioButton.stories.js
+++ b/packages/react/src/components/RadioButton/RadioButton.stories.js
@@ -5,15 +5,23 @@
* LICENSE file in the root directory of this source tree.
*/
-import RadioButton from '../';
-import RadioButtonGroup from '../../RadioButtonGroup';
+import RadioButton from './RadioButton';
+import RadioButtonGroup from '../RadioButtonGroup';
+import RadioButtonSkeleton from './RadioButton.Skeleton';
import React from 'react';
+import mdx from './RadioButton.mdx';
export default {
title: 'Components/RadioButton',
component: RadioButton,
subcomponents: {
RadioButtonGroup,
+ RadioButtonSkeleton,
+ },
+ parameters: {
+ docs: {
+ page: mdx,
+ },
},
};
@@ -29,3 +37,17 @@ export const Default = () => {
);
};
+
+export const Skeleton = () => {
+ return
+
+ );
+};
diff --git a/packages/react/src/components/RadioButton/__tests__/RadioButton-test.js b/packages/react/src/components/RadioButton/__tests__/RadioButton-test.js
new file mode 100644
index 000000000000..2c399fa22689
--- /dev/null
+++ b/packages/react/src/components/RadioButton/__tests__/RadioButton-test.js
@@ -0,0 +1,135 @@
+/**
+ * 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 { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import RadioButton from '../RadioButton';
+
+describe('RadioButton', () => {
+ it('should render an input with type="radio"', () => {
+ render(
+
-
- {labelText} }
-
-
- );
-});
-
-RadioButton.propTypes = {
- /**
- * Specify whether the `` is currently checked
- */
- checked: PropTypes.bool,
-
- /**
- * Provide an optional className to be applied to the containing node
- */
- className: PropTypes.string,
-
- /**
- * Specify whether the `` should be checked by default
- */
- defaultChecked: PropTypes.bool,
-
- /**
- * Specify whether the control is disabled
- */
- disabled: PropTypes.bool,
-
- /**
- * Specify whether the label should be hidden, or not
- */
- hideLabel: PropTypes.bool,
-
- /**
- * Provide a unique id for the underlying ``
- */
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-};
-
-export default RadioButton;
diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js
index 44a3720afd81..6616b7cad74e 100644
--- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js
+++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js
@@ -6,9 +6,9 @@
*/
import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import React from 'react';
-import { shallow, mount } from 'enzyme';
-import RadioButtonGroup from '../RadioButtonGroup';
+import RadioButtonGroup from './RadioButtonGroup';
import RadioButton from '../RadioButton';
describe('RadioButtonGroup', () => {
@@ -60,8 +60,8 @@ describe('RadioButtonGroup', () => {
});
describe('Component API', () => {
- it('should support a custom className on the ', () => {
- render(
+ it('should support a custom className on the outermost element', () => {
+ const { container } = render(
{
);
- const fieldset = screen
- .getByText('test', {
- selector: 'legend',
- })
- .closest('fieldset');
- expect(fieldset).toHaveClass('custom-class');
+ expect(container.firstChild).toHaveClass('custom-class');
});
it('should support passing in disabled to disable the ', () => {
@@ -160,66 +155,47 @@ describe('RadioButtonGroup', () => {
);
});
- describe('onChange event', () => {
+ it('should call `onChange` when the value of the group changes', () => {
const onChange = jest.fn();
- const wrapper = mount(
-
-
+
);
- const firstRadio = wrapper.find(RadioButton).first();
- const args = ['male', 'gender', { test: 'test event' }];
-
- it('first child should not have checked set initially', () => {
- expect(firstRadio.props().checked).toEqual(false);
- });
-
- it('invoking onChange sets checked on correct child', () => {
- firstRadio.props().onChange(...args);
- wrapper.update();
- expect(wrapper.find(RadioButton).first().props().checked).toEqual(true);
- });
-
- it('should invoke onChange with correct arguments', () => {
- expect(onChange).toHaveBeenCalledWith(...args);
- });
-
- it('calling onChange with same args should not call onChange prop', () => {
- onChange.mockClear();
- firstRadio.props().onChange(...args);
- expect(onChange).not.toHaveBeenCalled();
- });
+ userEvent.click(screen.getByLabelText('Option one'));
+ expect(onChange).toHaveBeenCalled();
+ expect(onChange).toHaveBeenCalledWith(
+ 'option-one',
+ 'options',
+ expect.objectContaining({
+ target: screen.getByLabelText('Option one'),
+ })
+ );
});
describe('Getting derived state from props', () => {
- const wrapper = shallow(
-
-
- );
-
- it('should initialize the current selection from props', () => {
- expect(wrapper.state().selected).toEqual('male');
- });
-
it('should change the current selection upon change in props', () => {
- wrapper.setProps({ valueSelected: 'male' });
- wrapper.setState({ selected: 'male' });
- wrapper.setProps({ valueSelected: undefined });
- expect(wrapper.state().selected).toEqual('female');
- });
-
- it('should avoid change the current selection upon setting props, unless there the value actually changes', () => {
- wrapper.setProps({ valueSelected: 'female' });
- wrapper.setState({ selected: 'male' });
- wrapper.setProps({ valueSelected: 'female' });
- expect(wrapper.state().selected).toEqual('male');
+ const { rerender } = render(
+
+
+ );
+
+ expect(screen.getByLabelText('Option one')).toBeChecked();
+
+ rerender(
+
+
+ );
+
+ expect(screen.getByLabelText('Option one')).not.toBeChecked();
+ expect(screen.getByLabelText('Option two')).toBeChecked();
});
});
});
diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js
index aefed476a52e..b2340a8a284b 100644
--- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js
+++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js
@@ -6,185 +6,134 @@
*/
import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState } from 'react';
import classNames from 'classnames';
-import { warning } from '../../internal/warning';
import { Legend } from '../Text';
-import { FeatureFlagContext } from '../FeatureFlags';
-import { PrefixContext } from '../../internal/usePrefix';
-
-export default class RadioButtonGroup extends React.Component {
- static propTypes = {
- /**
- * Provide a collection of components to render in the group
- */
- children: PropTypes.node,
-
- /**
- * Provide an optional className to be applied to the container node
- */
- className: PropTypes.string,
-
- /**
- * Specify the to be selected by default
- */
- defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
- /**
- * Specify whether the group is disabled
- */
- disabled: PropTypes.bool,
-
- /**
- * Specify whether the legend should be hidden, or not
- */
- hideLegend: PropTypes.bool,
-
- /**
- * Provide where label text should be placed
- */
- labelPosition: PropTypes.oneOf(['left', 'right']),
-
- /**
- * Provide a legend to the RadioButtonGroup input that you are
- * exposing to the user
- */
- legendText: PropTypes.node,
-
- /**
- * Specify the name of the underlying `
- {(prefix) => {
- const wrapperClasses = classNames(
- `${prefix}--radio-button-group`,
- [enabled ? null : className],
- {
- [`${prefix}--radio-button-group--${orientation}`]:
- orientation === 'vertical',
- [`${prefix}--radio-button-group--label-${labelPosition}`]:
- labelPosition,
- }
- );
-
- const legendClasses = classNames(`${prefix}--label`, {
- [`${prefix}--visually-hidden`]: hideLegend,
- });
-
- return (
-
-
- {legendText && (
- {legendText}
- )}
- {this.getRadioButtons()}
-
-
- );
- }}
-
- );
}
-}
+
+ const fieldsetClasses = classNames(`${prefix}--radio-button-group`, {
+ [`${prefix}--radio-button-group--${orientation}`]:
+ orientation === 'vertical',
+ [`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
+ });
+
+ const wrapperClasses = classNames(`${prefix}--form-item`, className);
+
+ return (
+
+
+ {legendText && (
+ {legendText}
+ )}
+ {getRadioButtons()}
+
+
+ );
+});
+
+RadioButtonGroup.propTypes = {
+ /**
+ * Provide a collection of `` components to render in the group
+ */
+ children: PropTypes.node,
+
+ /**
+ * Provide an optional className to be applied to the container node
+ */
+ className: PropTypes.string,
+
+ /**
+ * Specify the `` to be selected by default
+ */
+ defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+ /**
+ * Specify whether the group is disabled
+ */
+ disabled: PropTypes.bool,
+
+ /**
+ * Provide where label text should be placed
+ */
+ labelPosition: PropTypes.oneOf(['left', 'right']),
+
+ /**
+ * Provide a legend to the RadioButtonGroup input that you are
+ * exposing to the user
+ */
+ legendText: PropTypes.node,
+
+ /**
+ * Specify the name of the underlying `', () => {
- render(
-
-
- );
-
- const legend = screen.getByText('test', {
- selector: 'legend',
- });
- expect(legend).toBeDefined();
- });
-
- it('should render `legendText` in a ', () => {
- render(
-
-
- );
-
- const fieldset = screen
- .getByText('test', {
- selector: 'legend',
- })
- .closest('fieldset');
- expect(fieldset).toBeDefined();
- });
-
- it('should render as children', () => {
- render(
-
-
- );
-
- const fieldset = screen
- .getByText('test', {
- selector: 'legend',
- })
- .closest('fieldset');
- expect(fieldset).toContainElement(screen.getByLabelText('test-1'));
- expect(fieldset).toContainElement(screen.getByLabelText('test-2'));
- });
-
- describe('Component API', () => {
- it('should support a custom className on the ', () => {
- render(
-
-
- );
-
- const fieldset = screen
- .getByText('test', {
- selector: 'legend',
- })
- .closest('fieldset');
- expect(fieldset).toHaveClass('custom-class');
- });
-
- it('should support passing in disabled to disable the ', () => {
- render(
-
-
- );
- const fieldset = screen
- .getByText('test', {
- selector: 'legend',
- })
- .closest('fieldset');
- expect(fieldset).toBeDisabled();
- });
-
- it('should support `defaultSelected` as a way to select a radio button', () => {
- render(
-
-
- );
-
- expect(screen.getByLabelText('test-1')).toEqual(
- screen.getByRole('radio', {
- checked: true,
- })
- );
- });
-
- it('should support `valueSelected` as a way to select a radio button', () => {
- const { rerender } = render(
-
-
- );
-
- expect(screen.getByLabelText('test-1')).toEqual(
- screen.getByRole('radio', {
- checked: true,
- })
- );
-
- rerender(
-
-
- );
-
- expect(screen.getByLabelText('test-2')).toEqual(
- screen.getByRole('radio', {
- checked: true,
- })
- );
- });
-
- it('should support a 0 value for `valueSelected` (#9041)', () => {
- render(
-
-
- );
-
- expect(screen.getByLabelText('test-0')).toEqual(
- screen.getByRole('radio', {
- checked: true,
- })
- );
- });
-
- describe('onChange event', () => {
- const onChange = jest.fn();
- const wrapper = mount(
-
-
- );
-
- const firstRadio = wrapper.find(RadioButton).first();
- const args = ['male', 'gender', { test: 'test event' }];
-
- it('first child should not have checked set initially', () => {
- expect(firstRadio.props().checked).toEqual(false);
- });
-
- it('invoking onChange sets checked on correct child', () => {
- firstRadio.props().onChange(...args);
- wrapper.update();
- expect(wrapper.find(RadioButton).first().props().checked).toEqual(true);
- });
-
- it('should invoke onChange with correct arguments', () => {
- expect(onChange).toHaveBeenCalledWith(...args);
- });
-
- it('calling onChange with same args should not call onChange prop', () => {
- onChange.mockClear();
- firstRadio.props().onChange(...args);
- expect(onChange).not.toHaveBeenCalled();
- });
- });
-
- describe('Getting derived state from props', () => {
- const wrapper = shallow(
-
-
- );
-
- it('should initialize the current selection from props', () => {
- expect(wrapper.state().selected).toEqual('male');
- });
-
- it('should change the current selection upon change in props', () => {
- wrapper.setProps({ valueSelected: 'male' });
- wrapper.setState({ selected: 'male' });
- wrapper.setProps({ valueSelected: undefined });
- expect(wrapper.state().selected).toEqual('female');
- });
-
- it('should avoid change the current selection upon setting props, unless there the value actually changes', () => {
- wrapper.setProps({ valueSelected: 'female' });
- wrapper.setState({ selected: 'male' });
- wrapper.setProps({ valueSelected: 'female' });
- expect(wrapper.state().selected).toEqual('male');
- });
- });
- });
-});
diff --git a/packages/react/src/components/RadioButtonGroup/next/RadioButtonGroup.js b/packages/react/src/components/RadioButtonGroup/next/RadioButtonGroup.js
deleted file mode 100644
index 35d1bdd9a7c1..000000000000
--- a/packages/react/src/components/RadioButtonGroup/next/RadioButtonGroup.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { useState } from 'react';
-import classNames from 'classnames';
-import { Legend } from '../../Text';
-import { usePrefix } from '../../../internal/usePrefix';
-
-const RadioButtonGroup = React.forwardRef(function RadioButtonGroup(
- {
- children,
- className,
- defaultSelected,
- disabled,
- labelPosition = 'right',
- legendText,
- name,
- onChange = () => {},
- orientation = 'horizontal',
- valueSelected,
- },
- ref
-) {
- const prefix = usePrefix();
-
- const [selected, setSelected] = useState(valueSelected ?? defaultSelected);
- const [prevValueSelected, setPrevValueSelected] = useState(valueSelected);
-
- /**
- * prop + state alignment - getDerivedStateFromProps
- * only update if selected prop changes
- */
- if (valueSelected !== prevValueSelected) {
- setSelected(valueSelected);
- setPrevValueSelected(valueSelected);
- }
-
- function getRadioButtons() {
- const mappedChildren = React.Children.map(children, (radioButton) => {
- const { value } = radioButton.props;
- return React.cloneElement(radioButton, {
- name: name,
- key: value,
- value: value,
- onChange: handleOnChange,
- checked: value === selected,
- });
- });
-
- return mappedChildren;
- }
-
- function handleOnChange(newSelection, value, evt) {
- if (newSelection !== selected) {
- setSelected(newSelection);
- onChange(newSelection, name, evt);
- }
- }
-
- const fieldsetClasses = classNames(`${prefix}--radio-button-group`, {
- [`${prefix}--radio-button-group--${orientation}`]:
- orientation === 'vertical',
- [`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
- });
-
- const wrapperClasses = classNames(`${prefix}--form-item`, className);
-
- return (
-
-
- {legendText && (
- {legendText}
- )}
- {getRadioButtons()}
-
-
- );
-});
-
-RadioButtonGroup.propTypes = {
- /**
- * Provide a collection of `` components to render in the group
- */
- children: PropTypes.node,
-
- /**
- * Provide an optional className to be applied to the container node
- */
- className: PropTypes.string,
-
- /**
- * Specify the `` to be selected by default
- */
- defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
- /**
- * Specify whether the group is disabled
- */
- disabled: PropTypes.bool,
-
- /**
- * Provide where label text should be placed
- */
- labelPosition: PropTypes.oneOf(['left', 'right']),
-
- /**
- * Provide a legend to the RadioButtonGroup input that you are
- * exposing to the user
- */
- legendText: PropTypes.node,
-
- /**
- * Specify the name of the underlying `