@patternfly/react-core 4.224.9 → 4.224.12

package/src/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -80,11 +80,11 @@ class BasicNotificationDrawer extends React.Component {
         <NotificationDrawerHeader count={3} onClose={this.onDrawerClose}>
           <Dropdown
             onSelect={this.onSelect}
-            toggle={<KebabToggle onToggle={this.onToggle(0)} id="toggle-id-0" />}
+            toggle={<KebabToggle onToggle={this.onToggle(0)} id="basic-kebab-toggle" />}
             isOpen={isOpen0}
             isPlain
             dropdownItems={dropdownItems}
-            id="notification-0"
+            id="basic-notification-0"
             position={DropdownPosition.right}
           />
         </NotificationDrawerHeader>
@@ -99,11 +99,11 @@ class BasicNotificationDrawer extends React.Component {
                 <Dropdown
                   position={DropdownPosition.right}
                   onSelect={this.onSelect}
-                  toggle={<KebabToggle onToggle={this.onToggle(1)} id="toggle-id-1" />}
+                  toggle={<KebabToggle onToggle={this.onToggle(1)} id="basic-toggle-id-1" />}
                   isOpen={isOpen1}
                   isPlain
                   dropdownItems={dropdownItems}
-                  id="notification-1"
+                  id="basic-notification-1"
                 />
               </NotificationDrawerListItemHeader>
               <NotificationDrawerListItemBody timestamp="5 minutes ago">
@@ -119,11 +119,11 @@ class BasicNotificationDrawer extends React.Component {
                 <Dropdown
                   position={DropdownPosition.right}
                   onSelect={this.onSelect}
-                  toggle={<KebabToggle onToggle={this.onToggle(2)} id="toggle-id-2" />}
+                  toggle={<KebabToggle onToggle={this.onToggle(2)} id="basic-toggle-id-2" />}
                   isOpen={isOpen2}
                   isPlain
                   dropdownItems={dropdownItems}
-                  id="notification-2"
+                  id="basic-notification-2"
                 />
               </NotificationDrawerListItemHeader>
               <NotificationDrawerListItemBody timestamp="10 minutes ago">
@@ -141,11 +141,11 @@ class BasicNotificationDrawer extends React.Component {
                 <Dropdown
                   position={DropdownPosition.right}
                   onSelect={this.onSelect}
-                  toggle={<KebabToggle onToggle={this.onToggle(3)} id="toggle-id-3" />}
+                  toggle={<KebabToggle onToggle={this.onToggle(3)} id="basic-toggle-id-3" />}
                   isOpen={isOpen3}
                   isPlain
                   dropdownItems={dropdownItems}
-                  id="notification-3"
+                  id="basic-notification-3"
                 />
               </NotificationDrawerListItemHeader>
               <NotificationDrawerListItemBody timestamp="10 minutes ago">
@@ -162,11 +162,11 @@ class BasicNotificationDrawer extends React.Component {
                 <Dropdown
                   position={DropdownPosition.right}
                   onSelect={this.onSelect}
-                  toggle={<KebabToggle onToggle={this.onToggle(4)} id="toggle-id-4" />}
+                  toggle={<KebabToggle onToggle={this.onToggle(4)} id="basic-toggle-id-4" />}
                   isOpen={isOpen4}
                   isPlain
                   dropdownItems={dropdownItems}
-                  id="notification-4"
+                  id="basic-notification-4"
                 />
               </NotificationDrawerListItemHeader>
               <NotificationDrawerListItemBody timestamp="20 minutes ago">
@@ -183,11 +183,11 @@ class BasicNotificationDrawer extends React.Component {
                   position={DropdownPosition.right}
                   direction={DropdownDirection.up}
                   onSelect={this.onSelect}
-                  toggle={<KebabToggle onToggle={this.onToggle(5)} id="toggle-id-5" />}
+                  toggle={<KebabToggle onToggle={this.onToggle(5)} id="basic-toggle-id-5" />}
                   isOpen={isOpen5}
                   isPlain
                   dropdownItems={dropdownItems}
-                  id="notification-5"
+                  id="basic-notification-5"
                 />
               </NotificationDrawerListItemHeader>
               <NotificationDrawerListItemBody timestamp="30 minutes ago">
@@ -199,11 +199,11 @@ class BasicNotificationDrawer extends React.Component {
                 <Dropdown
                   position={DropdownPosition.right}
                   onSelect={this.onSelect}
-                  toggle={<KebabToggle onToggle={this.onToggle(6)} id="toggle-id-6" />}
+                  toggle={<KebabToggle onToggle={this.onToggle(6)} id="basic-toggle-id-6" />}
                   isOpen={isOpen6}
                   isPlain
                   dropdownItems={dropdownItems}
-                  id="notification-6"
+                  id="basic-notification-6"
                 />
               </NotificationDrawerListItemHeader>
               <NotificationDrawerListItemBody timestamp="35 minutes ago">
@@ -253,8 +253,8 @@ class GroupNotificationDrawer extends React.Component {
     this.state = {
       isOpenMap: null,
       firstGroupExpanded: false,
-      secondGroupExpanded: true,
-      thirdGroupExpanded: false
+      secondGroupExpanded: false,
+      thirdGroupExpanded: true
     };
     this.onToggle = (id, isOpen) => {
       this.setState({
@@ -299,11 +299,11 @@ class GroupNotificationDrawer extends React.Component {
         <NotificationDrawerHeader count={4}>
           <Dropdown
             onSelect={this.onSelect}
-            toggle={<KebabToggle onToggle={isOpen => this.onToggle('toggle-id-0', isOpen)} id="toggle-id-0" />}
-            isOpen={isOpenMap && isOpenMap['toggle-id-0']}
+            toggle={<KebabToggle onToggle={isOpen => this.onToggle('groups-kebab-toggle-1', isOpen)} id="groups-kebab-toggle-1" />}
+            isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-1']}
             isPlain
             dropdownItems={dropdownItems}
-            id="notification-0"
+            id="grouped-notification-1"
             position={DropdownPosition.right}
           />
         </NotificationDrawerHeader>
@@ -326,12 +326,12 @@ class GroupNotificationDrawer extends React.Component {
                       position={DropdownPosition.right}
                       onSelect={this.onSelect}
                       toggle={
-                        <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-5', isOpen)} id="toggle-id-5" />
+                        <KebabToggle onToggle={isOpen => this.onToggle('groups-notification-kebab-toggle-2', isOpen)} id="groups-kebab-toggle-2" />
                       }
-                      isOpen={isOpenMap && isOpenMap['toggle-id-5']}
+                      isOpen={isOpenMap && isOpenMap['groups-notification-kebab-toggle-2']}
                       isPlain
                       dropdownItems={dropdownItems}
-                      id="notification-5"
+                      id="grouped-notification-2"
                     />
                   </NotificationDrawerListItemHeader>
                   <NotificationDrawerListItemBody timestamp="5 minutes ago">
@@ -348,12 +348,12 @@ class GroupNotificationDrawer extends React.Component {
                       position={DropdownPosition.right}
                       onSelect={this.onSelect}
                       toggle={
-                        <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-6', isOpen)} id="toggle-id-6" />
+                        <KebabToggle onToggle={isOpen => this.onToggle('groups-kebab-toggle-3', isOpen)} id="groups-kebab-toggle-3" />
                       }
-                      isOpen={isOpenMap && isOpenMap['toggle-id-6']}
+                      isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-3']}
                       isPlain
                       dropdownItems={dropdownItems}
-                      id="notification-6"
+                      id="grouped-notification-3"
                     />
                   </NotificationDrawerListItemHeader>
                   <NotificationDrawerListItemBody timestamp="10 minutes ago">
@@ -371,12 +371,12 @@ class GroupNotificationDrawer extends React.Component {
                       position={DropdownPosition.right}
                       onSelect={this.onSelect}
                       toggle={
-                        <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-7', isOpen)} id="toggle-id-7" />
+                        <KebabToggle onToggle={isOpen => this.onToggle('groups-kebab-toggle-4', isOpen)} id="groups-kebab-toggle-4" />
                       }
-                      isOpen={isOpenMap && isOpenMap['toggle-id-7']}
+                      isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-4']}
                       isPlain
                       dropdownItems={dropdownItems}
-                      id="notification-7"
+                      id="grouped-notification-4"
                     />
                   </NotificationDrawerListItemHeader>
                   <NotificationDrawerListItemBody timestamp="20 minutes ago">
@@ -394,12 +394,12 @@ class GroupNotificationDrawer extends React.Component {
                       direction={DropdownDirection.up}
                       onSelect={this.onSelect}
                       toggle={
-                        <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-8', isOpen)} id="toggle-id-8" />
+                        <KebabToggle onToggle={isOpen => this.onToggle('groups-kebab-toggle-5', isOpen)} id="groups-kebab-toggle-5" />
                       }
-                      isOpen={isOpenMap && isOpenMap['toggle-id-8']}
+                      isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-5']}
                       isPlain
                       dropdownItems={dropdownItems}
-                      id="notification-8"
+                      id="grouped-notification-5"
                     />
                   </NotificationDrawerListItemHeader>
                   <NotificationDrawerListItemBody timestamp="30 minutes ago">
@@ -408,13 +408,37 @@ class GroupNotificationDrawer extends React.Component {
                 </NotificationDrawerListItem>
               </NotificationDrawerList>
             </NotificationDrawerGroup>
+
             <NotificationDrawerGroup
-              title="Second notification group"
+              title="Second notification group. This is a long title to show how the title will be truncated if it is long and will be shown in a single line."
               isExpanded={secondGroupExpanded}
-              count={2}
+              count={0}
               onExpand={this.toggleSecondDrawer}
+              truncateTitle={1}
             >
               <NotificationDrawerList isHidden={!secondGroupExpanded}>
+                <EmptyState variant={EmptyStateVariant.full}>
+                  <EmptyStateIcon icon={SearchIcon} />
+                  <Title headingLevel="h2" size="lg">
+                    No alerts found
+                  </Title>
+                  <EmptyStateBody>
+                    There are currently no critical alerts firing. There may be firing alerts of other severities or
+                    silenced critical alerts however.
+                  </EmptyStateBody>
+                  <EmptyStatePrimary>
+                    <Button variant="link">Action</Button>
+                  </EmptyStatePrimary>
+                </EmptyState>
+              </NotificationDrawerList>
+            </NotificationDrawerGroup>
+            <NotificationDrawerGroup
+              title="Third notification group"
+              isExpanded={thirdGroupExpanded}
+              count={2}
+              onExpand={this.toggleThirdDrawer}
+            >
+              <NotificationDrawerList isHidden={!thirdGroupExpanded}>
                 <NotificationDrawerListItem variant="info">
                   <NotificationDrawerListItemHeader
                     variant="info"
@@ -425,12 +449,12 @@ class GroupNotificationDrawer extends React.Component {
                       position={DropdownPosition.right}
                       onSelect={this.onSelect}
                       toggle={
-                        <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-9', isOpen)} id="toggle-id-9" />
+                        <KebabToggle onToggle={isOpen => this.onToggle('groups-kebab-toggle-6', isOpen)} id="groups-kebab-toggle-6" />
                       }
-                      isOpen={isOpenMap && isOpenMap['toggle-id-9']}
+                      isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-6']}
                       isPlain
                       dropdownItems={dropdownItems}
-                      id="notification-9"
+                      id="grouped-notification-6"
                     />
                   </NotificationDrawerListItemHeader>
                   <NotificationDrawerListItemBody timestamp="5 minutes ago">
@@ -447,12 +471,12 @@ class GroupNotificationDrawer extends React.Component {
                       position={DropdownPosition.right}
                       onSelect={this.onSelect}
                       toggle={
-                        <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-10', isOpen)} id="toggle-id-10" />
+                        <KebabToggle onToggle={isOpen => this.onToggle('groups-kebab-toggle-7', isOpen)} id="groups-kebab-toggle-7" />
                       }
-                      isOpen={isOpenMap && isOpenMap['toggle-id-10']}
+                      isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-7']}
                       isPlain
                       dropdownItems={dropdownItems}
-                      id="notification-10"
+                      id="grouped-notification-7"
                     />
                   </NotificationDrawerListItemHeader>
                   <NotificationDrawerListItemBody timestamp="10 minutes ago">
@@ -470,12 +494,12 @@ class GroupNotificationDrawer extends React.Component {
                       position={DropdownPosition.right}
                       onSelect={this.onSelect}
                       toggle={
-                        <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-11', isOpen)} id="toggle-id-11" />
+                        <KebabToggle onToggle={isOpen => this.onToggle('groups-kebab-toggle-8', isOpen)} id="groups-kebab-toggle-8" />
                       }
-                      isOpen={isOpenMap && isOpenMap['toggle-id-11']}
+                      isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-8']}
                       isPlain
                       dropdownItems={dropdownItems}
-                      id="notification-11"
+                      id="grouped-notification-8"
                     />
                   </NotificationDrawerListItemHeader>
                   <NotificationDrawerListItemBody timestamp="20 minutes ago">
@@ -493,12 +517,12 @@ class GroupNotificationDrawer extends React.Component {
                       direction={DropdownDirection.up}
                       onSelect={this.onSelect}
                       toggle={
-                        <KebabToggle onToggle={isOpen => this.onToggle('toggle-id-12', isOpen)} id="toggle-id-12" />
+                        <KebabToggle onToggle={isOpen => this.onToggle('groups-kebab-toggle-9', isOpen)} id="groups-kebab-toggle-9" />
                       }
-                      isOpen={isOpenMap && isOpenMap['toggle-id-12']}
+                      isOpen={isOpenMap && isOpenMap['groups-kebab-toggle-9']}
                       isPlain
                       dropdownItems={dropdownItems}
-                      id="notification-12"
+                      id="grouped-notification-9"
                     />
                   </NotificationDrawerListItemHeader>
                   <NotificationDrawerListItemBody timestamp="30 minutes ago">
@@ -507,29 +531,6 @@ class GroupNotificationDrawer extends React.Component {
                 </NotificationDrawerListItem>
               </NotificationDrawerList>
             </NotificationDrawerGroup>
-            <NotificationDrawerGroup
-              title="Third notification group. This is a long title to show how the title will be truncated if it is long and will be shown in a single line."
-              isExpanded={thirdGroupExpanded}
-              count={0}
-              onExpand={this.toggleThirdDrawer}
-              truncateTitle={1}
-            >
-              <NotificationDrawerList isHidden={!thirdGroupExpanded}>
-                <EmptyState variant={EmptyStateVariant.full}>
-                  <EmptyStateIcon icon={SearchIcon} />
-                  <Title headingLevel="h2" size="lg">
-                    No alerts found
-                  </Title>
-                  <EmptyStateBody>
-                    There are currently no critical alerts firing. There may be firing alerts of other severities or
-                    silenced critical alerts however.
-                  </EmptyStateBody>
-                  <EmptyStatePrimary>
-                    <Button variant="link">Action</Button>
-                  </EmptyStatePrimary>
-                </EmptyState>
-              </NotificationDrawerList>
-            </NotificationDrawerGroup>
           </NotificationDrawerGroupList>
         </NotificationDrawerBody>
       </NotificationDrawer>

package/src/components/SearchInput/SearchInput.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/SearchInput/search-input';
 import { Button, ButtonVariant } from '../Button';
 import { Badge } from '../Badge';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
@@ -12,6 +11,7 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
 import { InputGroup } from '../InputGroup';
+import { Popper } from '../../helpers';
 
 export interface SearchAttribute {
   /** The search attribute's value to be provided in the search input's query string.
@@ -83,6 +83,13 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** Delimiter in the query string for pairing attributes with search values.
    * Required whenever attributes are passed as props */
   advancedSearchDelimiter?: string;
+  /** The container to append the menu to.
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * appendTo={() => document.body}
+   * appendTo={document.getElementById('target')}
+   */
+  appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
 }
 
 const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
@@ -112,6 +119,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   nextNavigationButtonAriaLabel = 'Next',
   submitSearchButtonLabel = 'Search',
   isDisabled = false,
+  appendTo,
   ...props
 }: SearchInputProps) => {
   const [isSearchMenuOpen, setIsSearchMenuOpen] = React.useState(false);
@@ -277,11 +285,9 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   if (!!onSearch || attributes.length > 0 || !!onToggleAdvancedSearch) {
     if (attributes.length > 0) {
-      return (
-        <div className={css(className, styles.searchInput)} ref={searchInputRef} {...props}>
-          {buildSearchTextInputGroupWithExtraButtons()}
+      const AdvancedSearch = (
+        <span>
           <AdvancedSearchMenu
-            className={styles.searchInputMenu}
             value={value}
             parentRef={searchInputRef}
             parentInputRef={searchInputInputRef}
@@ -298,8 +304,29 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
             getAttrValueMap={getAttrValueMap}
             isSearchMenuOpen={isSearchMenuOpen}
           />
+        </span>
+      );
+
+      const AdvancedSearchWithPopper = (
+        <div className={css(className)} ref={searchInputRef} {...props}>
+          <Popper
+            trigger={buildSearchTextInputGroupWithExtraButtons()}
+            popper={AdvancedSearch}
+            isVisible={isSearchMenuOpen}
+            enableFlip={true}
+            appendTo={() => appendTo || searchInputRef.current}
+          />
         </div>
       );
+
+      const AdvancedSearchInline = (
+        <div className={css(className)} ref={searchInputRef} {...props}>
+          {buildSearchTextInputGroupWithExtraButtons()}
+          {AdvancedSearch}
+        </div>
+      );
+
+      return appendTo !== 'inline' ? AdvancedSearchWithPopper : AdvancedSearchInline;
     }
 
     return buildSearchTextInputGroupWithExtraButtons({ ...searchInputProps });

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

@@ -81,6 +81,7 @@ describe('SearchInput', () => {
   test('advanced search with custom attributes', () => {
     const { asFragment } = render(
       <SearchInput
+        data-testid="test-id"
         attributes={[
           { attr: 'username', display: 'Username' },
           { attr: 'firstname', display: 'First name' }
@@ -102,7 +103,43 @@ describe('SearchInput', () => {
 
     userEvent.click(screen.getByRole('button', { name: 'Search' }));
 
+    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('First name'))
+
     expect(props.onSearch).toHaveBeenCalled();
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('advanced search with custom attributes and appendTo="inline', () => {
+    const {container}  = render(
+    <SearchInput
+        data-testid="test-id"
+        attributes={[
+          { attr: 'test', display: 'test' },
+        ]}
+        appendTo='inline'
+      />
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    
+    expect(screen.getByTestId('test-id')).toContainElement(screen.getByText('test'))
+  });
+
+  test('advanced search with custom attributes and appendTo external DOM element', () => {
+    const {container}  = render(
+    <SearchInput
+        data-testid="test-id"
+        attributes={[
+          { attr: 'test', display: 'test' },
+        ]}
+        appendTo={document.body}
+      />
+    );
+
+    userEvent.click(screen.getByRole('button', { name: 'Open advanced search' }));
+    
+    expect(screen.getByTestId('test-id')).not.toContainElement(screen.getByText('test'))
+    expect(document.body).toContainElement(screen.getByText('test'))
+  });
 });

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

@@ -3,7 +3,7 @@
 exports[`SearchInput advanced search 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-search-input"
+    class=""
   >
     <div
       class="pf-c-input-group"
@@ -125,7 +125,8 @@ exports[`SearchInput advanced search 1`] = `
 exports[`SearchInput advanced search with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-search-input"
+    class=""
+    data-testid="test-id"
   >
     <div
       class="pf-c-input-group"
@@ -194,9 +195,9 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       </div>
       <button
         aria-disabled="false"
-        aria-expanded="false"
+        aria-expanded="true"
         aria-label="Open advanced search"
-        class="pf-c-button pf-m-control"
+        class="pf-c-button pf-m-control pf-m-expanded"
         data-ouia-component-id="OUIA-Generated-Button-control-8"
         data-ouia-component-type="PF4/Button"
         data-ouia-safe="true"
@@ -240,6 +241,194 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
         </svg>
       </button>
     </div>
+    <span
+      class=""
+      style="position: absolute; left: 0px; top: 0px; z-index: 9999; width: 0px;"
+    >
+      <div
+        class="pf-c-panel pf-m-raised"
+      >
+        <div
+          class="pf-c-panel__main"
+        >
+          <div
+            class="pf-c-panel__main-body"
+          >
+            <form
+              class="pf-c-form"
+              novalidate=""
+            >
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-label"
+                >
+                  <label
+                    class="pf-c-form__label"
+                    for="username_0"
+                  >
+                    <span
+                      class="pf-c-form__label-text"
+                    >
+                      Username
+                    </span>
+                  </label>
+                   
+                </div>
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="pf-c-form-control"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+                    data-ouia-component-type="PF4/TextInput"
+                    data-ouia-safe="true"
+                    id="username_0"
+                    type="text"
+                    value="player"
+                  />
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-label"
+                >
+                  <label
+                    class="pf-c-form__label"
+                    for="firstname_1"
+                  >
+                    <span
+                      class="pf-c-form__label-text"
+                    >
+                      First name
+                    </span>
+                  </label>
+                   
+                </div>
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="pf-c-form-control"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+                    data-ouia-component-type="PF4/TextInput"
+                    data-ouia-safe="true"
+                    id="firstname_1"
+                    type="text"
+                    value="john"
+                  />
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-label"
+                >
+                  <label
+                    class="pf-c-form__label"
+                    for="pf-random-id-2"
+                  >
+                    <span
+                      class="pf-c-form__label-text"
+                    >
+                      Has words
+                    </span>
+                  </label>
+                   
+                </div>
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <input
+                    aria-invalid="false"
+                    class="pf-c-form-control"
+                    data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+                    data-ouia-component-type="PF4/TextInput"
+                    data-ouia-safe="true"
+                    id="pf-random-id-2"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group"
+              >
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <button
+                    aria-disabled="false"
+                    class="pf-c-button pf-m-link pf-m-inline"
+                    data-ouia-component-id="OUIA-Generated-Button-link-1"
+                    data-ouia-component-type="PF4/Button"
+                    data-ouia-safe="true"
+                    type="button"
+                  >
+                    Link
+                    <span
+                      class="pf-c-button__icon pf-m-end"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style="vertical-align: -0.125em;"
+                        viewBox="0 0 448 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                </div>
+              </div>
+              <div
+                class="pf-c-form__group pf-m-action"
+              >
+                <div
+                  class="pf-c-form__group-control"
+                >
+                  <div
+                    class="pf-c-form__actions"
+                  >
+                    <button
+                      aria-disabled="false"
+                      class="pf-c-button pf-m-primary"
+                      data-ouia-component-id="OUIA-Generated-Button-primary-1"
+                      data-ouia-component-type="PF4/Button"
+                      data-ouia-safe="true"
+                      type="submit"
+                    >
+                      Search
+                    </button>
+                    <button
+                      aria-disabled="false"
+                      class="pf-c-button pf-m-link"
+                      data-ouia-component-id="OUIA-Generated-Button-link-2"
+                      data-ouia-component-type="PF4/Button"
+                      data-ouia-safe="true"
+                      type="reset"
+                    >
+                      Reset
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </span>
   </div>
 </DocumentFragment>
 `;