@patternfly/react-core 5.0.0-alpha.104 → 5.0.0-alpha.106

package/src/demos/PrimaryDetail.md

@@ -25,6 +25,7 @@ import swaggerIcon from './Card/camel-swagger-java_200x150.png';
 import azureIcon from './Card/FuseConnector_Icons_AzureServices.png';
 import restIcon from './Card/FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { data } from '@patternfly/react-core/src/demos/Card/CardData.jsx';
 
 ## Demos
 
@@ -58,6 +59,7 @@ import {
   Flex,
   FlexItem,
   InputGroup,
+  InputGroupItem,
   PageSection,
   PageSectionVariants,
   Progress,
@@ -197,17 +199,21 @@ class PrimaryDetailFullPage extends React.Component {
       <React.Fragment>
         <ToolbarItem>
           <InputGroup>
-            <TextInput
-              name="full-page-data-toolbar-input1"
-              id="full-page-data-toolbar-input1"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <InputGroupItem isFill>
+              <TextInput
+                name="full-page-data-toolbar-input1"
+                id="full-page-data-toolbar-input1"
+                type="search"
+                aria-label="search input example"
+                onChange={this.onInputChange}
+                value={inputValue}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button variant={ButtonVariant.control} aria-label="search button for search input">
+                <SearchIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">
@@ -521,6 +527,7 @@ import {
   Flex,
   FlexItem,
   InputGroup,
+  InputGroupItem,
   PageSection,
   PageSectionVariants,
   Progress,
@@ -659,17 +666,21 @@ class PrimaryDetailContentPadding extends React.Component {
       <React.Fragment>
         <ToolbarItem>
           <InputGroup>
-            <TextInput
-              name="content-padding-data-toolbar-input1"
-              id="content-padding-data-toolbar-input1"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <InputGroupItem isFill>
+              <TextInput
+                name="content-padding-data-toolbar-input1"
+                id="content-padding-data-toolbar-input1"
+                type="search"
+                aria-label="search input example"
+                onChange={this.onInputChange}
+                value={inputValue}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button variant={ButtonVariant.control} aria-label="search button for search input">
+                <SearchIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">
@@ -1009,6 +1020,7 @@ import swaggerIcon from './camel-swagger-java_200x150.png';
 import azureIcon from './FuseConnector_Icons_AzureServices.png';
 import restIcon from './FuseConnector_Icons_REST.png';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import { data } from '@patternfly/react-core/src/demos/Card/CardData.jsx';
 
 class PrimaryDetailCardView extends React.Component {
   constructor(props) {
@@ -1027,7 +1039,7 @@ class PrimaryDetailCardView extends React.Component {
       filters: {
         products: []
       },
-      res: [],
+      cardData: data,
       isUpperToolbarDropdownOpen: false,
       isUpperToolbarKebabDropdownOpen: false,
       isLowerToolbarDropdownOpen: false,
@@ -1253,9 +1265,9 @@ class PrimaryDetailCardView extends React.Component {
     this.deleteItem = (event, item) => {
       event.stopPropagation();
       const filter = (getter) => (val) => getter(val) !== item.id;
-      const filteredCards = this.state.res.filter(filter(({ id }) => id));
+      const filteredCards = this.state.cardData.filter(filter(({ id }) => id));
       this.setState({
-        res: filteredCards,
+        cardData: filteredCards,
         selectedItems: this.state.selectedItems.filter(filter((id) => id)),
         totalItemCount: this.state.totalItemCount - 1,
         isDrawerExpanded: false,
@@ -1287,27 +1299,15 @@ class PrimaryDetailCardView extends React.Component {
   }
 
   getAllItems() {
-    const { res } = this.state;
+    const { cardData } = this.state;
     const collection = [];
-    for (const items of res) {
+    for (const items of cardData) {
       collection.push(items.id);
     }
 
     return collection;
   }
 
-  fetch(page, perPage) {
-    fetch(`https://my-json-server.typicode.com/jenny-s51/cardviewdata/posts?_page=${page}&_limit=${perPage}`)
-      .then((resp) => resp.json())
-      .then((resp) => this.setState({ res: resp, perPage, page }))
-      .then(() => this.updateSelected())
-      .catch((err) => this.setState({ error: err }));
-  }
-
-  componentDidMount() {
-    this.fetch(this.state.page, this.state.perPage);
-  }
-
   buildSelectDropdown() {
     const { splitButtonDropdownIsOpen, selectedItems, areAllSelected } = this.state;
     const numSelected = selectedItems.length;
@@ -1362,7 +1362,7 @@ class PrimaryDetailCardView extends React.Component {
   }
 
   render() {
-    const { isDrawerExpanded, isChecked, selectedItems, activeCard, isLowerToolbarKebabDropdownOpen, filters, res } =
+    const { isDrawerExpanded, isChecked, selectedItems, activeCard, isLowerToolbarKebabDropdownOpen, filters, cardData } =
       this.state;
 
     const toolbarKebabDropdownItems = (
@@ -1428,8 +1428,8 @@ class PrimaryDetailCardView extends React.Component {
 
     const filtered =
       filters.products.length > 0
-        ? res.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
-        : res;
+        ? cardData.filter((card) => filters.products.length === 0 || filters.products.includes(card.name))
+        : cardData;
 
     const icons = {
       pfIcon,
@@ -1996,6 +1996,7 @@ import {
   Flex,
   FlexItem,
   InputGroup,
+  InputGroupItem,
   PageSection,
   PageSectionVariants,
   Progress,
@@ -2134,17 +2135,21 @@ class PrimaryDetailInlineModifier extends React.Component {
       <React.Fragment>
         <ToolbarItem>
           <InputGroup>
-            <TextInput
-              name="inline-modifier-input"
-              id="inline-modifier-input"
-              type="search"
-              aria-label="search input example"
-              onChange={this.onInputChange}
-              value={inputValue}
-            />
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <InputGroupItem isFill>
+              <TextInput
+                name="inline-modifier-input"
+                id="inline-modifier-input"
+                type="search"
+                aria-label="search input example"
+                onChange={this.onInputChange}
+                value={inputValue}
+              />
+            </InputGroupItem>
+            <InputGroupItem>
+              <Button variant={ButtonVariant.control} aria-label="search button for search input">
+                <SearchIcon />
+              </Button>
+            </InputGroupItem>
           </InputGroup>
         </ToolbarItem>
         <ToolbarGroup variant="filter-group">

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {
   CalendarMonth,
   InputGroup,
+  InputGroupItem,
   TextInput,
   Button,
   Popover,
@@ -89,15 +90,17 @@ export const DateTimePicker: React.FunctionComponent = () => {
         hasAutoWidth
       >
         <InputGroup>
-          <TextInput
-            type="text"
-            id="date-time"
-            aria-label="date and time picker demo"
-            value={valueDate + ' ' + valueTime}
-            isReadOnly
-          />
-          {calendarButton}
-          {time}
+          <InputGroupItem>
+            <TextInput
+              type="text"
+              id="date-time"
+              aria-label="date and time picker demo"
+              value={valueDate + ' ' + valueTime}
+              isReadOnly
+            />
+          </InputGroupItem>
+          <InputGroupItem>{calendarButton}</InputGroupItem>
+          <InputGroupItem>{time}</InputGroupItem>
         </InputGroup>
       </Popover>
     </div>

package/src/deprecated/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap

@@ -84,60 +84,68 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
             class="pf-v5-c-input-group"
           >
             <div
-              class="pf-v5-c-text-input-group"
+              class="pf-v5-c-input-group__item pf-m-fill"
             >
               <div
-                class="pf-v5-c-text-input-group__main pf-m-icon"
+                class="pf-v5-c-text-input-group"
               >
-                <span
-                  class="pf-v5-c-text-input-group__text"
+                <div
+                  class="pf-v5-c-text-input-group__main pf-m-icon"
                 >
                   <span
-                    class="pf-v5-c-text-input-group__icon"
+                    class="pf-v5-c-text-input-group__text"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      role="img"
-                      viewBox="0 0 512 512"
+                    <span
+                      class="pf-v5-c-text-input-group__icon"
                     >
-                      <path
-                        d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        role="img"
+                        viewBox="0 0 512 512"
+                      >
+                        <path
+                          d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                        />
+                      </svg>
+                    </span>
+                    <input
+                      aria-label="Search input"
+                      class="pf-v5-c-text-input-group__text-input"
+                      placeholder="Search"
+                      type="text"
+                      value=""
+                    />
                   </span>
-                  <input
-                    aria-label="Search input"
-                    class="pf-v5-c-text-input-group__text-input"
-                    placeholder="Search"
-                    type="text"
-                    value=""
-                  />
-                </span>
+                </div>
               </div>
             </div>
-            <button
-              aria-disabled="false"
-              aria-label="Search menu items"
-              class="pf-v5-c-button pf-m-control"
-              data-ouia-component-id="OUIA-Generated-Button-control-1"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe="true"
-              type="submit"
+            <div
+              class="pf-v5-c-input-group__item pf-m-plain"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                role="img"
-                viewBox="0 0 448 512"
+              <button
+                aria-disabled="false"
+                aria-label="Search menu items"
+                class="pf-v5-c-button pf-m-control"
+                data-ouia-component-id="OUIA-Generated-Button-control-1"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe="true"
+                type="submit"
               >
-                <path
-                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 448 512"
+                >
+                  <path
+                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
         <ul
@@ -247,60 +255,68 @@ exports[`ContextSelector Renders in strict mode 1`] = `
             class="pf-v5-c-input-group"
           >
             <div
-              class="pf-v5-c-text-input-group"
+              class="pf-v5-c-input-group__item pf-m-fill"
             >
               <div
-                class="pf-v5-c-text-input-group__main pf-m-icon"
+                class="pf-v5-c-text-input-group"
               >
-                <span
-                  class="pf-v5-c-text-input-group__text"
+                <div
+                  class="pf-v5-c-text-input-group__main pf-m-icon"
                 >
                   <span
-                    class="pf-v5-c-text-input-group__icon"
+                    class="pf-v5-c-text-input-group__text"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="pf-v5-svg"
-                      fill="currentColor"
-                      role="img"
-                      viewBox="0 0 512 512"
+                    <span
+                      class="pf-v5-c-text-input-group__icon"
                     >
-                      <path
-                        d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                      />
-                    </svg>
+                      <svg
+                        aria-hidden="true"
+                        class="pf-v5-svg"
+                        fill="currentColor"
+                        role="img"
+                        viewBox="0 0 512 512"
+                      >
+                        <path
+                          d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                        />
+                      </svg>
+                    </span>
+                    <input
+                      aria-label="Search input"
+                      class="pf-v5-c-text-input-group__text-input"
+                      placeholder="Search"
+                      type="text"
+                      value=""
+                    />
                   </span>
-                  <input
-                    aria-label="Search input"
-                    class="pf-v5-c-text-input-group__text-input"
-                    placeholder="Search"
-                    type="text"
-                    value=""
-                  />
-                </span>
+                </div>
               </div>
             </div>
-            <button
-              aria-disabled="false"
-              aria-label="Search menu items"
-              class="pf-v5-c-button pf-m-control"
-              data-ouia-component-id="OUIA-Generated-Button-control-3"
-              data-ouia-component-type="PF4/Button"
-              data-ouia-safe="true"
-              type="submit"
+            <div
+              class="pf-v5-c-input-group__item pf-m-plain"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v5-svg"
-                fill="currentColor"
-                role="img"
-                viewBox="0 0 448 512"
+              <button
+                aria-disabled="false"
+                aria-label="Search menu items"
+                class="pf-v5-c-button pf-m-control"
+                data-ouia-component-id="OUIA-Generated-Button-control-3"
+                data-ouia-component-type="PF4/Button"
+                data-ouia-safe="true"
+                type="submit"
               >
-                <path
-                  d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  role="img"
+                  viewBox="0 0 448 512"
+                >
+                  <path
+                    d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
         <ul