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: promote various features out of beta #10578

Merged
merged 4 commits into from
Jun 11, 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
4 changes: 2 additions & 2 deletions packages/react-charts/src/components/Chart/Chart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ export interface ChartProps extends VictoryChartProps {
*/
innerRadius?: number;
/**
* @beta Allows legend items to wrap onto the next line if the chart is not wide enough.
* Allows legend items to wrap onto the next line if the chart is not wide enough.
*
* Note that the chart's SVG height and width are 100% by default, so it can be responsive itself. However, if you
* define the height and width of the chart's parent container, you must accommodate for extra legend height due to
Expand Down Expand Up @@ -288,7 +288,7 @@ export interface ChartProps extends VictoryChartProps {
*/
legendPosition?: 'bottom' | 'bottom-left' | 'right';
/**
* @beta Text direction of the legend labels.
* Text direction of the legend labels.
*/
legendDirection?: 'ltr' | 'rtl';
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ import { getTheme } from '../ChartUtils/chart-theme';
*
* See https://github.com/FormidableLabs/victory/blob/main/packages/victory-bar/src/index.d.ts
*
* @beta
*/
export interface ChartBoxPlotProps extends VictoryBoxPlotProps {
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ propComponents: [
'ChartVoronoiContainer'
]
hideDarkMode: true
beta: true
---

import { Chart, ChartAxis, ChartBoxPlot, ChartCursorFlyout, ChartCursorTooltip, ChartLegendTooltip, ChartThemeColor, ChartThreshold, ChartVoronoiContainer, createContainer } from '@patternfly/react-charts';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ export interface ChartBulletProps {
*/
labels?: string[] | number[] | ((data: any) => string | number | null);
/**
* @beta Allows legend items to wrap onto the next line if the chart is not wide enough.
* Allows legend items to wrap onto the next line if the chart is not wide enough.
*
* Note that the chart's SVG height and width are 100% by default, so it can be responsive itself. However, if you
* define the height and width of the chart's parent container, you must accommodate for extra legend height due to
Expand Down Expand Up @@ -255,7 +255,7 @@ export interface ChartBulletProps {
*/
legendPosition?: 'bottom' | 'bottom-left' | 'right';
/**
* @beta Text direction of the legend labels.
* Text direction of the legend labels.
*/
legendDirection?: 'ltr' | 'rtl';
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ export interface ChartDonutProps extends ChartPieProps {
*/
labels?: string[] | number[] | ((data: any) => string | number | null);
/**
* @beta Allows legend items to wrap onto the next line if the chart is not wide enough.
* Allows legend items to wrap onto the next line if the chart is not wide enough.
*
* Note that the chart's SVG height and width are 100% by default, so it can be responsive itself. However, if you
* define the height and width of the chart's parent container, you must accommodate for extra legend height due to
Expand Down Expand Up @@ -347,7 +347,7 @@ export interface ChartDonutProps extends ChartPieProps {
*/
legendPosition?: 'bottom' | 'right';
/**
* @beta Text direction of the legend labels.
* Text direction of the legend labels.
*/
legendDirection?: 'ltr' | 'rtl';
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps {
*/
isStatic?: boolean;
/**
* @beta Allows legend items to wrap onto the next line if the chart is not wide enough.
* Allows legend items to wrap onto the next line if the chart is not wide enough.
*
* Note that the chart's SVG height and width are 100% by default, so it can be responsive itself. However, if you
* define the height and width of the chart's parent container, you must accommodate for extra legend height due to
Expand Down Expand Up @@ -338,7 +338,7 @@ export interface ChartDonutUtilizationProps extends ChartDonutProps {
*/
legendPosition?: 'bottom' | 'right';
/**
* @beta Text direction of the legend labels.
* Text direction of the legend labels.
*/
legendDirection?: 'ltr' | 'rtl';
/**
Expand Down
4 changes: 2 additions & 2 deletions packages/react-charts/src/components/ChartPie/ChartPie.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ export interface ChartPieProps extends VictoryPieProps {
*/
labels?: string[] | number[] | ((data: any) => string | number | null);
/**
* @beta Allows legend items to wrap onto the next line if the chart is not wide enough.
* Allows legend items to wrap onto the next line if the chart is not wide enough.
*
* Note that the chart's SVG height and width are 100% by default, so it can be responsive itself. However, if you
* define the height and width of the chart's parent container, you must accommodate for extra legend height due to
Expand Down Expand Up @@ -336,7 +336,7 @@ export interface ChartPieProps extends VictoryPieProps {
*/
legendPosition?: 'bottom' | 'right';
/**
* @beta Text direction of the legend labels.
* Text direction of the legend labels.
*/
legendDirection?: 'ltr' | 'rtl';
/**
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furt

Buttons can display a `count` in the form of a badge to indicate some value or number by passing in the `countOptions` prop as a `BadgeCountObject` object. The `BadgeCountObject` object will handle `count`, `isRead`, and `className` props for the badge count.

```ts file="./ButtonWithCount.tsx" isBeta
```ts file="./ButtonWithCount.tsx"
```

### Plain with no padding
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Dropdown/Dropdown.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export interface DropdownProps extends MenuProps, OUIAProps {
/** Callback to allow the dropdown component to change the open state of the menu.
* Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. */
onOpenChange?: (isOpen: boolean) => void;
/** @beta Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
/** Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
onOpenChangeKeys?: string[];
/** Indicates if the menu should be without the outer box-shadow. */
isPlain?: boolean;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
* both are specified; used for uncontrolled expandable with dynamic toggle text).
*/
toggleTextExpanded?: string;
/** @beta Truncates the expandable content to the specified number of lines when using the
/** Truncates the expandable content to the specified number of lines when using the
* "truncate" variant.
*/
truncateMaxLines?: number;
/** @beta Determines the variant of the expandable section. When passing in "truncate" as the
/** Determines the variant of the expandable section. When passing in "truncate" as the
* variant, the expandable content will be truncated after 3 lines by default.
*/
variant?: 'default' | 'truncate';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export interface ExpandableSectionToggleProps extends React.HTMLProps<HTMLDivEle
toggleId?: string;
/** Direction the toggle arrow should point when the expandable section is expanded. */
direction?: 'up' | 'down';
/** @beta Flag to determine toggle styling when the expandable content is truncated. */
/** Flag to determine toggle styling when the expandable content is truncated. */
hasTruncatedContent?: boolean;
/** Flag indicating if the expandable section is expanded. */
isExpanded?: boolean;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,6 @@ By using the `toggleContent` prop, you can pass in content other than a simple s

By passing in `variant="truncate"`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `truncateMaxLines` prop.

```ts file="ExpandableSectionTruncateExpansion.tsx" isBeta
```ts file="ExpandableSectionTruncateExpansion.tsx"

```
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Form/examples/Form.md
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,6 @@ When using helper text inside a `FormGroup`, the `HelperText` component should b

### Form state

```ts file="./FormState.tsx" isBeta
```ts file="./FormState.tsx"

```
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Icon/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export interface IconComponentProps extends Omit<React.HTMLProps<HTMLSpanElement
isInProgress?: boolean;
/** Aria-label for the default progress icon */
defaultProgressArialabel?: string;
/** @beta Flag indicating whether the icon passed as children should be mirrored for
/** Flag indicating whether the icon passed as children should be mirrored for
* right to left (RTL) languages. This will not mirror the icon passed to progressIcon.
*/
shouldMirrorRTL?: boolean;
Expand Down
8 changes: 4 additions & 4 deletions packages/react-core/src/components/Label/Label.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,13 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
isCompact?: boolean;
/** Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in. */
isDisabled?: boolean;
/** @beta Flag indicating the label is editable. */
/** Flag indicating the label is editable. */
isEditable?: boolean;
/** @beta Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control. */
/** Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control. */
editableProps?: any;
/** @beta Callback when an editable label completes an edit. */
/** Callback when an editable label completes an edit. */
onEditComplete?: (event: MouseEvent | KeyboardEvent, newText: string) => void;
/** @beta Callback when an editable label cancels an edit. */
/** Callback when an editable label cancels an edit. */
onEditCancel?: (event: KeyboardEvent, previousText: string) => void;
/** The max width of the label before it is truncated. Can be any valid CSS unit, such as '100%', '100px', or '16ch'. */
textMaxWidth?: string;
Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/components/Label/examples/Label.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Click or press either enter or space to begin editing a label. After editing, cl

You can also customize any Label's close button aria-label as this example shows with `closeBtnAriaLabel`.

```ts file="LabelEditable.tsx" isBeta
```ts file="LabelEditable.tsx"

```

Expand Down Expand Up @@ -86,14 +86,14 @@ Labels in a group can also be stacked vertically. This example shows a verical l

### Editable label group

```ts isBeta file="LabelGroupEditableLabels.tsx"
```ts file="LabelGroupEditableLabels.tsx"

```

### Editable label group with add button

The contents of a label group can be modified by removing labels or adding new ones using the add button. For additional documentation that showcases adding a new label, see [label demos](/components/label/react-demos).

```ts isBeta file="LabelGroupEditableAdd.tsx"
```ts file="LabelGroupEditableAdd.tsx"

```
26 changes: 13 additions & 13 deletions packages/react-core/src/components/Menu/Menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,34 +19,34 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
selected?: any | any[];
/** Callback called when an MenuItems's action button is clicked. You can also specify it within a MenuItemAction. */
onActionClick?: (event?: any, itemId?: any, actionId?: any) => void;
/** @beta Indicates if menu contains a flyout menu */
/** Indicates if menu contains a flyout menu */
containsFlyout?: boolean;
/** @beta Indicating that the menu should have nav flyout styling */
/** Indicating that the menu should have nav flyout styling */
isNavFlyout?: boolean;
/** @beta Indicates if menu contains a drilldown menu */
/** Indicates if menu contains a drilldown menu */
containsDrilldown?: boolean;
/** @beta Indicates if a menu is drilled into */
/** Indicates if a menu is drilled into */
isMenuDrilledIn?: boolean;
/** @beta Indicates the path of drilled in menu itemIds */
/** Indicates the path of drilled in menu itemIds */
drilldownItemPath?: string[];
/** @beta Array of menus that are drilled in */
/** Array of menus that are drilled in */
drilledInMenus?: string[];
/** @beta Callback for drilling into a submenu */
/** Callback for drilling into a submenu */
onDrillIn?: (
event: React.KeyboardEvent | React.MouseEvent,
fromItemId: string,
toItemId: string,
itemId: string
) => void;
/** @beta Callback for drilling out of a submenu */
/** Callback for drilling out of a submenu */
onDrillOut?: (event: React.KeyboardEvent | React.MouseEvent, toItemId: string, itemId: string) => void;
/** @beta Callback for collecting menu heights */
/** Callback for collecting menu heights */
onGetMenuHeight?: (menuId: string, height: number) => void;
/** @beta ID of parent menu for drilldown menus */
/** ID of parent menu for drilldown menus */
parentMenu?: string;
/** @beta ID of the currently active menu for the drilldown variant */
/** ID of the currently active menu for the drilldown variant */
activeMenu?: string;
/** @beta itemId of the currently active item. You can also specify isActive on the MenuItem. */
/** itemId of the currently active item. You can also specify isActive on the MenuItem. */
activeItemId?: string | number;
/** @hide Forwarded ref */
innerRef?: React.Ref<HTMLDivElement>;
Expand All @@ -60,7 +60,7 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
ouiaId?: number | string;
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
ouiaSafe?: boolean;
/** @beta Determines the accessible role of the menu. For a non-checkbox menu that can have
/** Determines the accessible role of the menu. For a non-checkbox menu that can have
* one or more items selected, pass in "listbox". */
role?: string;
}
Expand Down
1 change: 0 additions & 1 deletion packages/react-core/src/components/Menu/MenuContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ export interface MenuContainerProps {

/**
* Container that links a menu and menu toggle together, to handle basic keyboard input and control the opening and closing of a menu.
* This component is currently in beta and is subject to change.
*/
export const MenuContainer: React.FunctionComponent<MenuContainerProps> = ({
menu,
Expand Down
10 changes: 5 additions & 5 deletions packages/react-core/src/components/Menu/MenuItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,15 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
isFocused?: boolean;
/** Flag indicating the item is in danger state */
isDanger?: boolean;
/** @beta Flyout menu. Should not be used if the to prop is defined. */
/** Flyout menu. Should not be used if the to prop is defined. */
flyoutMenu?: React.ReactElement;
/** @beta Callback function when mouse leaves trigger */
/** Callback function when mouse leaves trigger */
onShowFlyout?: (event?: any) => void;
/** @beta Drilldown menu of the item. Should be a Menu or DrilldownMenu type. */
/** Drilldown menu of the item. Should be a Menu or DrilldownMenu type. */
drilldownMenu?: React.ReactNode | (() => React.ReactNode);
/** @beta Sub menu direction */
/** Sub menu direction */
direction?: 'down' | 'up';
/** @beta True if item is on current selection path */
/** True if item is on current selection path */
isOnPath?: boolean;
/** Adds an accessible name to the menu item. */
'aria-label'?: string;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Menu/MenuList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export interface MenuListProps extends React.HTMLProps<HTMLUListElement> {
children: React.ReactNode;
/** Additional classes added to the menu list */
className?: string;
/** @beta Indicates to assistive technologies whether more than one item can be selected
/** Indicates to assistive technologies whether more than one item can be selected
* for a non-checkbox menu. Only applies when the menu's role is "listbox".
*/
isAriaMultiselectable?: boolean;
Expand Down
8 changes: 4 additions & 4 deletions packages/react-core/src/components/Menu/examples/Menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -194,23 +194,23 @@ Use a drilldown menu to contain different levels of menu items. When a parent me
- Use the `onDrillIn` and `onDrillOut` properties to contain callbacks for drilling into and drilling out of a submenu, respectively.
- To account for updated heights as menus drill in and out of use, use the `onGetMenuHeight` property. When starting from a drilled-in state, the `onGetMenuHeight` property must define the height of the root menu.

```ts file="./MenuWithDrilldown.tsx" isBeta
```ts file="./MenuWithDrilldown.tsx"

```

### Initially drilled-in menu

To render an initially drilled-in menu, the `drilldownItemPath`, `drilledInMenus`, and `activeMenu` properties must be set to default values.

```ts file="./MenuWithDrilldownInitialState.tsx" isBeta
```ts file="./MenuWithDrilldownInitialState.tsx"

```

### With drilldown - submenu functions

For added flexibility with large menus, you may create a menu by passing a function to `drilldownMenu`. This approach allows you to create menu items dynamically, rather than creating everything up front.

```ts file="./MenuWithDrilldownSubmenuFunctions.tsx" isBeta
```ts file="./MenuWithDrilldownSubmenuFunctions.tsx"

```

Expand All @@ -220,7 +220,7 @@ Use [breadcrumbs](/components/breadcrumb) when a drilldown menu has more than 2

To control the height of a menu, use the `maxMenuHeight` property. Selecting the "Set max menu height" checkbox in the following example sets the menu height to "100px" and makes the menu scrollable.

```ts file="MenuWithDrilldownBreadcrumbs.tsx" isBeta
```ts file="MenuWithDrilldownBreadcrumbs.tsx"

```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export interface MenuToggleProps
splitButtonOptions?: SplitButtonOptions;
/** Variant styles of the menu toggle */
variant?: 'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead';
/** @beta Status styles of the menu toggle */
/** Status styles of the menu toggle */
status?: 'success' | 'warning' | 'danger';
/** Overrides the status icon */
statusIcon?: React.ReactNode;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,6 @@ To create a toggle with a status, pass in the `status` property to the `MenuTogg

When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.

```ts isBeta file='MenuToggleStatus.tsx'
```ts file='MenuToggleStatus.tsx'

```
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Nav/NavItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export interface NavItemProps extends Omit<React.HTMLProps<HTMLAnchorElement>, '
ouiaId?: number | string;
/** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
ouiaSafe?: boolean;
/** @beta Adds a wrapper around the nav link text. Improves the layout when the text is a react node. */
/** Adds a wrapper around the nav link text. Improves the layout when the text is a react node. */
hasNavLinkWrapper?: boolean;
}

Expand Down
Loading
Loading