@patternfly/react-core 5.0.0-alpha.107 → 5.0.0-alpha.109

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -0,0 +1,220 @@
+import React from 'react';
+import {
+  Select,
+  SelectOption,
+  SelectList,
+  SelectOptionProps,
+  MenuToggle,
+  MenuToggleElement,
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button
+} from '@patternfly/react-core';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+let initialSelectOptions: SelectOptionProps[] = [
+  { itemId: 'Alabama', children: 'Alabama' },
+  { itemId: 'Florida', children: 'Florida' },
+  { itemId: 'New Jersey', children: 'New Jersey' },
+  { itemId: 'New Mexico', children: 'New Mexico' },
+  { itemId: 'New York', children: 'New York' },
+  { itemId: 'North Carolina', children: 'North Carolina' }
+];
+
+export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('');
+  const [inputValue, setInputValue] = React.useState<string>('');
+  const [filterValue, setFilterValue] = React.useState<string>('');
+  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
+  const [activeItem, setActiveItem] = React.useState<string | null>(null);
+  const [onCreation, setOnCreation] = React.useState<boolean>(false); // Boolean to refresh filter state after new option is created
+  const textInputRef = React.useRef<HTMLInputElement>();
+
+  React.useEffect(() => {
+    let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
+
+    // Filter menu items based on the text input value when one exists
+    if (filterValue) {
+      newSelectOptions = initialSelectOptions.filter((menuItem) =>
+        String(menuItem.children).toLowerCase().includes(filterValue.toLowerCase())
+      );
+
+      // When no options are found after filtering, display creation option
+      if (!newSelectOptions.length) {
+        newSelectOptions = [{ isDisabled: false, children: `Create new option "${filterValue}"`, itemId: 'create' }];
+      }
+
+      // Open the menu when the input value changes and the new value is not empty
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    }
+
+    setSelectOptions(newSelectOptions);
+    setActiveItem(null);
+    setFocusedItemIndex(null);
+  }, [filterValue, onCreation]);
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+
+    if (itemId) {
+      if (itemId === 'create') {
+        if (!initialSelectOptions.some((item) => item.itemId === filterValue)) {
+          initialSelectOptions = [...initialSelectOptions, { itemId: filterValue, children: filterValue }];
+        }
+        setSelected(filterValue);
+        setOnCreation(!onCreation);
+        setFilterValue('');
+      } else {
+        // eslint-disable-next-line no-console
+        console.log('selected', itemId);
+        setInputValue(itemId as string);
+        setFilterValue('');
+        setSelected(itemId as string);
+      }
+    }
+
+    setIsOpen(false);
+    setFocusedItemIndex(null);
+    setActiveItem(null);
+  };
+
+  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+    setInputValue(value);
+    setFilterValue(value);
+  };
+
+  const handleMenuArrowKeys = (key: string) => {
+    let indexToFocus;
+
+    if (isOpen) {
+      if (key === 'ArrowUp') {
+        // When no index is set or at the first index, focus to the last, otherwise decrement focus index
+        if (focusedItemIndex === null || focusedItemIndex === 0) {
+          indexToFocus = selectOptions.length - 1;
+        } else {
+          indexToFocus = focusedItemIndex - 1;
+        }
+      }
+
+      if (key === 'ArrowDown') {
+        // When no index is set or at the last index, focus to the first, otherwise increment focus index
+        if (focusedItemIndex === null || focusedItemIndex === selectOptions.length - 1) {
+          indexToFocus = 0;
+        } else {
+          indexToFocus = focusedItemIndex + 1;
+        }
+      }
+
+      setFocusedItemIndex(indexToFocus);
+      const focusedItem = selectOptions.filter((option) => !option.isDisabled)[indexToFocus];
+      setActiveItem(`select-create-typeahead-${focusedItem.itemId.replace(' ', '-')}`);
+    }
+  };
+
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const enabledMenuItems = selectOptions.filter((option) => !option.isDisabled);
+    const [firstMenuItem] = enabledMenuItems;
+    const focusedItem = focusedItemIndex ? enabledMenuItems[focusedItemIndex] : firstMenuItem;
+
+    switch (event.key) {
+      // Select the first available option
+      case 'Enter':
+        if (isOpen) {
+          onSelect(undefined, focusedItem.itemId as string);
+          setIsOpen((prevIsOpen) => !prevIsOpen);
+          setFocusedItemIndex(null);
+          setActiveItem(null);
+        }
+
+        setIsOpen((prevIsOpen) => !prevIsOpen);
+        setFocusedItemIndex(null);
+        setActiveItem(null);
+
+        break;
+      case 'Tab':
+      case 'Escape':
+        setIsOpen(false);
+        setActiveItem(null);
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        event.preventDefault();
+        handleMenuArrowKeys(event.key);
+        break;
+    }
+  };
+
+  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+    <MenuToggle ref={toggleRef} variant="typeahead" onClick={onToggleClick} isExpanded={isOpen} isFullWidth>
+      <TextInputGroup isPlain>
+        <TextInputGroupMain
+          value={inputValue}
+          onClick={onToggleClick}
+          onChange={onTextInputChange}
+          onKeyDown={onInputKeyDown}
+          id="create-typeahead-select-input"
+          autoComplete="off"
+          innerRef={textInputRef}
+          placeholder="Select a state"
+          {...(activeItem && { 'aria-activedescendant': activeItem })}
+          role="combobox"
+          isExpanded={isOpen}
+          aria-controls="select-create-typeahead-listbox"
+        />
+
+        <TextInputGroupUtilities>
+          {!!inputValue && (
+            <Button
+              variant="plain"
+              onClick={() => {
+                setSelected('');
+                setInputValue('');
+                setFilterValue('');
+                textInputRef?.current?.focus();
+              }}
+              aria-label="Clear input value"
+            >
+              <TimesIcon aria-hidden />
+            </Button>
+          )}
+        </TextInputGroupUtilities>
+      </TextInputGroup>
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id="create-typeahead-select"
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={onSelect}
+      onOpenChange={() => {
+        setIsOpen(false);
+      }}
+      toggle={toggle}
+    >
+      <SelectList id="select-create-typeahead-listbox">
+        {selectOptions.map((option, index) => (
+          <SelectOption
+            key={option.itemId || option.children}
+            isFocused={focusedItemIndex === index}
+            className={option.className}
+            onClick={() => setSelected(option.itemId)}
+            id={`select-typeahead-${option.itemId.replace(' ', '-')}`}
+            {...option}
+            ref={null}
+          />
+        ))}
+      </SelectList>
+    </Select>
+  );
+};

package/src/components/Select/examples/SelectViewMore.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { Select, SelectOption, SelectList, MenuToggle, Spinner } from '@patternfly/react-core';
+
+export const SelectViewMore: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [selected, setSelected] = React.useState<string>('Select a value');
+  const [activeItem, setActiveItem] = React.useState<number | string>(0);
+  const [isLoading, setIsLoading] = React.useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [selectOptions, setSelectOptions] = React.useState([
+    <SelectOption key={0} itemId="Option 1">
+      Option 1
+    </SelectOption>,
+    <SelectOption key={1} itemId="Option 2">
+      Option 2
+    </SelectOption>,
+    <SelectOption key={2} itemId="Option 3">
+      Option 3
+    </SelectOption>,
+    <SelectOption key={3} itemId="Option 4">
+      Option 4
+    </SelectOption>,
+    <SelectOption key={4} itemId="Option 5">
+      Option 5
+    </SelectOption>,
+    <SelectOption key={5} itemId="Option 6">
+      Option 6
+    </SelectOption>,
+    <SelectOption key={6} itemId="Option 7">
+      Option 7
+    </SelectOption>,
+    <SelectOption key={7} itemId="Option 8">
+      Option 8
+    </SelectOption>,
+    <SelectOption key={8} itemId="Option 9">
+      Option 9
+    </SelectOption>,
+    <SelectOption key={9} itemId="Final Option 10">
+      Final Option 10
+    </SelectOption>
+  ]);
+  const [numOptions, setNumOptions] = React.useState(3);
+  const [visibleOptions, setVisibleOptions] = React.useState(selectOptions.slice(0, numOptions));
+  const activeItemRef = React.useRef<HTMLElement>(null);
+  const viewMoreRef = React.useRef<HTMLLIElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+
+  React.useEffect(() => {
+    activeItemRef.current?.focus();
+  }, [visibleOptions]);
+
+  const simulateNetworkCall = (networkCallback: () => void) => {
+    setTimeout(networkCallback, 2000);
+  };
+
+  const getNextValidItem = (startingIndex: number, maxLength: number) => {
+    let validItem;
+    for (let i = startingIndex; i < maxLength; i++) {
+      if (selectOptions[i].props.isDisabled) {
+        continue;
+      } else {
+        validItem = selectOptions[i];
+        break;
+      }
+    }
+    return validItem;
+  };
+
+  const loadMoreOptions = () => {
+    const newLength = numOptions + 3 <= selectOptions.length ? numOptions + 3 : selectOptions.length;
+    const prevPosition = numOptions;
+    const nextValidItem = getNextValidItem(prevPosition, newLength);
+
+    setNumOptions(newLength);
+    setIsLoading(false);
+    setActiveItem(nextValidItem.props.itemId);
+    setVisibleOptions(selectOptions.slice(0, newLength));
+  };
+
+  const onViewMoreClick = () => {
+    setIsLoading(true);
+    simulateNetworkCall(() => {
+      loadMoreOptions();
+    });
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
+    // eslint-disable-next-line no-console
+    console.log('selected', itemId);
+
+    if (itemId !== 'loader') {
+      setSelected(itemId as string);
+      setIsOpen(false);
+      toggleRef?.current?.focus(); // Only focus the toggle when a non-loader option is selected
+    }
+  };
+
+  const toggle = (
+    <MenuToggle
+      ref={toggleRef}
+      onClick={onToggleClick}
+      isExpanded={isOpen}
+      style={
+        {
+          width: '200px'
+        } as React.CSSProperties
+      }
+    >
+      {selected}
+    </MenuToggle>
+  );
+
+  return (
+    <Select
+      id="single-view-more-select"
+      isOpen={isOpen}
+      selected={selected}
+      onSelect={onSelect}
+      onOpenChange={(isOpen) => setIsOpen(isOpen)}
+      toggle={{ toggleNode: toggle, toggleRef }}
+    >
+      <SelectList>
+        {visibleOptions.map((option) => {
+          const props = option.props;
+
+          return <SelectOption key={option.key} ref={props.itemId === activeItem ? activeItemRef : null} {...props} />;
+        })}
+        {numOptions !== selectOptions.length && (
+          <SelectOption
+            {...(!isLoading && { isLoadButton: true })}
+            {...(isLoading && { isLoading: true })}
+            onClick={onViewMoreClick}
+            itemId="loader"
+            ref={viewMoreRef}
+          >
+            {isLoading ? <Spinner size="lg" /> : 'View more'}
+          </SelectOption>
+        )}
+      </SelectList>
+    </Select>
+  );
+};

package/src/components/Slider/Slider.tsx

@@ -318,7 +318,6 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
   const displayInput = () => {
     const textInput = (
       <TextInput
-        className={css(styles.formControl)}
         isDisabled={isDisabled}
         type="number"
         value={localInputValue}

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -56,16 +56,19 @@ exports[`slider renders continuous slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <input
-        aria-invalid="false"
-        aria-label="Slider value input"
-        class="pf-v5-c-form-control pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        type="number"
-        value="50"
-      />
+      <div
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Slider value input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          type="number"
+          value="50"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -247,16 +250,19 @@ exports[`slider renders discrete slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <input
-        aria-invalid="false"
-        aria-label="Slider value input"
-        class="pf-v5-c-form-control pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        type="number"
-        value="50"
-      />
+      <div
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Slider value input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          type="number"
+          value="50"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -416,16 +422,19 @@ exports[`slider renders slider with input 1`] = `
         <div
           class="pf-v5-c-input-group__item pf-m-fill"
         >
-          <input
-            aria-invalid="false"
-            aria-label="Slider value input"
-            class="pf-v5-c-form-control pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            type="number"
-            value="50"
-          />
+          <div
+            class="pf-v5-c-form-control"
+          >
+            <input
+              aria-invalid="false"
+              aria-label="Slider value input"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              type="number"
+              value="50"
+            />
+          </div>
         </div>
         <div
           class="pf-v5-c-input-group__item pf-m-box"
@@ -492,16 +501,19 @@ exports[`slider renders slider with input above thumb 1`] = `
           <div
             class="pf-v5-c-input-group__item pf-m-fill"
           >
-            <input
-              aria-invalid="false"
-              aria-label="Slider value input"
-              class="pf-v5-c-form-control pf-v5-c-form-control"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-              data-ouia-component-type="PF4/TextInput"
-              data-ouia-safe="true"
-              type="number"
-              value="50"
-            />
+            <div
+              class="pf-v5-c-form-control"
+            >
+              <input
+                aria-invalid="false"
+                aria-label="Slider value input"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+                data-ouia-component-type="PF4/TextInput"
+                data-ouia-safe="true"
+                type="number"
+                value="50"
+              />
+            </div>
           </div>
           <div
             class="pf-v5-c-input-group__item pf-m-box"

package/src/components/TextArea/TextArea.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { HTMLProps } from 'react';
 import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
-import heightToken from '@patternfly/react-tokens/dist/esm/c_form_control_textarea_Height';
 import { css } from '@patternfly/react-styles';
 import { capitalize, ValidatedOptions, canUseDOM } from '../../helpers';
+import { FormControlIcon } from '../FormControl/FormControlIcon';
 
 export enum TextAreResizeOrientation {
   horizontal = 'horizontal',
@@ -23,12 +23,8 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   isRequired?: boolean;
   /** Flag to show if the text area is disabled. */
   isDisabled?: boolean;
-  /** @deprecated Use readOnlyVariant instead. Flag to show if the text area is read only. */
-  isReadOnly?: boolean;
   /** Read only variant. */
   readOnlyVariant?: 'default' | 'plain';
-  /** Use the external file instead of a data URI */
-  isIconSprite?: boolean;
   /** Flag to modify height based on contents. */
   autoResize?: boolean;
   /** Value to indicate if the text area is modified to show that validation state.
@@ -55,7 +51,6 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
     className: '',
     isRequired: false,
     isDisabled: false,
-    isIconSprite: false,
     validated: 'default',
     resizeOrientation: 'both',
     'aria-label': null as string
@@ -64,7 +59,8 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
   inputRef = React.createRef<HTMLTextAreaElement>();
 
   private setAutoHeight = (field: HTMLTextAreaElement) => {
-    field.style.setProperty(heightToken.name, 'inherit');
+    const parent = field.parentElement;
+    parent.style.setProperty('height', 'inherit');
     const computed = window.getComputedStyle(field);
     // Calculate the height
     const height =
@@ -73,7 +69,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       field.scrollHeight +
       parseInt(computed.getPropertyValue('padding-bottom')) +
       parseInt(computed.getPropertyValue('border-bottom-width'));
-    field.style.setProperty(heightToken.name, `${height}px`);
+    parent.style.setProperty('height', `${height}px`);
   };
 
   constructor(props: TextAreaProps) {
@@ -110,8 +106,6 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       validated,
       isRequired,
       isDisabled,
-      isIconSprite,
-      isReadOnly,
       readOnlyVariant,
       resizeOrientation,
       innerRef,
@@ -122,27 +116,40 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
-    const orientation = `resize${capitalize(resizeOrientation)}` as 'resizeVertical' | 'resizeHorizontal';
+    const orientation = `resize${capitalize(resizeOrientation)}` as
+      | 'resizeVertical'
+      | 'resizeHorizontal'
+      | 'resizeBoth';
+    const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
+
     return (
-      <textarea
+      <div
         className={css(
           styles.formControl,
-          isIconSprite && styles.modifiers.iconSprite,
+          readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
-          className,
-          resizeOrientation !== TextAreResizeOrientation.both && styles.modifiers[orientation],
-          validated === ValidatedOptions.success && styles.modifiers.success,
-          validated === ValidatedOptions.warning && styles.modifiers.warning
+          resizeOrientation && styles.modifiers[orientation],
+          isDisabled && styles.modifiers.disabled,
+          hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
+          className
+        )}
+      >
+        <textarea
+          onChange={this.handleChange}
+          {...(typeof this.props.defaultValue !== 'string' && { value })}
+          aria-invalid={validated === ValidatedOptions.error}
+          required={isRequired}
+          disabled={isDisabled || disabled}
+          readOnly={!!readOnlyVariant}
+          ref={innerRef || this.inputRef}
+          {...props}
+        />
+        {hasStatusIcon && (
+          <div className={css(styles.formControlUtilities)}>
+            <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />
+          </div>
         )}
-        onChange={this.handleChange}
-        {...(typeof this.props.defaultValue !== 'string' && { value })}
-        aria-invalid={validated === ValidatedOptions.error}
-        required={isRequired}
-        disabled={isDisabled || disabled}
-        readOnly={!!readOnlyVariant || isReadOnly}
-        ref={innerRef || this.inputRef}
-        {...props}
-      />
+      </div>
     );
   }
 }

package/src/components/TextArea/__tests__/TextArea.test.tsx

@@ -32,7 +32,7 @@ test('Renders simple text input', () => {
 test('Renders with custom class passed', () => {
   render(<TextArea aria-label="custom class textarea" className="test-class" />);
 
-  expect(screen.getByRole('textbox')).toHaveClass('test-class');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('test-class');
 });
 
 test('Renders text area with required attribute using isRequired', () => {
@@ -69,17 +69,17 @@ test('Text area is not read only by default', () => {
 
 test('Renders text area with default class name only', () => {
   render(<TextArea aria-label="validated textarea" />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-v5-c-form-control', { exact: true });
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-v5-c-form-control');
 });
 
 test('Renders validated text area with success className', () => {
   render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.success} />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-m-success');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-success');
 });
 
 test('Renders validated text area with warning className', () => {
   render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.warning} />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-m-warning');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-warning');
 });
 
 test('Renders invalid text area', () => {
@@ -94,12 +94,12 @@ test('Text area is not invalid by default', () => {
 
 test('Renders vertically resizable text area', () => {
   render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-vertical');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-vertical');
 });
 
 test('Renders horizontally resizable text area', () => {
   render(<TextArea aria-label="horizontal resize textarea" resizeOrientation="horizontal" />);
-  expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-horizontal');
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-horizontal');
 });
 
 test('Throws console error when no aria-label or id is given', () => {

package/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap

@@ -2,13 +2,16 @@
 
 exports[`Matches the snapshot 1`] = `
 <DocumentFragment>
-  <textarea
-    aria-invalid="false"
-    aria-label="test textarea"
-    class="pf-v5-c-form-control custom class"
-    disabled=""
-    required=""
-    style="--pf-v5-c-form-control--textarea--Height: 6px;"
-  />
+  <div
+    class="pf-v5-c-form-control pf-m-resize-both pf-m-disabled custom class"
+    style="height: 6px;"
+  >
+    <textarea
+      aria-invalid="false"
+      aria-label="test textarea"
+      disabled=""
+      required=""
+    />
+  </div>
 </DocumentFragment>
 `;