Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(props): update table expand header props #9659

Merged
merged 11 commits into from
Oct 6, 2021
66 changes: 58 additions & 8 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -1212,21 +1212,46 @@ Map {
},
"TableExpandHeader": Object {
"propTypes": Object {
"ariaLabel": [Function],
"ariaLabel": Object {
"args": Array [
Array [
[Function],
[Function],
],
],
"type": "oneOfType",
},
"children": Object {
"type": "node",
},
"className": Object {
"type": "string",
},
"enableExpando": Object {
"enableExpando": [Function],
"enableToggle": Object {
"type": "bool",
},
"expandIconDescription": Object {
"type": "string",
},
"isExpanded": [Function],
"onExpand": [Function],
"isExpanded": Object {
"args": Array [
Array [
[Function],
[Function],
],
],
"type": "oneOfType",
},
"onExpand": Object {
"args": Array [
Array [
[Function],
[Function],
],
],
"type": "oneOfType",
},
},
},
"TableExpandRow": Object {
Expand Down Expand Up @@ -1852,21 +1877,46 @@ Map {
},
"TableExpandHeader" => Object {
"propTypes": Object {
"ariaLabel": [Function],
"ariaLabel": Object {
"args": Array [
Array [
[Function],
[Function],
],
],
"type": "oneOfType",
},
"children": Object {
"type": "node",
},
"className": Object {
"type": "string",
},
"enableExpando": Object {
"enableExpando": [Function],
"enableToggle": Object {
"type": "bool",
},
"expandIconDescription": Object {
"type": "string",
},
"isExpanded": [Function],
"onExpand": [Function],
"isExpanded": Object {
"args": Array [
Array [
[Function],
[Function],
],
],
"type": "oneOfType",
},
"onExpand": Object {
"args": Array [
Array [
[Function],
[Function],
],
],
"type": "oneOfType",
},
},
},
"TableExpandRow" => Object {
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Accordion/AccordionItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import React, { useState } from 'react';
import { Text } from '../Text';
import { match, keys } from '../../internal/keyboard';
import { useId } from '../../internal/useId';
import deprecate from '../../prop-types/deprecate.js';
import deprecate from '../../prop-types/deprecate';

const { prefix } = settings;
const defaultRenderExpando = (props) => <button type="button" {...props} />;
Expand Down
33 changes: 27 additions & 6 deletions packages/react/src/components/DataTable/TableExpandHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import cx from 'classnames';
import PropTypes from 'prop-types';
import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy';
import deprecate from '../../prop-types/deprecate';
import React from 'react';
import { ChevronRight16 } from '@carbon/icons-react';
import { settings } from 'carbon-components';
Expand All @@ -18,6 +19,7 @@ const TableExpandHeader = ({
ariaLabel,
className: headerClassName,
enableExpando,
enableToggle,
isExpanded,
onExpand,
expandIconDescription,
Expand All @@ -33,7 +35,7 @@ const TableExpandHeader = ({
className={className}
data-previous-value={previousValue}
{...rest}>
{!enableExpando ? null : (
{enableExpando || enableToggle ? (
<button
type="button"
className={`${prefix}--table-expand__button`}
Expand All @@ -45,7 +47,7 @@ const TableExpandHeader = ({
aria-label={expandIconDescription}
/>
</button>
)}
) : null}
{children}
</th>
);
Expand All @@ -56,15 +58,28 @@ TableExpandHeader.propTypes = {
* Specify the string read by a voice reader when the expand trigger is
* focused
*/
ariaLabel: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.string),
ariaLabel: PropTypes.oneOfType([
requiredIfGivenPropIsTruthy('enableExpando', PropTypes.string),
requiredIfGivenPropIsTruthy('enableToggle', PropTypes.string),
]),

children: PropTypes.node,

className: PropTypes.string,

/**
* Specify whether an expand all button should be displayed
*/
enableExpando: PropTypes.bool,
// enableExpando:PropTypes.bool,
enableExpando: deprecate(
PropTypes.bool,
'The `renableExpando` prop has been deprecated in favor of `enableToggle`. This prop will be removed in the next major release.'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
'The `renableExpando` prop has been deprecated in favor of `enableToggle`. This prop will be removed in the next major release.'
'The `enableExpando` prop has been deprecated in favor of `enableToggle`. This prop will be removed in the next major release.'

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good catch thanks

),

/**
* Specify whether an expand all button should be displayed
*/
enableToggle: PropTypes.bool,

/**
* The description of the chevron right icon, to be put in its SVG `<title>` element.
Expand All @@ -75,12 +90,18 @@ TableExpandHeader.propTypes = {
* Specify whether this row is expanded or not. This helps coordinate data
* attributes so that `TableExpandRow` and `TableExpandedRow` work together
*/
isExpanded: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.bool),
isExpanded: PropTypes.oneOfType([
requiredIfGivenPropIsTruthy('enableExpando', PropTypes.bool),
requiredIfGivenPropIsTruthy('enableToggle', PropTypes.bool),
]),

/**
* Hook for when a listener initiates a request to expand the given row
*/
onExpand: requiredIfGivenPropIsTruthy('enableExpando', PropTypes.func),
onExpand: PropTypes.oneOfType([
requiredIfGivenPropIsTruthy('enableExpando', PropTypes.func),
requiredIfGivenPropIsTruthy('enableToggle', PropTypes.func),
]),
};

export default TableExpandHeader;