@patternfly/react-core 4.232.8 → 4.232.11

package/src/components/SearchInput/examples/SearchInputAdvanced.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Button, Checkbox, FormGroup, SearchInput } from '@patternfly/react-core';
+import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+
+export const SearchInputAdvanced: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('username:player firstname:john');
+  const [useEqualsAsDelimiter, setUseEqualsAsDelimiter] = React.useState(false);
+  const [useCustomFooter, setUseCustomFooter] = React.useState(false);
+
+  const toggleDelimiter = (checked: boolean) => {
+    setValue(value.replace(/:|=/g, checked ? '=' : ':'));
+    setUseEqualsAsDelimiter(checked);
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Use equal sign as search attribute delimiter"
+        isChecked={useEqualsAsDelimiter}
+        onChange={toggleDelimiter}
+        aria-label="change delimiter checkbox"
+        id="toggle-delimiter"
+        name="toggle-delimiter"
+      />
+      <Checkbox
+        label="Add custom footer element after the attributes in the menu"
+        isChecked={useCustomFooter}
+        onChange={value => setUseCustomFooter(value)}
+        aria-label="change use custom footer checkbox"
+        id="toggle-custom-footer"
+        name="toggle-custom-footer"
+      />
+      <br />
+      <SearchInput
+        attributes={[
+          { attr: 'username', display: 'Username' },
+          { attr: 'firstname', display: 'First name' }
+        ]}
+        advancedSearchDelimiter={useEqualsAsDelimiter ? '=' : ':'}
+        value={value}
+        onChange={setValue}
+        onSearch={setValue}
+        onClear={() => setValue('')}
+        formAdditionalItems={
+          useCustomFooter ? (
+            <FormGroup>
+              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+                Link
+              </Button>
+            </FormGroup>
+          ) : null
+        }
+      />
+    </>
+  );
+};

package/src/components/SearchInput/examples/SearchInputBasic.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputBasic: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+
+  const onChange = (value: string) => {
+    setValue(value);
+  };
+
+  return <SearchInput placeholder="Find by name" value={value} onChange={onChange} onClear={() => onChange('')} />;
+};

package/src/components/SearchInput/examples/SearchInputFocusSearch.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { SearchInput, Button } from '@patternfly/react-core';
+
+export const SearchInputFocusSearch: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const ref: React.MutableRefObject<HTMLInputElement | null> = React.useRef(null);
+
+  return (
+    <>
+      <SearchInput ref={ref} value={value} onChange={setValue} onClear={() => setValue('')} />
+      <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
+    </>
+  );
+};

package/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [resultsCount, setResultsCount] = React.useState(0);
+  const [currentResult, setCurrentResult] = React.useState(1);
+
+  const onChange = (value: string) => {
+    setValue(value);
+    setResultsCount(3);
+  };
+
+  const onClear = () => {
+    setValue('');
+    setResultsCount(0);
+    setCurrentResult(1);
+  };
+
+  const onNext = () => {
+    const newCurrentResult = currentResult + 1;
+    setCurrentResult(newCurrentResult > resultsCount ? resultsCount : newCurrentResult);
+  };
+
+  const onPrevious = () => {
+    const newCurrentResult = currentResult - 1;
+    setCurrentResult(newCurrentResult > 0 ? newCurrentResult : 1);
+  };
+
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={onChange}
+      onClear={onClear}
+      isNextNavigationButtonDisabled={currentResult === 3}
+      isPreviousNavigationButtonDisabled={currentResult === 1}
+      resultsCount={`${currentResult} / ${resultsCount}`}
+      onNextClick={onNext}
+      onPreviousClick={onPrevious}
+    />
+  );
+};

package/src/components/SearchInput/examples/SearchInputWithResultCount.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputWithResultCount: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [resultsCount, setResultsCount] = React.useState(0);
+
+  const onChange = (value: string) => {
+    setValue(value);
+    setResultsCount(3);
+  };
+
+  const onClear = () => {
+    setValue('');
+    setResultsCount(0);
+  };
+
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={onChange}
+      onClear={onClear}
+      resultsCount={resultsCount}
+    />
+  );
+};

package/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { SearchInput } from '@patternfly/react-core';
+
+export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+
+  return (
+    <SearchInput
+      placeholder="Find by name"
+      value={value}
+      onChange={setValue}
+      onSearch={setValue}
+      onClear={() => setValue('')}
+    />
+  );
+};

package/src/demos/JumpLinks.md

@@ -10,6 +10,7 @@ import DashboardWrapper from './examples/DashboardWrapper';
 JumpLinks has a scrollspy built-in to make your implementation easier. When implementing JumpLinks be sure to:
 
 1. Find the correct `scrollableSelector` for your page via [Firefox's debugging scrollable overflow](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Debug_Scrollable_Overflow) or by adding `hasOverflowScroll` to a [PageSection](/components/page#pagesection) or [PageGroup](/components/page#pagegroup).
+   - If you add `hasOverflowScroll` to a Page sub-component you should also add a relevant aria-label to that component as well.
 2. Provide `href`s to your JumpLinksItems which match the `id` of elements you want to spy on. If you wish to scroll to a different item than you're linking to use the `node` prop.
 
 ### Scrollspy with subsections

package/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

@@ -34,7 +34,12 @@ export const Name = () => {
             <Switch label="Always show BackToTopButton" onChange={handleChange} isChecked={isAlwaysVisible} />
           </TextContent>
         </PageSection>
-        <PageSection hasOverflowScroll name="scrolling-section" tabIndex={0}>
+        <PageSection
+          hasOverflowScroll
+          name="scrolling-section"
+          tabIndex={0}
+          aria-label="Scrollable container of demonstration cards with a back to top element"
+        >
           <Gallery hasGutter>
             {Array.apply(0, Array(60)).map((_x: any, i: number) => (
               <GalleryItem key={i}>