feat(SearchInput): enable animations

Author: kmcfaul

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.20",
+    "@patternfly/patternfly": "6.3.0-prerelease.32",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"

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

@@ -14,6 +14,7 @@ import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../
 import { InputGroup, InputGroupItem } from '../InputGroup';
 import { Popper } from '../../helpers';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
+import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
 
 /** Properties for adding search attributes to an advanced search input. These properties must
  * be passed in as an object within an array to the search input component's attribute property.
@@ -41,6 +42,8 @@ export interface SearchInputExpandable {
   onToggleExpand: (event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => void;
   /** An accessible label for the expandable search input toggle. */
   toggleAriaLabel: string;
+  /** Flag indicating animations should be enabled when the search input expands and collapses. */
+  hasAnimations?: boolean;
 }
 
 /** The main search input component. */
@@ -177,7 +180,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
   const popperRef = useRef(null);
   const [focusAfterExpandChange, setFocusAfterExpandChange] = useState(false);
 
-  const { isExpanded, onToggleExpand, toggleAriaLabel } = expandableInput || {};
+  const { isExpanded, onToggleExpand, toggleAriaLabel, hasAnimations } = expandableInput || {};
 
   useEffect(() => {
     // this effect and the focusAfterExpandChange variable are needed to focus the input/toggle as needed when the
@@ -349,7 +352,31 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     </TextInputGroup>
   );
 
-  const expandableToggle = (
+  const expandToggleButton = (
+    <Button
+      variant={ButtonVariant.plain}
+      aria-label={toggleAriaLabel}
+      aria-expanded={isExpanded}
+      icon={<SearchIcon />}
+      onClick={onExpandHandler}
+      ref={searchInputExpandableToggleRef}
+      {...(isExpanded && { inert: '' })}
+    />
+  );
+
+  const collapseToggleButton = (
+    <Button
+      variant={ButtonVariant.plain}
+      aria-label={toggleAriaLabel}
+      aria-expanded={isExpanded}
+      icon={<TimesIcon />}
+      onClick={onExpandHandler}
+      ref={searchInputExpandableToggleRef}
+      {...(!isExpanded && { inert: '' })}
+    />
+  );
+
+  const singleButtonToggle = (
     <Button
       variant={ButtonVariant.plain}
       aria-label={toggleAriaLabel}
@@ -360,10 +387,34 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     />
   );
 
-  const buildExpandableSearchInput = ({ ...searchInputProps } = {}) => (
+  const expandableToggle = (
+    <>
+      {!hasAnimations && <InputGroupItem isPlain>{singleButtonToggle}</InputGroupItem>}
+      {hasAnimations && (
+        <>
+          <InputGroupItem className={inputGroupStyles.modifiers.searchExpand} isPlain>
+            {expandToggleButton}
+          </InputGroupItem>
+          <InputGroupItem className={inputGroupStyles.modifiers.searchAction} isPlain>
+            {collapseToggleButton}
+          </InputGroupItem>
+        </>
+      )}
+    </>
+  );
+
+  const buildExpandableSearchInput = ({ ...searchInputProps }: any = {}) => (
     <InputGroup {...searchInputProps}>
-      <InputGroupItem isFill>{buildTextInputGroup()} </InputGroupItem>
-      <InputGroupItem isPlain>{expandableToggle}</InputGroupItem>
+      <InputGroupItem
+        isFill
+        {...(hasAnimations && { className: inputGroupStyles.modifiers.searchInput })}
+        {...(!isExpanded && {
+          inert: ''
+        })}
+      >
+        {buildTextInputGroup()}
+      </InputGroupItem>
+      {expandableToggle}
     </InputGroup>
   );
 
@@ -377,9 +428,19 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const buildSearchTextInputGroupWithExtraButtons = ({ ...searchInputProps } = {}) => (
     <InputGroup ref={triggerRef} {...searchInputProps}>
-      <InputGroupItem isFill>{buildTextInputGroup()}</InputGroupItem>
+      <InputGroupItem
+        isFill
+        {...(expandableInput && hasAnimations && { className: inputGroupStyles.modifiers.searchInput })}
+        {...(expandableInput &&
+          hasAnimations &&
+          !isExpanded && {
+            inert: ''
+          })}
+      >
+        {buildTextInputGroup()}
+      </InputGroupItem>
       {(attributes.length > 0 || onToggleAdvancedSearch) && (
-        <InputGroupItem isPlain>
+        <InputGroupItem isPlain {...(hasAnimations && { className: inputGroupStyles.modifiers.searchAction })}>
           <Button
             className={isSearchMenuOpen && 'pf-m-expanded'}
             variant={ButtonVariant.control}
@@ -392,7 +453,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         </InputGroupItem>
       )}
       {!!onSearch && (
-        <InputGroupItem>
+        <InputGroupItem {...(hasAnimations && { className: inputGroupStyles.modifiers.searchAction })}>
           <Button
             type="submit"
             variant={ButtonVariant.control}
@@ -413,11 +474,15 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const searchInputProps = {
     ...props,
-    className: className && css(className),
+    className: css(
+      expandableInput && hasAnimations && inputGroupStyles.modifiers.searchExpandable,
+      expandableInput && hasAnimations && isExpanded && inputGroupStyles.modifiers.expanded,
+      className && css(className)
+    ),
     innerRef: searchInputRef
   };
 
-  if (!!expandableInput && !isExpanded) {
+  if (!!expandableInput && !isExpanded && !hasAnimations) {
     return (
       <InputGroup {...searchInputProps}>
         <InputGroupItem>{expandableToggle}</InputGroupItem>
@@ -452,7 +517,12 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
       const AdvancedSearchWithPopper = (
         <div className={css(className)} ref={searchInputRef} {...props}>
           <Popper
-            trigger={buildSearchTextInputGroupWithExtraButtons()}
+            trigger={buildSearchTextInputGroupWithExtraButtons({
+              className: css(
+                expandableInput && hasAnimations && inputGroupStyles.modifiers.searchExpandable,
+                expandableInput && hasAnimations && isExpanded && inputGroupStyles.modifiers.expanded
+              )
+            })}
             triggerRef={triggerRef}
             popper={AdvancedSearch}
             popperRef={popperRef}
@@ -466,7 +536,12 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
       const AdvancedSearchInline = (
         <div className={css(className)} ref={searchInputRef} {...props}>
-          {buildSearchTextInputGroupWithExtraButtons()}
+          {buildSearchTextInputGroupWithExtraButtons({
+            className: css(
+              expandableInput && hasAnimations && inputGroupStyles.modifiers.searchExpandable,
+              expandableInput && hasAnimations && isExpanded && inputGroupStyles.modifiers.expanded
+            )
+          })}
           {AdvancedSearch}
         </div>
       );

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

@@ -13,44 +13,53 @@ import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
 ### Basic
 
 ```ts file='./SearchInputBasic.tsx'
+
 ```
 
 ### Match with result count
 
 ```ts file='./SearchInputWithResultCount.tsx'
+
 ```
 
 ### Match with navigable options
 
 ```ts file='./SearchInputWithNavigableOptions.tsx'
+
 ```
 
 ### With submit button
 
 ```ts file='./SearchInputWithSubmitButton.tsx'
+
 ```
 
 ### Focus search input using ref
 
 ```ts file='./SearchInputFocusSearch.tsx'
+
 ```
 
 ### With expandable button
 
+Animations on the expansion and collapse of the search input may be opted into by passing `hasAnimations` to the `expandableInput` object.
+
 ```ts file='./SearchInputWithExpandable.tsx'
+
 ```
 
 ### Advanced
 
 The search input component can be used to dynamically build a one to one attribute-value advanced search.
 Using the `attributes` prop alongside the `advancedSearchDelimiter` will expose this functionality, as demonstrated in
-the following example. The search input component can also be used as a composable component and paired with a Popper 
-or other elements to build a completely custom advanced search form. This feature is demonstrated 
+the following example. The search input component can also be used as a composable component and paired with a Popper
+or other elements to build a completely custom advanced search form. This feature is demonstrated
 in the search input's <a href="/components/search-input/react-demos">react demos</a>.
 
 The values used in the attribute-value form fields may contain spaces. The values containing spaces
 should be wrapped with quotes inside the summary search string in the input field. If the latter is
 autogenerated from the individual fields the quotes will be autoplaced.
 
 ```ts file='./SearchInputAdvanced.tsx'
+
 ```

packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -20,7 +20,12 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
       value={value}
       onChange={(_event, value) => onChange(value)}
       onClear={() => onChange('')}
-      expandableInput={{ isExpanded, onToggleExpand, toggleAriaLabel: 'Expandable search input toggle' }}
+      expandableInput={{
+        isExpanded,
+        onToggleExpand,
+        toggleAriaLabel: 'Expandable search input toggle',
+        hasAnimations: true
+      }}
     />
   );
 };

packages/react-docs/package.json

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.20",
+    "@patternfly/patternfly": "6.3.0-prerelease.32",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",

packages/react-icons/package.json

@@ -33,7 +33,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.3.0-prerelease.20",
+    "@patternfly/patternfly": "6.3.0-prerelease.32",
     "fs-extra": "^11.3.0",
     "tslib": "^2.8.1"
   },

packages/react-styles/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.3.0-prerelease.20",
+    "@patternfly/patternfly": "6.3.0-prerelease.32",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.0"
   },

packages/react-tokens/package.json

@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@adobe/css-tools": "^4.4.2",
-    "@patternfly/patternfly": "6.3.0-prerelease.20",
+    "@patternfly/patternfly": "6.3.0-prerelease.32",
     "fs-extra": "^11.3.0"
   }
 }

yarn.lock

@@ -3639,10 +3639,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.3.0-prerelease.20":
-  version: 6.3.0-prerelease.20
-  resolution: "@patternfly/patternfly@npm:6.3.0-prerelease.20"
-  checksum: 10c0/ea6ea0bdc09fe505f07554406f03151c63eba6e66c8abd8b35a7f67bdacfa3bcf9963e20df1b4792e22ca3c8763c926dc9ab18a089288e04f922d76c3972b80f
+"@patternfly/patternfly@npm:6.3.0-prerelease.32":
+  version: 6.3.0-prerelease.32
+  resolution: "@patternfly/patternfly@npm:6.3.0-prerelease.32"
+  checksum: 10c0/c56f1f3b244ad747d755c4d3a96f364252caa8e47387c130e10e0cdf5d26a43225a6884aa24607500a01f78d2c81962bc734737d589f2dd7a7f58817ead3fd9a
   languageName: node
   linkType: hard
 
@@ -3740,7 +3740,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-core@workspace:packages/react-core"
   dependencies:
-    "@patternfly/patternfly": "npm:6.3.0-prerelease.20"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.32"
     "@patternfly/react-icons": "workspace:^"
     "@patternfly/react-styles": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
@@ -3761,7 +3761,7 @@ __metadata:
   resolution: "@patternfly/react-docs@workspace:packages/react-docs"
   dependencies:
     "@patternfly/documentation-framework": "npm:^6.5.20"
-    "@patternfly/patternfly": "npm:6.3.0-prerelease.20"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.32"
     "@patternfly/patternfly-a11y": "npm:5.1.0"
     "@patternfly/react-charts": "workspace:^"
     "@patternfly/react-code-editor": "workspace:^"
@@ -3801,7 +3801,7 @@ __metadata:
     "@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
-    "@patternfly/patternfly": "npm:6.3.0-prerelease.20"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.32"
     fs-extra: "npm:^11.3.0"
     tslib: "npm:^2.8.1"
   peerDependencies:
@@ -3885,7 +3885,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-styles@workspace:packages/react-styles"
   dependencies:
-    "@patternfly/patternfly": "npm:6.3.0-prerelease.20"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.32"
     change-case: "npm:^5.4.4"
     fs-extra: "npm:^11.3.0"
   languageName: unknown
@@ -3927,7 +3927,7 @@ __metadata:
   resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
   dependencies:
     "@adobe/css-tools": "npm:^4.4.2"
-    "@patternfly/patternfly": "npm:6.3.0-prerelease.20"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.32"
     fs-extra: "npm:^11.3.0"
   languageName: unknown
   linkType: soft