chore: promote various features out of beta (#10578)

* chore: promote beta components

* couple more

* fix linting

* fix tests

packages/react-charts/src/components/Chart/Chart.tsx

@@ -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
@@ -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';
   /**

packages/react-charts/src/components/ChartBoxPlot/ChartBoxPlot.tsx

@@ -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 {
   /**

packages/react-charts/src/components/ChartBoxPlot/examples/ChartBoxPlot.md

@@ -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';

packages/react-charts/src/components/ChartBullet/ChartBullet.tsx

@@ -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
@@ -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';
   /**

packages/react-charts/src/components/ChartDonut/ChartDonut.tsx

@@ -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
@@ -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';
   /**

packages/react-charts/src/components/ChartDonutUtilization/ChartDonutUtilization.tsx

@@ -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
@@ -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';
   /**

packages/react-charts/src/components/ChartPie/ChartPie.tsx

@@ -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
@@ -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';
   /**

packages/react-core/src/components/Button/examples/Button.md

@@ -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

packages/react-core/src/components/Dropdown/Dropdown.tsx

@@ -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;

packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx

@@ -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';

packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -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;

packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -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"
 
 ```

packages/react-core/src/components/Form/examples/Form.md

@@ -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"
 
 ```

packages/react-core/src/components/Icon/Icon.tsx

@@ -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;

packages/react-core/src/components/Label/Label.tsx

@@ -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;

packages/react-core/src/components/Label/examples/Label.md

@@ -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"
 
 ```
 
@@ -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"
 
 ```

packages/react-core/src/components/Menu/Menu.tsx

@@ -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>;
@@ -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;
 }

packages/react-core/src/components/Menu/MenuContainer.tsx

@@ -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,

packages/react-core/src/components/Menu/MenuItem.tsx

@@ -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;

packages/react-core/src/components/Menu/MenuList.tsx

@@ -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;

packages/react-core/src/components/Menu/examples/Menu.md

@@ -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"
 
 ```
 
@@ -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"
 
 ```
 

packages/react-core/src/components/MenuToggle/MenuToggle.tsx

@@ -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;

packages/react-core/src/components/MenuToggle/examples/MenuToggle.md

@@ -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'
 
 ```

packages/react-core/src/components/Nav/NavItem.tsx

@@ -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;
 }