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

chore: remove redundant string type #10351

Merged
merged 1 commit into from
May 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export interface NotificationDrawerGroupProps extends Omit<React.HTMLProps<HTMLD
/** Callback for when group button is clicked to expand */
onExpand?: (event: any, value: boolean) => 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 */
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export interface OptionsMenuItemGroupProps extends React.HTMLProps<HTMLElement>
/** 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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand Down
10 changes: 5 additions & 5 deletions packages/react-table/src/components/Table/TableTypes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export interface IExtra extends IExtraData {
}

export type IFormatterValueType = formatterValueType & {
title?: string | React.ReactNode;
title?: React.ReactNode;
props?: any;
};

Expand All @@ -157,7 +157,7 @@ export interface IAction extends Omit<DropdownItemProps, 'title' | 'onClick'>, 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 */
Expand Down Expand Up @@ -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;
Expand All @@ -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 */
Expand All @@ -229,7 +229,7 @@ export interface ICell {
export type RowCellContent<T = any> = (value?: string, rowIndex?: number, cellIndex?: number, props?: T) => void;

export interface IRowCell<T = any> {
title?: string | React.ReactNode | RowCellContent<T>;
title?: React.ReactNode | RowCellContent<T>;
props?: T;
formatters?: IFormatter[];
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 */
Expand Down Expand Up @@ -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[];
}
Expand All @@ -122,6 +121,7 @@ interface IRowCell {
### Basic

```ts file="LegacyTableBasic.tsx"

```

### Custom row wrapper
Expand Down Expand Up @@ -152,6 +152,7 @@ interface RowWrapperProps {
```

```ts file="LegacyTableMisc.tsx"

```

### Sortable & wrapping column headers
Expand All @@ -169,13 +170,15 @@ 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

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
Expand All @@ -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
Expand All @@ -206,13 +210,15 @@ 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

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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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'
}
],
Expand Down Expand Up @@ -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'
}
],
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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({
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -803,25 +817,29 @@ 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

To apply striping to a basic table, add the `isStriped` property to `Table`.

```ts file="LegacyTableStriped.tsx"

```

### Striped expandable

To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `Table`.

```ts file="LegacyTableStripedExpandable.tsx"

```

### Striped custom tr

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"

```
Loading