@patternfly/react-core 5.0.0-alpha.6 → 5.0.0-alpha.8

package/src/components/Slider/examples/SliderContinuous.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Checkbox, Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const SliderContinuous: React.FunctionComponent = () => {
+  const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false);
+  const [value, setValue] = React.useState(50);
+  const [valueCustom, setValueCustom] = React.useState(50);
+
+  return (
+    <>
+      <Checkbox
+        id="thumb-has-tooltip"
+        label="hasTooltipOverThumb"
+        isChecked={hasTooltipOverThumb}
+        onChange={setHasTooltipOverThumb}
+        style={{ marginBottom: 20 }}
+      />
+      <Text component={TextVariants.h3}>Slider Value is: {value}</Text>
+      <Slider hasTooltipOverThumb={hasTooltipOverThumb} value={value} onChange={setValue} />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {valueCustom}</Text>
+      <Slider
+        onChange={setValueCustom}
+        value={valueCustom}
+        areCustomStepsContinuous
+        hasTooltipOverThumb={hasTooltipOverThumb}
+        customSteps={[
+          { value: 0, label: '0%' },
+          { value: 100, label: '100%' }
+        ]}
+      />
+    </>
+  );
+};

package/src/components/Slider/examples/SliderDisabled.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const SliderDisabled: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(50);
+  const steps = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+
+  const displayValue = () => {
+    const step = steps.find(step => step.value === value);
+    return step ? step.label : 0;
+  };
+
+  return (
+    <>
+      <Text component={TextVariants.h3}>Slider value is: {displayValue()}</Text>
+      <Slider isDisabled value={value} onChange={setValue} customSteps={steps} />
+    </>
+  );
+};

package/src/components/Slider/examples/SliderDiscrete.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { Slider, Text, TextVariants } from '@patternfly/react-core';
+
+export const SliderDiscrete: React.FunctionComponent = () => {
+  const initialValues = {
+    value1: 50,
+    value2: 50,
+    value3: 25,
+    value4: 50,
+    value5: 50,
+    value6: 3,
+    value7: 25
+  };
+
+  const [numValue, setNumValue] = React.useState(initialValues);
+
+  const handleChange = (value: number, name: string) => {
+    setNumValue({ ...numValue, [name]: value });
+  };
+
+  const steps = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+
+  const stepsDiscreteWithMax = [
+    { value: 0, label: 'A' },
+    { value: 1, label: 'B' },
+    { value: 2, label: 'C' },
+    { value: 3, label: 'D' },
+    { value: 4, label: 'E' },
+    { value: 5, label: 'F' }
+  ];
+
+  const stepsDiscreteNoLinearWithMaxMin = [
+    { value: 12, label: '12' },
+    { value: 15, label: '15' },
+    { value: 25, label: '25' },
+    { value: 54, label: '54' },
+    { value: 67, label: '67' },
+    { value: 86, label: '86' }
+  ];
+
+  return (
+    <>
+      <Text component={TextVariants.h3}>Slider value is: {numValue.value1}</Text>
+      <Slider
+        value={initialValues.value1}
+        onChange={(value: number) => handleChange(value, 'value1')}
+        customSteps={steps}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {numValue.value2}</Text>
+      <Text component={TextVariants.small}>(min = 0, max = 200, step = 50) </Text>
+      <Slider
+        value={initialValues.value2}
+        onChange={(value: number) => handleChange(value, 'value2')}
+        max={200}
+        step={50}
+        showTicks
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value3)}</Text>
+      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries not shown) </Text>
+      <Slider
+        value={initialValues.value3}
+        onChange={(value: number) => handleChange(value, 'value3')}
+        min={-25}
+        max={75}
+        step={10}
+        showTicks
+        showBoundaries={false}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value4)}</Text>
+      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown) </Text>
+      <Slider
+        value={initialValues.value4}
+        onChange={(value: number) => handleChange(value, 'value4')}
+        min={-25}
+        max={75}
+        step={10}
+        showTicks
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value5)}</Text>
+      <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown, ticks not shown) </Text>
+      <Slider
+        value={initialValues.value5}
+        onChange={(value: number) => handleChange(value, 'value5')}
+        min={-25}
+        max={75}
+        step={10}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value6)}</Text>
+      <Text component={TextVariants.small}>(max = 5, custom steps) </Text>
+      <Slider
+        value={initialValues.value6}
+        showTicks
+        max={5}
+        customSteps={stepsDiscreteWithMax}
+        onChange={(value: number) => handleChange(value, 'value6')}
+      />
+      <br />
+      <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value7)}</Text>
+      <Text component={TextVariants.small}>(min = 12, max = 86, custom steps with non linear data) </Text>
+      <Slider
+        value={initialValues.value7}
+        showTicks
+        customSteps={stepsDiscreteNoLinearWithMaxMin}
+        onChange={(value: number) => handleChange(value, 'value7')}
+        min={12}
+        max={86}
+      />
+      <br />
+    </>
+  );
+};

package/src/components/Slider/examples/SliderThumbValueInput.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Slider } from '@patternfly/react-core';
+
+export const SliderThumbValueInput: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(50);
+  const [inputValue, setInputValue] = React.useState(50);
+
+  const onChange = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    if (inputValue === undefined) {
+      newValue = Number(value);
+    } else {
+      if (inputValue > 100) {
+        newValue = 100;
+        setLocalInputValue(100);
+      } else if (inputValue < 0) {
+        newValue = 0;
+        setLocalInputValue(0);
+      } else {
+        newValue = Math.floor(inputValue);
+      }
+    }
+    setValue(newValue);
+    setInputValue(newValue);
+  };
+
+  return (
+    <Slider
+      value={value}
+      isInputVisible
+      inputValue={inputValue}
+      inputLabel="%"
+      inputPosition="aboveThumb"
+      onChange={onChange}
+    />
+  );
+};

package/src/components/Slider/examples/SliderValueInput.tsx

@@ -0,0 +1,180 @@
+import React from 'react';
+import { Slider } from '@patternfly/react-core';
+
+export const SliderValueInput: React.FunctionComponent = () => {
+  const [valueDiscrete, setValueDiscrete] = React.useState(62.5);
+  const [inputValueDiscrete, setInputValueDiscrete] = React.useState(5);
+  const [valuePercent, setValuePercent] = React.useState(50);
+  const [inputValuePercent, setInputValuePercent] = React.useState(50);
+  const [valueContinuous, setValueContinuous] = React.useState(50);
+  const [inputValueContinuous, setInputValueContinuous] = React.useState(50);
+
+  const stepsDiscrete = [
+    { value: 0, label: '0' },
+    { value: 12.5, label: '1', isLabelHidden: true },
+    { value: 25, label: '2' },
+    { value: 37.5, label: '3', isLabelHidden: true },
+    { value: 50, label: '4' },
+    { value: 62.5, label: '5', isLabelHidden: true },
+    { value: 75, label: '6' },
+    { value: 87.5, label: '7', isLabelHidden: true },
+    { value: 100, label: '8' }
+  ];
+  const stepsPercent = [
+    { value: 0, label: '0%' },
+    { value: 25, label: '25%', isLabelHidden: true },
+    { value: 50, label: '50%' },
+    { value: 75, label: '75%', isLabelHidden: true },
+    { value: 100, label: '100%' }
+  ];
+
+  const onChangeDiscrete = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    let newInputValue;
+
+    if (inputValue === undefined) {
+      const step = stepsDiscrete.find(step => step.value === value);
+      newInputValue = step ? step.label : 0;
+      newInputValue = Number(newInputValue);
+      newValue = value;
+    } else {
+      const maxValue = Number(stepsDiscrete[stepsDiscrete.length - 1].label);
+      if (inputValue > maxValue) {
+        newValue = Number(stepsDiscrete[stepsDiscrete.length - 1].value);
+        newInputValue = maxValue;
+        setLocalInputValue(maxValue);
+      } else {
+        const minValue = Number(stepsDiscrete[0].label);
+        if (inputValue < minValue) {
+          newValue = Number(stepsDiscrete[0].value);
+          newInputValue = minValue;
+          setLocalInputValue(minValue);
+        } else {
+          const stepIndex = stepsDiscrete.findIndex(step => Number(step.label) >= inputValue);
+          if (Number(stepsDiscrete[stepIndex].label) === inputValue) {
+            newValue = stepsDiscrete[stepIndex].value;
+            newInputValue = inputValue;
+          } else {
+            const midpoint = (Number(stepsDiscrete[stepIndex].label) + Number(stepsDiscrete[stepIndex - 1].label)) / 2;
+            if (midpoint > inputValue) {
+              newValue = stepsDiscrete[stepIndex - 1].value;
+              newInputValue = Number(stepsDiscrete[stepIndex - 1].label);
+            } else {
+              newValue = stepsDiscrete[stepIndex].value;
+              newInputValue = Number(stepsDiscrete[stepIndex].label);
+            }
+          }
+        }
+      }
+    }
+
+    setInputValueDiscrete(newInputValue);
+    setValueDiscrete(newValue);
+  };
+
+  const onChangePercent = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    let newInputValue;
+
+    if (inputValue === undefined) {
+      const step = stepsPercent.find(step => step.value === value);
+      newInputValue = step ? step.label.slice(0, -1) : 0;
+      newInputValue = Number(newInputValue);
+      newValue = value;
+    } else {
+      const maxValue = Number(stepsPercent[stepsPercent.length - 1].label.slice(0, -1));
+      if (inputValue > maxValue) {
+        newValue = Number(stepsPercent[stepsPercent.length - 1].value);
+        newInputValue = maxValue;
+        setLocalInputValue(maxValue);
+      } else {
+        const minValue = Number(stepsPercent[0].label.slice(0, -1));
+        if (inputValue < minValue) {
+          newValue = minValue;
+          setLocalInputValue(minValue);
+        } else {
+          const stepIndex = stepsPercent.findIndex(step => Number(step.label.slice(0, -1)) >= inputValue);
+          if (Number(stepsPercent[stepIndex].label.slice(0, -1)) === inputValue) {
+            newValue = stepsPercent[stepIndex].value;
+            newInputValue = inputValue;
+          } else {
+            const midpoint =
+              (Number(stepsPercent[stepIndex].label.slice(0, -1)) +
+                Number(stepsPercent[stepIndex - 1].label.slice(0, -1))) /
+              2;
+            if (midpoint > inputValue) {
+              newValue = stepsPercent[stepIndex - 1].value;
+              newInputValue = Number(stepsPercent[stepIndex - 1].label.slice(0, -1));
+            } else {
+              newValue = stepsPercent[stepIndex].value;
+              newInputValue = Number(stepsPercent[stepIndex].label.slice(0, -1));
+            }
+          }
+        }
+      }
+    }
+
+    setInputValuePercent(newInputValue);
+    setValuePercent(newValue);
+  };
+
+  const onChangeContinuous = (
+    value: number,
+    inputValue: number,
+    setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    let newValue;
+    if (inputValue === undefined) {
+      newValue = Math.floor(value);
+    } else {
+      if (inputValue > 100) {
+        newValue = 100;
+        setLocalInputValue(100);
+      } else if (inputValue < 0) {
+        newValue = 0;
+        setLocalInputValue(0);
+      } else {
+        newValue = Math.floor(inputValue);
+      }
+    }
+    setInputValueContinuous(newValue);
+    setValueContinuous(newValue);
+  };
+
+  return (
+    <>
+      <Slider
+        value={valueDiscrete}
+        isInputVisible
+        inputValue={inputValueDiscrete}
+        customSteps={stepsDiscrete}
+        onChange={onChangeDiscrete}
+      />
+      <br />
+      <Slider
+        value={valuePercent}
+        isInputVisible
+        inputValue={inputValuePercent}
+        inputLabel="%"
+        onChange={onChangePercent}
+        customSteps={stepsPercent}
+      />
+      <br />
+      <Slider
+        value={valueContinuous}
+        isInputVisible
+        inputValue={inputValueContinuous}
+        inputLabel="%"
+        onChange={onChangeContinuous}
+      />
+    </>
+  );
+};

package/src/components/Tabs/TabAction.tsx

@@ -11,8 +11,6 @@ export interface TabActionProps extends Omit<React.HTMLProps<HTMLButtonElement>,
   className?: string;
   /** Click callback for tab action button */
   onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  /** Flag indicating if the tab action is a help action */
-  isHelpAction?: boolean;
   /** Flag indicating if the tab action is disabled */
   isDisabled?: boolean;
   /** Accessible label for the tab action */
@@ -25,7 +23,6 @@ const TabActionBase: React.FunctionComponent<TabActionProps> = ({
   children,
   className,
   onClick,
-  isHelpAction,
   isDisabled,
   'aria-label': ariaLabel = 'Tab action',
   innerRef,
@@ -34,7 +31,7 @@ const TabActionBase: React.FunctionComponent<TabActionProps> = ({
   ouiaSafe,
   ...props
 }: TabActionProps) => (
-  <span className={css(styles.tabsItemAction, isHelpAction && styles.modifiers.help, className)}>
+  <span className={css(styles.tabsItemAction, className)}>
     <Button
       ref={innerRef}
       type="button"

package/src/components/Tabs/Tabs.tsx

@@ -45,11 +45,11 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   defaultActiveKey?: number | string;
   /** Callback to handle tab selection */
   onSelect?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
-  /** @beta Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property. */
+  /** Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property. */
   onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
-  /** @beta Callback for the add button. Passing this property inserts the add button */
-  onAdd?: () => void;
-  /** @beta Aria-label for the add button */
+  /** Callback for the add button. Passing this property inserts the add button */
+  onAdd?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  /** Aria-label for the add button */
   addButtonAriaLabel?: string;
   /** Uniquely identifies the tabs */
   id?: string;

package/src/components/Tabs/examples/Tabs.md

@@ -2,7 +2,7 @@
 id: Tabs
 section: components
 cssPrefix: pf-c-tabs
-propComponents: ['Tabs', 'Tab', 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject']
+propComponents: ['Tabs', 'Tab', TabAction, 'TabContent', 'TabTitleText', 'TabTitleIcon', 'horizontalOverflowObject']
 ouia: true
 ---
 
@@ -141,7 +141,7 @@ The tooltip should also have the `id` prop passed in. The value given to this pr
 
 To enable closeable tabs, pass the `onClose` property to `Tabs`, and to enable the add button, pass the `onAdd` property to `Tabs`. Aria labels may be controlled manually by passing `closeButtonAriaLabel` to `Tab` and `addButtonAriaLabel` to `Tabs`.
 
-```ts file="./TabsDynamic.tsx" isBeta
+```ts file="./TabsDynamic.tsx" 
 ```
 
 ### Help action

package/src/components/Tabs/examples/TabsHelp.tsx

@@ -41,7 +41,6 @@ export const TabsHelp: React.FunctionComponent = () => {
             actions={
               <>
                 <TabAction
-                  isHelpAction
                   aria-label={`Help action for ${tab}`}
                   ref={ref}
                   {...(tab === 'Help disabled' && { isDisabled: true })}

package/src/components/Tabs/examples/TabsHelpAndClose.tsx

@@ -65,7 +65,7 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
             title={<TabTitleText>{tab}</TabTitleText>}
             actions={
               <>
-                <TabAction isHelpAction aria-label={`Help for ${tab}`} ref={ref}>
+                <TabAction aria-label={`Help for ${tab}`} ref={ref}>
                   <HelpIcon />
                 </TabAction>
                 <TabAction aria-label={`Close ${tab}`} onClick={e => onClose(e, index)} isDisabled={tabs.length === 1}>

package/src/components/Text/TextContent.tsx

@@ -12,7 +12,7 @@ export interface TextContentProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 export const TextContent: React.FunctionComponent<TextContentProps> = ({
-  children = null,
+  children,
   className = '',
   isVisited = false,
   ...props
@@ -21,4 +21,5 @@ export const TextContent: React.FunctionComponent<TextContentProps> = ({
     {children}
   </div>
 );
+
 TextContent.displayName = 'TextContent';

package/src/components/Text/TextList.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/Content/content';
 import { css } from '@patternfly/react-styles';
 
 export enum TextListVariants {
@@ -14,18 +15,21 @@ export interface TextListProps extends React.HTMLProps<HTMLElement> {
   className?: string;
   /** The text list component */
   component?: 'ul' | 'ol' | 'dl';
+  /** Modifies the list to include plain styling */
+  isPlain?: boolean;
 }
 
 export const TextList: React.FunctionComponent<TextListProps> = ({
   children = null,
   className = '',
   component = TextListVariants.ul,
+  isPlain = false,
   ...props
 }: TextListProps) => {
   const Component: any = component;
 
   return (
-    <Component {...props} className={css(className)}>
+    <Component {...props} className={css(isPlain && styles.modifiers.plain, className)}>
       {children}
     </Component>
   );

package/src/components/Text/__tests__/TextContent.test.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TextContent } from '../TextContent';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-content">
+      <TextContent />
+    </div>
+  );
+  expect(screen.getByTestId('test-content').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<TextContent>Test</TextContent>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-c-content', () => {
+  render(<TextContent>Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-content', { exact: true });
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<TextContent className="custom-class">Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders without class name pf-m-visited by default', () => {
+  render(<TextContent>Test</TextContent>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-visited');
+});
+
+test('Renders with class name pf-m-visited when isVisited=true', () => {
+  render(<TextContent isVisited={true}>Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-visited');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<TextContent aria-label="Test label">Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TextContent>Test</TextContent>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Text/__tests__/TextList.test.tsx

@@ -41,6 +41,11 @@ test('Renders as "dl" element when component="dl"', () => {
   expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL');
 });
 
+test('Renders with plain modifier class when isPlain is set to true', () => {
+  render(<TextList isPlain>Test</TextList>);
+  expect(screen.getByRole('list')).toHaveClass('pf-m-plain');
+});
+
 test('Renders with inherited element props spread to the component', () => {
   render(<TextList aria-label="Test label">Test</TextList>);
   expect(screen.getByText('Test')).toHaveAccessibleName('Test label');

package/src/components/Text/__tests__/__snapshots__/TextContent.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-content"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Text/examples/Text.md

@@ -29,6 +29,11 @@ Text components such as Text, TextList, TextListItem need to be placed within a
 ```ts file="./TextOrderedList.tsx"
 ```
 
+### Plain list
+
+```ts file="./TextPlainList.tsx"
+```
+
 ### Description list
 
 ```ts file="./TextDescriptionList.tsx"

package/src/components/Text/examples/TextPlainList.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text, TextVariants, TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';
+
+export const TextPlainList: React.FunctionComponent = () => (
+  <TextContent>
+    <Text component={TextVariants.h3}>Plain unordered list</Text>
+    <TextList isPlain>
+      <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
+      <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
+      <TextListItem>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</TextListItem>
+      <TextListItem>Ut non enim metus.</TextListItem>
+    </TextList>
+    <Text component={TextVariants.h3}>Plain ordered list</Text>
+    <TextList component={TextListVariants.ol} isPlain>
+      <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
+      <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
+      <TextListItem>Integer in volutpat libero.</TextListItem>
+      <TextListItem>Donec a diam tellus.</TextListItem>
+      <TextListItem>Aenean nec tortor orci.</TextListItem>
+      <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
+      <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
+    </TextList>
+  </TextContent>
+);

package/src/components/TextArea/examples/TextArea.md

@@ -56,5 +56,5 @@ propComponents: ['TextArea']
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```ts isBeta file="./TextAreaIconSprite.tsx"
+```ts file="./TextAreaIconSprite.tsx"
 ```