npm - @patternfly/react-core - Versions diffs - 6.0.0-alpha.75 → 6.0.0-alpha.77 - Mend

@patternfly/react-core 6.0.0-alpha.75 → 6.0.0-alpha.77

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (449) hide show

package/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx CHANGED Viewed

@@ -152,30 +152,26 @@ export const DualListSelectorSearch: React.FunctionComponent = () => {
           isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
-        >
-          <AngleRightIcon />
-        </DualListSelectorControl>
+          icon={<AngleRightIcon />}
+        />
         <DualListSelectorControl
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
-        >
-          <AngleDoubleRightIcon />
-        </DualListSelectorControl>
+          icon={<AngleDoubleRightIcon />}
+        />
         <DualListSelectorControl
           isDisabled={chosenOptions.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
-        >
-          <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
+          icon={<AngleDoubleLeftIcon />}
+        />
         <DualListSelectorControl
           onClick={() => moveSelected(false)}
           isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
-        >
-          <AngleLeftIcon />
-        </DualListSelectorControl>
+          icon={<AngleLeftIcon />}
+        />
       </DualListSelectorControlsWrapper>
       <DualListSelectorPane
         title="Chosen options"

package/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx CHANGED Viewed

@@ -107,36 +107,32 @@ export const DualListSelectorBasic: React.FunctionComponent = () => {
           aria-label="Add selected"
           tooltipContent="Add selected"
           tooltipProps={{ position: 'top', 'aria-live': 'off' }}
-        >
-          <AngleRightIcon />
-        </DualListSelectorControl>
+          icon={<AngleRightIcon />}
+        />
         <DualListSelectorControl
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
           tooltipContent="Add all"
           tooltipProps={{ position: 'right', 'aria-live': 'off' }}
-        >
-          <AngleDoubleRightIcon />
-        </DualListSelectorControl>
+          icon={<AngleDoubleRightIcon />}
+        />
         <DualListSelectorControl
           isDisabled={chosenOptions.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
           tooltipContent="Remove all"
           tooltipProps={{ position: 'left', 'aria-live': 'off' }}
-        >
-          <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
+          icon={<AngleDoubleLeftIcon />}
+        />
         <DualListSelectorControl
           onClick={() => moveSelected(false)}
           isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
           tooltipContent="Remove selected"
           tooltipProps={{ position: 'bottom', 'aria-live': 'off' }}
-        >
-          <AngleLeftIcon />
-        </DualListSelectorControl>
+          icon={<AngleLeftIcon />}
+        />
       </DualListSelectorControlsWrapper>
       <DualListSelectorPane
         title="Chosen options"

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx CHANGED Viewed

@@ -154,9 +154,8 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
             aria-label="Sort Available"
             key="availableSortButton"
             isDisabled={isDisabled}
-          >
-            <PficonSortCommonAscIcon />
-          </Button>,
+            icon={<PficonSortCommonAscIcon />}
+          />,
           <Dropdown
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
@@ -191,9 +190,8 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
             aria-label="Sort Chosen"
             key="chosenSortButton"
             isDisabled={isDisabled}
-          >
-            <PficonSortCommonAscIcon />
-          </Button>,
+            icon={<PficonSortCommonAscIcon />}
+          />,
           <Dropdown
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
@@ -274,30 +272,26 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
             isDisabled={!availableOptions.some((option) => option.selected) || isDisabled}
             onClick={() => moveSelected(true)}
             aria-label="Add selected"
-          >
-            <AngleRightIcon />
-          </DualListSelectorControl>
+            icon={<AngleRightIcon />}
+          />
           <DualListSelectorControl
             isDisabled={availableOptions.length === 0 || isDisabled}
             onClick={() => moveAll(true)}
             aria-label="Add all"
-          >
-            <AngleDoubleRightIcon />
-          </DualListSelectorControl>
+            icon={<AngleDoubleRightIcon />}
+          />
           <DualListSelectorControl
             isDisabled={chosenOptions.length === 0 || isDisabled}
             onClick={() => moveAll(false)}
             aria-label="Remove all"
-          >
-            <AngleDoubleLeftIcon />
-          </DualListSelectorControl>
+            icon={<AngleDoubleLeftIcon />}
+          />
           <DualListSelectorControl
             onClick={() => moveSelected(false)}
             isDisabled={!chosenOptions.some((option) => option.selected) || isDisabled}
             aria-label="Remove selected"
-          >
-            <AngleLeftIcon />
-          </DualListSelectorControl>
+            icon={<AngleLeftIcon />}
+          />
         </DualListSelectorControlsWrapper>
         <DualListSelectorPane
           title="Chosen options"

package/src/components/DualListSelector/examples/DualListSelectorDragDrop.tsx CHANGED Viewed

@@ -117,30 +117,26 @@ export const DualListSelectorComposableDragDrop: React.FunctionComponent = () =>
           isDisabled={!availableOptions.some((option) => option.selected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
-        >
-          <AngleRightIcon />
-        </DualListSelectorControl>
+          icon={<AngleRightIcon />}
+        />
         <DualListSelectorControl
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
-        >
-          <AngleDoubleRightIcon />
-        </DualListSelectorControl>
+          icon={<AngleDoubleRightIcon />}
+        />
         <DualListSelectorControl
           isDisabled={chosenOptions.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
-        >
-          <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
+          icon={<AngleDoubleLeftIcon />}
+        />
         <DualListSelectorControl
           onClick={() => moveSelected(false)}
           isDisabled={!chosenOptions.some((option) => option.selected)}
           aria-label="Remove selected"
-        >
-          <AngleLeftIcon />
-        </DualListSelectorControl>
+          icon={<AngleLeftIcon />}
+        />
       </DualListSelectorControlsWrapper>
       <DragDrop
         onDrag={() => {

package/src/components/DualListSelector/examples/DualListSelectorTree.tsx CHANGED Viewed

@@ -288,30 +288,26 @@ export const DualListSelectorComposableTree: React.FunctionComponent<ExampleProp
           isDisabled={!checkedLeafIds.filter((x) => !chosenLeafIds.includes(x)).length}
           onClick={() => moveChecked(true)}
           aria-label="Add selected"
-        >
-          <AngleRightIcon />
-        </DualListSelectorControl>
+          icon={<AngleRightIcon />}
+        />
         <DualListSelectorControl
           isDisabled={chosenLeafIds.length === memoizedAllLeaves.length}
           onClick={() => moveAll(true)}
           aria-label="Add all"
-        >
-          <AngleDoubleRightIcon />
-        </DualListSelectorControl>
+          icon={<AngleDoubleRightIcon />}
+        />
         <DualListSelectorControl
           isDisabled={chosenLeafIds.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
-        >
-          <AngleDoubleLeftIcon />
-        </DualListSelectorControl>
+          icon={<AngleDoubleLeftIcon />}
+        />
         <DualListSelectorControl
           onClick={() => moveChecked(false)}
           isDisabled={!checkedLeafIds.filter((x) => !!chosenLeafIds.includes(x)).length}
           aria-label="Remove selected"
-        >
-          <AngleLeftIcon />
-        </DualListSelectorControl>
+          icon={<AngleLeftIcon />}
+        />
       </DualListSelectorControlsWrapper>
       {buildPane(true)}
     </DualListSelector>

package/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap CHANGED Viewed

@@ -101,7 +101,11 @@ exports[`EmptyState Main 1`] = `
             data-ouia-safe="true"
             type="button"
           >
-            New HTTP Proxy
+            <span
+              class="pf-v6-c-button__text"
+            >
+              New HTTP Proxy
+            </span>
           </button>
         </div>
         <div
@@ -116,7 +120,11 @@ exports[`EmptyState Main 1`] = `
             data-ouia-safe="true"
             type="button"
           >
-            Learn more about this in the documentation.
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Learn more about this in the documentation.
+            </span>
           </button>
         </div>
       </div>

package/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap CHANGED Viewed

@@ -44,7 +44,11 @@ exports[`simple fileupload 1`] = `
             data-ouia-safe="true"
             type="button"
           >
-            Browse...
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Browse...
+            </span>
           </button>
         </div>
         <div
@@ -59,7 +63,11 @@ exports[`simple fileupload 1`] = `
             disabled=""
             type="button"
           >
-            Clear
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Clear
+            </span>
           </button>
         </div>
       </div>

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap CHANGED Viewed

@@ -43,7 +43,11 @@ exports[`simple fileuploadfield 1`] = `
             data-ouia-safe="true"
             type="button"
           >
-            Browse...
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Browse...
+            </span>
           </button>
         </div>
         <div
@@ -57,7 +61,11 @@ exports[`simple fileuploadfield 1`] = `
             data-ouia-safe="true"
             type="button"
           >
-            Clear
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Clear
+            </span>
           </button>
         </div>
       </div>

package/src/components/Form/FormFieldGroupToggle.tsx CHANGED Viewed

@@ -37,11 +37,12 @@ export const FormFieldGroupToggle: React.FunctionComponent<FormFieldGroupToggleP
         aria-expanded={isExpanded}
         aria-labelledby={ariaLabelledby}
         id={toggleId}
-      >
-        <span className={css(styles.formFieldGroupToggleIcon)}>
-          <AngleRightIcon aria-hidden="true" />
-        </span>
-      </Button>
+        icon={
+          <span className={css(styles.formFieldGroupToggleIcon)}>
+            <AngleRightIcon aria-hidden="true" />
+          </span>
+        }
+      />
     </div>
   </div>
 );

package/src/components/Form/FormGroupLabelHelp.tsx CHANGED Viewed

@@ -45,9 +45,8 @@ const FormGroupLabelHelpBase: React.FunctionComponent<FormGroupLabelHelpProps> =
       variant="plain"
       hasNoPadding
       {...props}
-    >
-      <QuestionCircleIcon />
-    </Button>
+      icon={<QuestionCircleIcon />}
+    />
   );
 };

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap CHANGED Viewed

@@ -26,21 +26,25 @@ exports[`Check expandable form field group example against snapshot 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-form__field-group-toggle-icon"
+            class="pf-v6-c-button__icon pf-m-start"
           >
-            <svg
-              aria-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <span
+              class="pf-v6-c-form__field-group-toggle-icon"
             >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 256 512"
+                width="1em"
+              >
+                <path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                />
+              </svg>
+            </span>
           </span>
         </button>
       </div>

package/src/components/InputGroup/examples/InputGroupWithPopover.tsx CHANGED Viewed

@@ -23,9 +23,7 @@ export const InputGroupWithPopover: React.FunctionComponent = () => {
             bodyContent="This field is an example of an input group with a popover."
             appendTo={() => inputGroupRef1.current}
           >
-            <Button variant="control" aria-label="popover for input">
-              <QuestionCircleIcon />
-            </Button>
+            <Button variant="control" aria-label="popover for input" icon={<QuestionCircleIcon />} />
           </Popover>
         </InputGroupItem>
       </InputGroup>
@@ -46,9 +44,7 @@ export const InputGroupWithPopover: React.FunctionComponent = () => {
             bodyContent="This field is an example of an input group with a popover."
             appendTo={() => inputGroupRef2.current}
           >
-            <Button variant="plain" aria-label="Popover for input">
-              <QuestionCircleIcon />
-            </Button>
+            <Button variant="plain" aria-label="Popover for input" icon={<QuestionCircleIcon />} />
           </Popover>
         </InputGroupItem>
       </InputGroup>