@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.31

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/List/ListItem.tsx

@@ -16,7 +16,7 @@ export const ListItem: React.FunctionComponent<ListItemProps> = ({
 }: ListItemProps) => (
   <li className={css(icon && styles.listItem)} {...props}>
     {icon && <span className={css(styles.listItemIcon)}>{icon}</span>}
-    {children}
+    <span className={icon && css(`${styles.list}__item-text`)}>{children}</span>
   </li>
 );
 ListItem.displayName = 'ListItem';

package/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap

@@ -5,7 +5,9 @@ exports[`ListItem should match snapshot (auto-generated) 1`] = `
   <li
     class=""
   >
-    ReactNode
+    <span>
+      ReactNode
+    </span>
   </li>
 </DocumentFragment>
 `;