diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx index db4cd38906a..23baf293dfb 100644 --- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx +++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx @@ -22,7 +22,7 @@ export interface NotificationDrawerGroupProps extends Omit void; /** Notification drawer group title */ - title: string | React.ReactNode; + title: React.ReactNode; /** Truncate title to number of lines */ truncateTitle?: number; /** Position of the tooltip which is displayed if text is truncated */ diff --git a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItemGroup.tsx b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItemGroup.tsx index df72c833894..bd460dec6bd 100644 --- a/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItemGroup.tsx +++ b/packages/react-core/src/deprecated/components/OptionsMenu/OptionsMenuItemGroup.tsx @@ -11,7 +11,7 @@ export interface OptionsMenuItemGroupProps extends React.HTMLProps /** Provides an accessible name for the options menu items group */ 'aria-label'?: string; /** Optional title for the options menu items group */ - groupTitle?: string | React.ReactNode; + groupTitle?: React.ReactNode; /** Flag indicating this options menu items group will be followed by a horizontal separator */ hasSeparator?: boolean; } diff --git a/packages/react-core/src/deprecated/components/Select/Select.tsx b/packages/react-core/src/deprecated/components/Select/Select.tsx index 4dbc6a6d469..3733d211d25 100644 --- a/packages/react-core/src/deprecated/components/Select/Select.tsx +++ b/packages/react-core/src/deprecated/components/Select/Select.tsx @@ -86,7 +86,7 @@ export interface SelectProps /** Text displayed in typeahead select to prompt the user to create an item */ createText?: string; /** Title text of Select */ - placeholderText?: string | React.ReactNode; + placeholderText?: React.ReactNode; /** Text to display in typeahead select when no results are found */ noResultsFoundText?: string; /** Array of selected items for multi select variants. */ diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx index 9fb53517a36..55876138b74 100644 --- a/packages/react-table/src/components/Table/TableTypes.tsx +++ b/packages/react-table/src/components/Table/TableTypes.tsx @@ -138,7 +138,7 @@ export interface IExtra extends IExtraData { } export type IFormatterValueType = formatterValueType & { - title?: string | React.ReactNode; + title?: React.ReactNode; props?: any; }; @@ -157,7 +157,7 @@ export interface IAction extends Omit, P /** Key of actions menu item */ itemKey?: string; /** Content to display in the actions menu item */ - title?: string | React.ReactNode; + title?: React.ReactNode; /** Render item as aria-disabled option */ isAriaDisabled?: boolean; /** Props for adding a tooltip to a menu item. This is used to display tooltip when hovered over the item */ @@ -191,7 +191,7 @@ export interface decoratorReturnType { textCenter?: boolean; component?: string; isVisible?: boolean; - title?: string | React.ReactNode; + title?: React.ReactNode; props?: any; scope?: string; parentId?: number; @@ -205,7 +205,7 @@ export type IFormatter = (data?: IFormatterValueType, extra?: IExtra) => formatt export interface ICell { /* cell contents */ - title?: string | React.ReactNode; + title?: React.ReactNode; /** transformations applied to the header cell */ transforms?: ITransform[]; /** transformations applied to the cells within the column's body */ @@ -229,7 +229,7 @@ export interface ICell { export type RowCellContent = (value?: string, rowIndex?: number, cellIndex?: number, props?: T) => void; export interface IRowCell { - title?: string | React.ReactNode | RowCellContent; + title?: React.ReactNode | RowCellContent; props?: T; formatters?: IFormatter[]; } diff --git a/packages/react-table/src/deprecated/components/Table/examples/Table.md b/packages/react-table/src/deprecated/components/Table/examples/Table.md index 82f6585a033..a01ea67c079 100644 --- a/packages/react-table/src/deprecated/components/Table/examples/Table.md +++ b/packages/react-table/src/deprecated/components/Table/examples/Table.md @@ -22,14 +22,13 @@ import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon'; import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon'; import { SelectOption as SelectOptionDeprecated } from '@patternfly/react-core/deprecated'; -import { - Select as NewSelect, - SelectGroup as NewSelectGroup, - SelectList as NewSelectList, - SelectOption as NewSelectOption, +import { +Select as NewSelect, +SelectGroup as NewSelectGroup, +SelectList as NewSelectList, +SelectOption as NewSelectOption, } from '@patternfly/react-core/dist/esm/components/Select'; - import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Table/table'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; @@ -48,7 +47,7 @@ cells: (ICell | string)[]; ``` interface ICell { /* cell contents */ - title?: string | React.ReactNode; + title?: React.ReactNode; /** transformations applied to the header cell */ transforms?: ITransform[]; /** transformations applied to the cells within the column's body */ @@ -111,7 +110,7 @@ interface IRow extends RowType { noPadding?: boolean; } interface IRowCell { - title?: string | React.ReactNode | RowCellContent; + title?: React.ReactNode | RowCellContent; props?: any; formatters?: IFormatter[]; } @@ -122,6 +121,7 @@ interface IRowCell { ### Basic ```ts file="LegacyTableBasic.tsx" + ``` ### Custom row wrapper @@ -152,6 +152,7 @@ interface RowWrapperProps { ``` ```ts file="LegacyTableMisc.tsx" + ``` ### Sortable & wrapping column headers @@ -169,6 +170,7 @@ Note: If you want to add a tooltip/popover to a sortable header, in the `transfo The built in display for sorting is not fully responsive, as the column headers will be displayed per row when the screen size is small. The example below showcases how sorting may have a custom control display that can be used for small screen sizes. ```ts file="LegacyTableSortable.tsx" + ``` ### Sortable - custom control @@ -176,6 +178,7 @@ The built in display for sorting is not fully responsive, as the column headers Sorting a table may also be controlled with a toolbar. This toolbar item may also be hidden at large screen sizes and only displayed when the screen size is small to support responsive tables. ```ts file="LegacyTableSortableCustom.tsx" + ``` ### Selectable with checkbox @@ -196,6 +199,7 @@ of using `td` elements, the cells in that column use `th` elements. checking checkboxes will check intermediate rows' checkboxes. ```ts file="LegacyTableSelectable.tsx" + ``` ### Selectable radio input @@ -206,6 +210,7 @@ To enable row radio selection, set the `onSelect` callback prop on the Table, an To disable selection for a row, set `disableSelection: true` on the row definition. ```ts file="LegacyTableSelectableRadio.tsx" + ``` ### Clickable rows, selectable rows, and header cell tooltips/popovers @@ -213,6 +218,7 @@ To disable selection for a row, set `disableSelection: true` on the row definiti This selectable rows feature is intended for use when a table is used to present a list of objects in a Primary-detail view. ```ts file="LegacyTableClickable.tsx" + ``` ### Actions and first cell in body rows as th @@ -222,6 +228,7 @@ To use actions you can either specify an array of actions and pass that into the If actions menus are getting clipped by other items on the page, such as sticky columns or rows, the `Table` can be passed a `actionsMenuAppendTo` prop to adjust where the actions menu is appended. ```ts file="LegacyTableActions.tsx" + ``` ### Expandable @@ -232,6 +239,7 @@ The parent row can have an `isOpen` field for managing the expanded state of the Also, pass an `onCollapse` event handler via the prop on the Table ```ts file="LegacyTableExpandable.tsx" + ``` ### Compound expandable @@ -248,26 +256,31 @@ To build a compound expandable table: 4. An `onExpand` event handler prop should be passed to the Table. ```ts file="LegacyTableCompoundExpandable.tsx" + ``` ### With width and breakpoint visibility modifiers ```ts file="LegacyTableCellWidth.tsx" + ``` ### Controlling text ```ts file="LegacyTableControllingText.tsx" + ``` ### Modifiers with table text ```ts file="LegacyTableTextModifiers.tsx" + ``` ### Empty state ```ts file="LegacyTableEmptyState.tsx" + ``` ### Editable rows @@ -330,13 +343,13 @@ class EditableRowsTable extends React.Component { ], rows: [ { - rowEditBtnAriaLabel: idx => `Edit row ${idx}`, - rowSaveBtnAriaLabel: idx => `Save edits for row ${idx}`, - rowCancelBtnAriaLabel: idx => `Cancel edits for row ${idx}`, + rowEditBtnAriaLabel: (idx) => `Edit row ${idx}`, + rowSaveBtnAriaLabel: (idx) => `Save edits for row ${idx}`, + rowCancelBtnAriaLabel: (idx) => `Cancel edits for row ${idx}`, rowEditValidationRules: [ { name: 'required', - validator: value => value.trim() !== '', + validator: (value) => value.trim() !== '', errorText: 'This field is required' } ], @@ -537,22 +550,22 @@ class EditableRowsTable extends React.Component { rowEditValidationRules: [ { name: 'required', - validator: value => value.trim() !== '', + validator: (value) => value.trim() !== '', errorText: 'This field is required' }, { name: 'notFoo', - validator: value => value.trim().toLowerCase() !== 'foo', + validator: (value) => value.trim().toLowerCase() !== 'foo', errorText: 'Value cannot be "foo"' }, { name: 'minLength', - validator: value => value.trim().length >= 7, + validator: (value) => value.trim().length >= 7, errorText: 'Value must be at least 7 characters' }, { name: 'notXyz', - validator: value => value.trim().toLowerCase() !== 'xyz', + validator: (value) => value.trim().toLowerCase() !== 'xyz', errorText: 'Value cannot be xyz' } ], @@ -703,7 +716,7 @@ class EditableRowsTable extends React.Component { if (!newSelected.includes(newValue)) { newSelected.push(newValue); } else { - newSelected = newSelected.filter(el => el !== newValue); + newSelected = newSelected.filter((el) => el !== newValue); } newSelectOpen = true; break; @@ -734,7 +747,7 @@ class EditableRowsTable extends React.Component { }; this.onToggle = (isOpen, rowIndex, cellIndex) => { - console.log("isOpen", isOpen); + console.log('isOpen', isOpen); let newRows = Array.from(this.state.rows); newRows[rowIndex].cells[cellIndex].props.isSelectOpen = isOpen; this.setState({ @@ -774,6 +787,7 @@ When you also pass a sort callback through the `onSort` prop, favorites sorting If you want to exclude favorites from sorting, set `canSortFavorites={false}` on the Table. ```ts file="LegacyTableFavoritable.tsx" + ``` ### Tree table @@ -803,6 +817,7 @@ aria-posinset, and aria-setsize as violations. This is an intentional choice at the voice over technologies will recognize the flat table structure as a tree. ```ts file="LegacyTableTree.tsx" + ``` ### Striped @@ -810,6 +825,7 @@ the voice over technologies will recognize the flat table structure as a tree. To apply striping to a basic table, add the `isStriped` property to `Table`. ```ts file="LegacyTableStriped.tsx" + ``` ### Striped expandable @@ -817,6 +833,7 @@ To apply striping to a basic table, add the `isStriped` property to `Table`. To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `Table`. ```ts file="LegacyTableStripedExpandable.tsx" + ``` ### Striped custom tr @@ -824,4 +841,5 @@ To apply striping to an expandable table, add the `isStriped` and `isExpandable` To manually control striping, use a custom row wrapper that applies the `pf-m-striped` css class for each desired row. ```ts file="LegacyTableStripedCustomTr.tsx" + ```