Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: prop name change
Browse files Browse the repository at this point in the history
davidmenendez committed Feb 16, 2024
1 parent 46bbee7 commit 0ad8a00
Showing 4 changed files with 18 additions and 15 deletions.
Original file line number Diff line number Diff line change
@@ -499,7 +499,7 @@ export const BatchActions = () => {
return (
<Datagrid
datagridState={{ ...datagridState }}
toolbarLabel="batch actions toolbar"
ariaToolbarLabel="batch actions toolbar"
/>
);
};
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@ const componentName = 'Datagrid';
* The `Datagrid` component is an extension of Carbon's DataTable component. At the most basic level, the `Datagrid` component takes in columns and rows and renders a data table. There is a set of data table extensions which this component provides support for, these can be found [here](https://pages.github.ibm.com/cdai-design/pal/components/data-table/overview/). This component is data driven and allows you to choose what pieces will be included based on the hooks/plugins that are provided.
*/
export let Datagrid = React.forwardRef(
({ datagridState, title, toolbarLabel, ...rest }, ref) => {
({ datagridState, title, ariaToolbarLabel, ...rest }, ref) => {
if (!datagridState) {
pconsole.warn(
'Datagrid was not passed datagridState which is required to render this component.'
@@ -47,7 +47,7 @@ export let Datagrid = React.forwardRef(
const props = {
title,
datagridState,
toolbarLabel,
ariaToolbarLabel,
};

return (
@@ -93,6 +93,11 @@ Datagrid = pkg.checkComponentEnabled(Datagrid, componentName);
Datagrid.displayName = componentName;

Datagrid.propTypes = {
/**
* Specify a label to be read by screen readers on the container node
* 'aria-label' of the TableToolbar component.
*/
ariaToolbarLabel: PropTypes.string,
/**
* The data grid state, much of it being supplied by the useDatagrid hook
*/
@@ -101,9 +106,4 @@ Datagrid.propTypes = {
* Table title
*/
title: PropTypes.string,
/**
* Specify a label to be read by screen readers on the container node
* 'aria-label' of the TableToolbar component.
*/
toolbarLabel: PropTypes.string,
};
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ import { clearSingleFilter } from './addons/Filtering/FilterProvider';
const blockClass = `${pkg.prefix}--datagrid`;
const gcClass = `${blockClass}__grid-container`;

export const DatagridContent = ({ datagridState, title, toolbarLabel }) => {
export const DatagridContent = ({ datagridState, title, ariaToolbarLabel }) => {
const { state: inlineEditState, dispatch } = useContext(InlineEditContext);
const { filterTags, EventEmitter, panelOpen } = useContext(FilterContext);
const { activeCellId, gridActive, editId } = inlineEditState;
@@ -191,7 +191,10 @@ export const DatagridContent = ({ datagridState, title, toolbarLabel }) => {
title={gridTitle}
description={gridDescription}
>
<DatagridToolbar {...datagridState} toolbarLabel={toolbarLabel} />
<DatagridToolbar
{...datagridState}
ariaToolbarLabel={ariaToolbarLabel}
/>
<div
className={cx(`${blockClass}__table-container`, {
[`${blockClass}__table-container--filter-open`]: panelOpen,
@@ -233,6 +236,7 @@ export const DatagridContent = ({ datagridState, title, toolbarLabel }) => {
};

DatagridContent.propTypes = {
ariaToolbarLabel: PropTypes.string,
datagridState: PropTypes.shape({
getTableProps: PropTypes.func,
getFilterFlyoutProps: PropTypes.func,
@@ -265,5 +269,4 @@ DatagridContent.propTypes = {
state: PropTypes.object,
}),
title: PropTypes.string,
toolbarLabel: PropTypes.string,
};
Original file line number Diff line number Diff line change
@@ -181,7 +181,7 @@ const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
);
};

const DatagridToolbar = ({ toolbarLabel, ...datagridState }) => {
const DatagridToolbar = ({ ariaToolbarLabel, ...datagridState }) => {
const ref = useRef(null);
const { width } = useResizeObserver(ref);
const { DatagridActions, DatagridBatchActions, batchActions, rowSize } =
@@ -194,15 +194,15 @@ const DatagridToolbar = ({ toolbarLabel, ...datagridState }) => {
ref={ref}
className={cx([blockClass, `${blockClass}--${getRowHeight}`])}
>
<TableToolbar aria-label={toolbarLabel}>
<TableToolbar aria-label={ariaToolbarLabel}>
{DatagridActions && <DatagridActions {...datagridState} />}
{DatagridBatchActionsToolbar &&
DatagridBatchActionsToolbar(datagridState, width, ref)}
</TableToolbar>
</div>
) : DatagridActions ? (
<div className={blockClass}>
<TableToolbar aria-label={toolbarLabel}>
<TableToolbar aria-label={ariaToolbarLabel}>
{DatagridActions && <DatagridActions {...datagridState} />}
{DatagridBatchActions && DatagridBatchActions(datagridState)}
</TableToolbar>
@@ -211,7 +211,7 @@ const DatagridToolbar = ({ toolbarLabel, ...datagridState }) => {
};

DatagridToolbar.propTypes = {
toolbarLabel: PropTypes.string,
ariaToolbarLabel: PropTypes.string,
};

export default DatagridToolbar;

0 comments on commit 0ad8a00

Please sign in to comment.