Skip to content

Commit

Permalink
chore: remove redundant string type (#10351)
Browse files Browse the repository at this point in the history
  • Loading branch information
Dominik-Petrik authored May 10, 2024
1 parent 63b697d commit 5752d14
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 26 deletions.
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"

```

0 comments on commit 5752d14

Please sign in to comment.