@patternfly/react-core 6.0.0-alpha.20 → 6.0.0-alpha.22

package/src/components/Label/examples/LabelFilled.tsx

@@ -9,16 +9,17 @@ export const LabelFilled: React.FunctionComponent = () => {
   };
   return (
     <React.Fragment>
-      <Label>Grey</Label> <Label icon={<InfoCircleIcon />}>Grey icon</Label>{' '}
-      <Label onClose={() => Function.prototype}>Grey removable</Label>{' '}
+      <Label>Grey</Label>
+      <Label icon={<InfoCircleIcon />}>Grey icon</Label>
+      <Label onClose={() => Function.prototype}>Grey removable</Label>
       <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Grey icon removable
-      </Label>{' '}
-      <Label href="#filled">Grey link</Label>{' '}
+      </Label>
+      <Label href="#filled">Grey link</Label>
       <Label href="#filled" onClose={() => Function.prototype}>
         Grey link removable
       </Label>
-      <Label onClick={() => logColor('grey')}>Grey clickable</Label>{' '}
+      <Label onClick={() => logColor('grey')}>Grey clickable</Label>
       <Label onClick={() => logColor('grey')} onClose={() => Function.prototype}>
         Grey clickable removable
       </Label>
@@ -27,25 +28,25 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="blue">Blue</Label>{' '}
+      <Label color="blue">Blue</Label>
       <Label color="blue" icon={<InfoCircleIcon />}>
         Blue icon
-      </Label>{' '}
+      </Label>
       <Label color="blue" onClose={() => Function.prototype}>
         Blue removable
-      </Label>{' '}
+      </Label>
       <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Blue icon removable
-      </Label>{' '}
+      </Label>
       <Label color="blue" href="#filled">
         Blue link
-      </Label>{' '}
+      </Label>
       <Label color="blue" href="#filled" onClose={() => Function.prototype}>
         Blue link removable
       </Label>
       <Label color="blue" onClick={() => logColor('blue')}>
         Blue clickable
-      </Label>{' '}
+      </Label>
       <Label color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
       </Label>
@@ -54,25 +55,25 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="green">Green</Label>{' '}
+      <Label color="green">Green</Label>
       <Label color="green" icon={<InfoCircleIcon />}>
         Green icon
-      </Label>{' '}
+      </Label>
       <Label color="green" onClose={() => Function.prototype}>
         Green removable
-      </Label>{' '}
+      </Label>
       <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Green icon removable
-      </Label>{' '}
+      </Label>
       <Label color="green" href="#filled">
         Green link
-      </Label>{' '}
+      </Label>
       <Label color="green" href="#filled" onClose={() => Function.prototype}>
         Green link removable
       </Label>
       <Label color="green" onClick={() => logColor('green')}>
         Green clickable
-      </Label>{' '}
+      </Label>
       <Label color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
       </Label>
@@ -81,25 +82,25 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="orange">Orange</Label>{' '}
+      <Label color="orange">Orange</Label>
       <Label color="orange" icon={<InfoCircleIcon />}>
         Orange icon
-      </Label>{' '}
+      </Label>
       <Label color="orange" onClose={() => Function.prototype}>
         Orange removable
-      </Label>{' '}
+      </Label>
       <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Orange icon removable
-      </Label>{' '}
+      </Label>
       <Label color="orange" href="#filled">
         Orange link
-      </Label>{' '}
+      </Label>
       <Label color="orange" href="#filled" onClose={() => Function.prototype}>
         Orange link removable
       </Label>
       <Label color="orange" onClick={() => logColor('orange')}>
         Orange clickable
-      </Label>{' '}
+      </Label>
       <Label color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
       </Label>
@@ -108,25 +109,25 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="red">Red</Label>{' '}
+      <Label color="red">Red</Label>
       <Label color="red" icon={<InfoCircleIcon />}>
         Red icon
-      </Label>{' '}
+      </Label>
       <Label color="red" onClose={() => Function.prototype}>
         Red removable
-      </Label>{' '}
+      </Label>
       <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Red icon removable
-      </Label>{' '}
+      </Label>
       <Label color="red" href="#filled">
         Red link
-      </Label>{' '}
+      </Label>
       <Label color="red" href="#filled" onClose={() => Function.prototype}>
         Red link removable
       </Label>
       <Label color="red" onClick={() => logColor('red')}>
         Red clickable
-      </Label>{' '}
+      </Label>
       <Label color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
       </Label>
@@ -135,25 +136,52 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="purple">Purple</Label>{' '}
+      <Label color="orangered">Orange red</Label>
+      <Label color="orangered" icon={<InfoCircleIcon />}>
+        Orange red icon
+      </Label>
+      <Label color="orangered" onClose={() => Function.prototype}>
+        Orange red removable
+      </Label>
+      <Label color="orangered" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Orange red icon removable
+      </Label>
+      <Label color="orangered" href="#filled">
+        Orange red link
+      </Label>
+      <Label color="orangered" href="#filled" onClose={() => Function.prototype}>
+        Orange red link removable
+      </Label>
+      <Label color="orangered" onClick={() => logColor('orangered')}>
+        Orange red clickable
+      </Label>
+      <Label color="orangered" onClick={() => logColor('orangered')} onClose={() => Function.prototype}>
+        Orange red clickable removable
+      </Label>
+      <Label color="orangered" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Orange red label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label color="purple">Purple</Label>
       <Label color="purple" icon={<InfoCircleIcon />}>
         Purple icon
-      </Label>{' '}
+      </Label>
       <Label color="purple" onClose={() => Function.prototype}>
         Purple removable
-      </Label>{' '}
+      </Label>
       <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Purple icon removable
-      </Label>{' '}
+      </Label>
       <Label color="purple" href="#filled">
         Purple link
-      </Label>{' '}
+      </Label>
       <Label color="purple" href="#filled" onClose={() => Function.prototype}>
         Purple link removable
       </Label>
       <Label color="purple" onClick={() => logColor('purple')}>
         Purple clickable
-      </Label>{' '}
+      </Label>
       <Label color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
       </Label>
@@ -162,25 +190,25 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="cyan">Cyan</Label>{' '}
+      <Label color="cyan">Cyan</Label>
       <Label color="cyan" icon={<InfoCircleIcon />}>
         Cyan icon
-      </Label>{' '}
+      </Label>
       <Label color="cyan" onClose={() => Function.prototype}>
         Cyan removable
-      </Label>{' '}
+      </Label>
       <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Cyan icon removable
-      </Label>{' '}
+      </Label>
       <Label color="cyan" href="#filled">
         Cyan link
-      </Label>{' '}
+      </Label>
       <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
         Cyan link removable
       </Label>
       <Label color="cyan" onClick={() => logColor('cyan')}>
         Cyan clickable
-      </Label>{' '}
+      </Label>
       <Label color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
         Cyan clickable removable
       </Label>
@@ -189,25 +217,25 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="gold">Gold</Label>{' '}
+      <Label color="gold">Gold</Label>
       <Label color="gold" icon={<InfoCircleIcon />}>
         Gold icon
-      </Label>{' '}
+      </Label>
       <Label color="gold" onClose={() => Function.prototype}>
         Gold removable
-      </Label>{' '}
+      </Label>
       <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Gold icon removable
-      </Label>{' '}
+      </Label>
       <Label color="gold" href="#filled">
         Gold link
-      </Label>{' '}
+      </Label>
       <Label color="gold" href="#filled" onClose={() => Function.prototype}>
         Gold link removable
       </Label>
       <Label color="gold" onClick={() => logColor('gold')}>
         Gold clickable
-      </Label>{' '}
+      </Label>
       <Label color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
         Gold clickable removable
       </Label>

package/src/components/Label/examples/LabelGroupEditableAdd.tsx

@@ -56,7 +56,7 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
       numLabels={5}
       isEditable
       addLabelControl={
-        <Label color="blue" variant="outline" isOverflowLabel onClick={onAdd}>
+        <Label variant="add" onClick={onAdd}>
           Add label
         </Label>
       }

package/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx

@@ -102,7 +102,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
 
   const toggle = (
     <div ref={toggleRef}>
-      <Label color="blue" variant="outline" isOverflowLabel onClick={onToggleClick}>
+      <Label variant="overflow" onClick={onToggleClick}>
         Add label
       </Label>
     </div>

package/src/components/Label/examples/LabelGroupEditableAddModal.tsx

@@ -236,7 +236,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
         numLabels={5}
         isEditable
         addLabelControl={
-          <Label color="blue" variant="outline" isOverflowLabel onClick={handleModalToggle}>
+          <Label variant="overflow" onClick={handleModalToggle}>
             Add label
           </Label>
         }

package/src/components/Label/examples/LabelOutline.tsx

@@ -9,25 +9,25 @@ export const LabelOutline: React.FunctionComponent = () => {
   };
   return (
     <React.Fragment>
-      <Label variant="outline">Grey</Label>{' '}
+      <Label variant="outline">Grey</Label>
       <Label variant="outline" icon={<InfoCircleIcon />}>
         Grey icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" onClose={() => Function.prototype}>
         Grey removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Grey icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" href="#outline">
         Grey link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
         Grey link removable
       </Label>
       <Label variant="outline" onClick={() => logColor('grey')}>
         Grey clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" onClick={() => logColor('grey')} onClose={() => Function.prototype}>
         Grey clickable removable
       </Label>
@@ -38,25 +38,25 @@ export const LabelOutline: React.FunctionComponent = () => {
       <br />
       <Label variant="outline" color="blue">
         Blue
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
         Blue icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="blue" onClose={() => Function.prototype}>
         Blue removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Blue icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="blue" href="#outline">
         Blue link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
         Blue link removable
       </Label>
       <Label variant="outline" color="blue" onClick={() => logColor('blue')}>
         Blue clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
       </Label>
@@ -73,25 +73,25 @@ export const LabelOutline: React.FunctionComponent = () => {
       <br />
       <Label variant="outline" color="green">
         Green
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
         Green icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="green" onClose={() => Function.prototype}>
         Green removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Green icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="green" href="#outline">
         Green link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
         Green link removable
       </Label>
       <Label variant="outline" color="green" onClick={() => logColor('green')}>
         Green clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
       </Label>
@@ -108,25 +108,25 @@ export const LabelOutline: React.FunctionComponent = () => {
       <br />
       <Label variant="outline" color="orange">
         Orange
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
         Orange icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="orange" onClose={() => Function.prototype}>
         Orange removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Orange icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="orange" href="#outline">
         Orange link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
         Orange link removable
       </Label>
       <Label variant="outline" color="orange" onClick={() => logColor('orange')}>
         Orange clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
       </Label>
@@ -143,25 +143,25 @@ export const LabelOutline: React.FunctionComponent = () => {
       <br />
       <Label variant="outline" color="red">
         Red
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
         Red icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="red" onClose={() => Function.prototype}>
         Red removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Red icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="red" href="#outline">
         Red link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
         Red link removable
       </Label>
       <Label variant="outline" color="red" onClick={() => logColor('red')}>
         Red clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
       </Label>
@@ -176,27 +176,67 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
+      <Label variant="outline" color="orangered">
+        Orange red
+      </Label>
+      <Label variant="outline" color="orangered" icon={<InfoCircleIcon />}>
+        Orange red icon
+      </Label>
+      <Label variant="outline" color="orangered" onClose={() => Function.prototype}>
+        Orange red removable
+      </Label>
+      <Label variant="outline" color="orangered" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Orange red icon removable
+      </Label>
+      <Label variant="outline" color="orangered" href="#outline">
+        Orange red link
+      </Label>
+      <Label variant="outline" color="orangered" href="#outline" onClose={() => Function.prototype}>
+        Orange red link removable
+      </Label>
+      <Label variant="outline" color="orangered" onClick={() => logColor('orangered')}>
+        Orange red clickable
+      </Label>
+      <Label
+        variant="outline"
+        color="orangered"
+        onClick={() => logColor('orangered')}
+        onClose={() => Function.prototype}
+      >
+        Orange red clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="orangered"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Orange red label with icon that overflows
+      </Label>
+      <br />
+      <br />
       <Label variant="outline" color="purple">
         Purple
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
         Purple icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="purple" onClose={() => Function.prototype}>
         Purple removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Purple icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="purple" href="#outline">
         Purple link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
         Purple link removable
       </Label>
       <Label variant="outline" color="purple" onClick={() => logColor('purple')}>
         Purple clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
       </Label>
@@ -213,25 +253,25 @@ export const LabelOutline: React.FunctionComponent = () => {
       <br />
       <Label variant="outline" color="cyan">
         Cyan
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
         Cyan icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
         Cyan removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Cyan icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="cyan" href="#outline">
         Cyan link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
         Cyan link removable
       </Label>
       <Label variant="outline" color="cyan" onClick={() => logColor('cyan')}>
         Cyan clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
         Cyan clickable removable
       </Label>
@@ -248,25 +288,25 @@ export const LabelOutline: React.FunctionComponent = () => {
       <br />
       <Label variant="outline" color="gold">
         Gold
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
         Gold icon
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="gold" onClose={() => Function.prototype}>
         Gold removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
         Gold icon removable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="gold" href="#outline">
         Gold link
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
         Gold link removable
       </Label>
       <Label variant="outline" color="gold" onClick={() => logColor('gold')}>
         Gold clickable
-      </Label>{' '}
+      </Label>
       <Label variant="outline" color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
         Gold clickable removable
       </Label>

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -55,8 +55,8 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
 
   const toggle = (
     <div className={styles.multipleFileUploadStatusProgress}>
-      <div className={styles.multipleFileUploadStatusProgressIcon}>{icon}</div>
-      <div className={styles.multipleFileUploadStatusItemProgressText}>{statusToggleText}</div>
+      <div className={`${styles.multipleFileUploadStatusProgress}-icon`}>{icon}</div>
+      <div className={`${styles.multipleFileUploadStatusProgress}-text`}>{statusToggleText}</div>
     </div>
   );
 

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles';
 import { Progress } from '../Progress';
 import { Button } from '../Button';
 import FileIcon from '@patternfly/react-icons/dist/esm/icons/file-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 /** Automatically reads an uploaded file to render a visual representation of it, including
  * its name, size, and read status. This sub-component also allows custom reading of files
@@ -165,10 +165,9 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
           helperText={progressHelperText}
         />
       </div>
-      {/* TODO: Update with issue #9997.  Removed class "styles.multipleFileUploadStatusItemClose" that no longer exists */}
-      <div>
+      <div className={`${styles.multipleFileUploadStatusItem}-close`}>
         <Button variant="plain" aria-label={buttonAriaLabel} onClick={onClearClick}>
-          <TimesCircleIcon />
+          <TimesIcon />
         </Button>
       </div>
     </li>