From 538c2d62100cbe019e6df5e1ff62f2e99ca926c8 Mon Sep 17 00:00:00 2001
From: erkanercan <erkanercandev@gmail.com>
Date: Tue, 22 Nov 2022 20:35:47 +0300
Subject: [PATCH 1/5] fix: forward given role to chip component

#8353
---
 .../react-core/src/components/Chip/Chip.tsx   |  2 +
 .../components/Chip/__tests__/Chip.test.tsx   |  9 ++++
 .../__snapshots__/Chip.test.tsx.snap          | 44 +++++++++++++++++++
 3 files changed, 55 insertions(+)

diff --git a/packages/react-core/src/components/Chip/Chip.tsx b/packages/react-core/src/components/Chip/Chip.tsx
index 55d8b867150..e41c8cde297 100644
--- a/packages/react-core/src/components/Chip/Chip.tsx
+++ b/packages/react-core/src/components/Chip/Chip.tsx
@@ -95,6 +95,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
         className={css(styles.chip, styles.modifiers.overflow, className)}
         {...(this.props.component === 'button' ? { type: 'button' } : {})}
         {...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
+        {...(this.props.role && { role: this.props.role })}
       >
         <span className={css(styles.chipText)}>{children}</span>
       </Component>
@@ -112,6 +113,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
         className={css(styles.chip, className)}
         {...(this.state.isTooltipVisible && { tabIndex: 0 })}
         {...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
+        {...(this.props.role && { role: this.props.role })}
       >
         <span ref={this.span} className={css(styles.chipText)} id={id}>
           {children}
diff --git a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx b/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
index df9dde4fc45..56e178e1b4b 100644
--- a/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
+++ b/packages/react-core/src/components/Chip/__tests__/Chip.test.tsx
@@ -47,4 +47,13 @@ describe('Chip', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test("with role='gridcell'", () => {
+    const { asFragment } = render(
+      <Chip className="my-chp-cls" role="gridcell">
+        I'm a roled chip
+      </Chip>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
diff --git a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index 3cf7ee49a22..c60ae8e8868 100644
--- a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -164,3 +164,47 @@ exports[`Chip readonly 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`Chip with role='gridcell' 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-chip my-chp-cls"
+    data-ouia-component-id="OUIA-Generated-Chip-6"
+    data-ouia-component-type="PF4/Chip"
+    data-ouia-safe="true"
+    role="gridcell"
+  >
+    <span
+      class="pf-c-chip__text"
+      id="pf-random-id-5"
+    >
+      I'm a roled chip
+    </span>
+    <button
+      aria-disabled="false"
+      aria-label="close"
+      aria-labelledby="remove_pf-random-id-5 pf-random-id-5"
+      class="pf-c-button pf-m-plain"
+      data-ouia-component-id="close"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      id="remove_pf-random-id-5"
+      type="button"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 352 512"
+        width="1em"
+      >
+        <path
+          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+        />
+      </svg>
+    </button>
+  </div>
+</DocumentFragment>
+`;

From 628237a7c0cd1340334d6c6e59371ee21c62228a Mon Sep 17 00:00:00 2001
From: erkanercan <erkanercandev@gmail.com>
Date: Wed, 14 Dec 2022 22:58:45 +0300
Subject: [PATCH 2/5] fix: spread props to all chips

https://github.com/patternfly/patternfly-react/pull/8383#issuecomment-1329742421
---
 .../react-core/src/components/Chip/Chip.tsx   |  4 +--
 .../__snapshots__/Chip.test.tsx.snap          | 33 +++++++++++++++----
 .../__snapshots__/ChipGroup.test.tsx.snap     | 20 ++++++++---
 .../__snapshots__/Select.test.tsx.snap        | 10 ++++--
 .../__snapshots__/Toolbar.test.tsx.snap       | 10 ++++--
 5 files changed, 61 insertions(+), 16 deletions(-)

diff --git a/packages/react-core/src/components/Chip/Chip.tsx b/packages/react-core/src/components/Chip/Chip.tsx
index e41c8cde297..f2687bb10b0 100644
--- a/packages/react-core/src/components/Chip/Chip.tsx
+++ b/packages/react-core/src/components/Chip/Chip.tsx
@@ -95,7 +95,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
         className={css(styles.chip, styles.modifiers.overflow, className)}
         {...(this.props.component === 'button' ? { type: 'button' } : {})}
         {...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
-        {...(this.props.role && { role: this.props.role })}
+        {...this.props}
       >
         <span className={css(styles.chipText)}>{children}</span>
       </Component>
@@ -113,7 +113,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
         className={css(styles.chip, className)}
         {...(this.state.isTooltipVisible && { tabIndex: 0 })}
         {...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
-        {...(this.props.role && { role: this.props.role })}
+        {...this.props}
       >
         <span ref={this.span} className={css(styles.chipText)} id={id}>
           {children}
diff --git a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index c60ae8e8868..bdab9b43aec 100644
--- a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -3,10 +3,14 @@
 exports[`Chip closable 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chip my-chp-cls"
+    class="my-chp-cls"
+    closebtnarialabel="close"
+    component="div"
     data-ouia-component-id="OUIA-Generated-Chip-2"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
+    id="chip_one"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -46,10 +50,14 @@ exports[`Chip closable 1`] = `
 exports[`Chip closable with tooltip 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chip my-chp-cls"
+    class="my-chp-cls"
+    closebtnarialabel="close"
+    component="div"
     data-ouia-component-id="OUIA-Generated-Chip-3"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
+    id="chip_one"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -89,11 +97,15 @@ exports[`Chip closable with tooltip 1`] = `
 exports[`Chip custom max-width text 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chip my-chp-cls"
+    class="my-chp-cls"
+    closebtnarialabel="close"
+    component="div"
     data-ouia-component-id="OUIA-Generated-Chip-5"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
     style="--pf-c-chip__text--MaxWidth: 100px;"
+    textmaxwidth="100px"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -133,10 +145,13 @@ exports[`Chip custom max-width text 1`] = `
 exports[`Chip overflow 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chip pf-m-overflow my-chp-cls"
+    class="my-chp-cls"
+    closebtnarialabel="close"
+    component="div"
     data-ouia-component-id="OUIA-Generated-Chip-1"
     data-ouia-component-type="PF4/OverflowChip"
     data-ouia-safe="true"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -150,10 +165,13 @@ exports[`Chip overflow 1`] = `
 exports[`Chip readonly 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chip my-chp-cls"
+    class="my-chp-cls"
+    closebtnarialabel="close"
+    component="div"
     data-ouia-component-id="OUIA-Generated-Chip-4"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
@@ -168,11 +186,14 @@ exports[`Chip readonly 1`] = `
 exports[`Chip with role='gridcell' 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chip my-chp-cls"
+    class="my-chp-cls"
+    closebtnarialabel="close"
+    component="div"
     data-ouia-component-id="OUIA-Generated-Chip-6"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
     role="gridcell"
+    tooltipposition="top"
   >
     <span
       class="pf-c-chip__text"
diff --git a/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap b/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
index 6cbf8fe1ed6..8a77521af10 100644
--- a/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
+++ b/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
@@ -21,10 +21,13 @@ exports[`ChipGroup chip group default 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class="pf-c-chip"
+            class=""
+            closebtnarialabel="close"
+            component="div"
             data-ouia-component-id="OUIA-Generated-Chip-1"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
+            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
@@ -92,10 +95,13 @@ exports[`ChipGroup chip group with category 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class="pf-c-chip"
+            class=""
+            closebtnarialabel="close"
+            component="div"
             data-ouia-component-id="OUIA-Generated-Chip-2"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
+            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
@@ -163,10 +169,13 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class="pf-c-chip"
+            class=""
+            closebtnarialabel="close"
+            component="div"
             data-ouia-component-id="OUIA-Generated-Chip-9"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
+            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
@@ -234,10 +243,13 @@ exports[`ChipGroup chip group with closable category 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class="pf-c-chip"
+            class=""
+            closebtnarialabel="close"
+            component="div"
             data-ouia-component-id="OUIA-Generated-Chip-3"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
+            tooltipposition="top"
           >
             <span
               class="pf-c-chip__text"
diff --git a/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
index 3bbfb29c2c1..9d57a028991 100644
--- a/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
@@ -1855,10 +1855,13 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                 class="pf-c-chip-group__list-item"
               >
                 <div
-                  class="pf-c-chip"
+                  class=""
+                  closebtnarialabel="Remove"
+                  component="div"
                   data-ouia-component-id="OUIA-Generated-Chip-1"
                   data-ouia-component-type="PF4/Chip"
                   data-ouia-safe="true"
+                  tooltipposition="top"
                 >
                   <span
                     class="pf-c-chip__text"
@@ -1897,10 +1900,13 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                 class="pf-c-chip-group__list-item"
               >
                 <div
-                  class="pf-c-chip"
+                  class=""
+                  closebtnarialabel="Remove"
+                  component="div"
                   data-ouia-component-id="OUIA-Generated-Chip-2"
                   data-ouia-component-type="PF4/Chip"
                   data-ouia-safe="true"
+                  tooltipposition="top"
                 >
                   <span
                     class="pf-c-chip__text"
diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
index da1d33c254b..239e66b81b9 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
@@ -293,10 +293,13 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   class="pf-c-chip-group__list-item"
                 >
                   <div
-                    class="pf-c-chip"
+                    class=""
+                    closebtnarialabel="close"
+                    component="div"
                     data-ouia-component-id="OUIA-Generated-Chip-1"
                     data-ouia-component-type="PF4/Chip"
                     data-ouia-safe="true"
+                    tooltipposition="top"
                   >
                     <span
                       class="pf-c-chip__text"
@@ -335,10 +338,13 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   class="pf-c-chip-group__list-item"
                 >
                   <div
-                    class="pf-c-chip"
+                    class=""
+                    closebtnarialabel="close"
+                    component="div"
                     data-ouia-component-id="OUIA-Generated-Chip-2"
                     data-ouia-component-type="PF4/Chip"
                     data-ouia-safe="true"
+                    tooltipposition="top"
                   >
                     <span
                       class="pf-c-chip__text"

From 98e2bc6b0b51a1f66e56b528691ced492f82dd4e Mon Sep 17 00:00:00 2001
From: erkanercan <erkanercandev@gmail.com>
Date: Wed, 14 Dec 2022 23:02:27 +0300
Subject: [PATCH 3/5] fix: class overrides

---
 packages/react-core/src/components/Chip/Chip.tsx     |  4 ++--
 .../Chip/__tests__/__snapshots__/Chip.test.tsx.snap  | 12 ++++++------
 .../__tests__/__snapshots__/ChipGroup.test.tsx.snap  |  8 ++++----
 .../__tests__/__snapshots__/Select.test.tsx.snap     |  4 ++--
 .../__tests__/__snapshots__/Toolbar.test.tsx.snap    |  4 ++--
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/react-core/src/components/Chip/Chip.tsx b/packages/react-core/src/components/Chip/Chip.tsx
index f2687bb10b0..5e78950ca64 100644
--- a/packages/react-core/src/components/Chip/Chip.tsx
+++ b/packages/react-core/src/components/Chip/Chip.tsx
@@ -88,6 +88,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
     return (
       <Component
         onClick={onClick}
+        {...this.props}
         {...(this.props.textMaxWidth && {
           style: this.setChipStyle(),
           ...this.props.style
@@ -95,7 +96,6 @@ export class Chip extends React.Component<ChipProps, ChipState> {
         className={css(styles.chip, styles.modifiers.overflow, className)}
         {...(this.props.component === 'button' ? { type: 'button' } : {})}
         {...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
-        {...this.props}
       >
         <span className={css(styles.chipText)}>{children}</span>
       </Component>
@@ -107,13 +107,13 @@ export class Chip extends React.Component<ChipProps, ChipState> {
     const Component = component as any;
     return (
       <Component
+        {...this.props}
         {...(this.props.textMaxWidth && {
           style: this.setChipStyle()
         })}
         className={css(styles.chip, className)}
         {...(this.state.isTooltipVisible && { tabIndex: 0 })}
         {...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
-        {...this.props}
       >
         <span ref={this.span} className={css(styles.chipText)} id={id}>
           {children}
diff --git a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index bdab9b43aec..097492464e9 100644
--- a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Chip closable 1`] = `
 <DocumentFragment>
   <div
-    class="my-chp-cls"
+    class="pf-c-chip my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-2"
@@ -50,7 +50,7 @@ exports[`Chip closable 1`] = `
 exports[`Chip closable with tooltip 1`] = `
 <DocumentFragment>
   <div
-    class="my-chp-cls"
+    class="pf-c-chip my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-3"
@@ -97,7 +97,7 @@ exports[`Chip closable with tooltip 1`] = `
 exports[`Chip custom max-width text 1`] = `
 <DocumentFragment>
   <div
-    class="my-chp-cls"
+    class="pf-c-chip my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-5"
@@ -145,7 +145,7 @@ exports[`Chip custom max-width text 1`] = `
 exports[`Chip overflow 1`] = `
 <DocumentFragment>
   <div
-    class="my-chp-cls"
+    class="pf-c-chip pf-m-overflow my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-1"
@@ -165,7 +165,7 @@ exports[`Chip overflow 1`] = `
 exports[`Chip readonly 1`] = `
 <DocumentFragment>
   <div
-    class="my-chp-cls"
+    class="pf-c-chip my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-4"
@@ -186,7 +186,7 @@ exports[`Chip readonly 1`] = `
 exports[`Chip with role='gridcell' 1`] = `
 <DocumentFragment>
   <div
-    class="my-chp-cls"
+    class="pf-c-chip my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-6"
diff --git a/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap b/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
index 8a77521af10..028d0c163fc 100644
--- a/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
+++ b/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`ChipGroup chip group default 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class=""
+            class="pf-c-chip"
             closebtnarialabel="close"
             component="div"
             data-ouia-component-id="OUIA-Generated-Chip-1"
@@ -95,7 +95,7 @@ exports[`ChipGroup chip group with category 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class=""
+            class="pf-c-chip"
             closebtnarialabel="close"
             component="div"
             data-ouia-component-id="OUIA-Generated-Chip-2"
@@ -169,7 +169,7 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class=""
+            class="pf-c-chip"
             closebtnarialabel="close"
             component="div"
             data-ouia-component-id="OUIA-Generated-Chip-9"
@@ -243,7 +243,7 @@ exports[`ChipGroup chip group with closable category 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class=""
+            class="pf-c-chip"
             closebtnarialabel="close"
             component="div"
             data-ouia-component-id="OUIA-Generated-Chip-3"
diff --git a/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
index 9d57a028991..3d5061e17b1 100644
--- a/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
@@ -1855,7 +1855,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                 class="pf-c-chip-group__list-item"
               >
                 <div
-                  class=""
+                  class="pf-c-chip"
                   closebtnarialabel="Remove"
                   component="div"
                   data-ouia-component-id="OUIA-Generated-Chip-1"
@@ -1900,7 +1900,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                 class="pf-c-chip-group__list-item"
               >
                 <div
-                  class=""
+                  class="pf-c-chip"
                   closebtnarialabel="Remove"
                   component="div"
                   data-ouia-component-id="OUIA-Generated-Chip-2"
diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
index 239e66b81b9..18525e75ce7 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
@@ -293,7 +293,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   class="pf-c-chip-group__list-item"
                 >
                   <div
-                    class=""
+                    class="pf-c-chip"
                     closebtnarialabel="close"
                     component="div"
                     data-ouia-component-id="OUIA-Generated-Chip-1"
@@ -338,7 +338,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   class="pf-c-chip-group__list-item"
                 >
                   <div
-                    class=""
+                    class="pf-c-chip"
                     closebtnarialabel="close"
                     component="div"
                     data-ouia-component-id="OUIA-Generated-Chip-2"

From 7c777913fd9dba9ac8ccf757f9f1d6c88879f649 Mon Sep 17 00:00:00 2001
From: erkanercan <erkanercandev@gmail.com>
Date: Sat, 7 Jan 2023 12:17:27 +0300
Subject: [PATCH 4/5] refactor: props spread at the end

---
 packages/react-core/src/components/Chip/Chip.tsx     |  4 ++--
 .../Chip/__tests__/__snapshots__/Chip.test.tsx.snap  | 12 ++++++------
 .../__tests__/__snapshots__/ChipGroup.test.tsx.snap  |  8 ++++----
 .../__tests__/__snapshots__/Select.test.tsx.snap     |  4 ++--
 .../__tests__/__snapshots__/Toolbar.test.tsx.snap    |  4 ++--
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/react-core/src/components/Chip/Chip.tsx b/packages/react-core/src/components/Chip/Chip.tsx
index 5e78950ca64..f2687bb10b0 100644
--- a/packages/react-core/src/components/Chip/Chip.tsx
+++ b/packages/react-core/src/components/Chip/Chip.tsx
@@ -88,7 +88,6 @@ export class Chip extends React.Component<ChipProps, ChipState> {
     return (
       <Component
         onClick={onClick}
-        {...this.props}
         {...(this.props.textMaxWidth && {
           style: this.setChipStyle(),
           ...this.props.style
@@ -96,6 +95,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
         className={css(styles.chip, styles.modifiers.overflow, className)}
         {...(this.props.component === 'button' ? { type: 'button' } : {})}
         {...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
+        {...this.props}
       >
         <span className={css(styles.chipText)}>{children}</span>
       </Component>
@@ -107,13 +107,13 @@ export class Chip extends React.Component<ChipProps, ChipState> {
     const Component = component as any;
     return (
       <Component
-        {...this.props}
         {...(this.props.textMaxWidth && {
           style: this.setChipStyle()
         })}
         className={css(styles.chip, className)}
         {...(this.state.isTooltipVisible && { tabIndex: 0 })}
         {...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
+        {...this.props}
       >
         <span ref={this.span} className={css(styles.chipText)} id={id}>
           {children}
diff --git a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index 097492464e9..bdab9b43aec 100644
--- a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Chip closable 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chip my-chp-cls"
+    class="my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-2"
@@ -50,7 +50,7 @@ exports[`Chip closable 1`] = `
 exports[`Chip closable with tooltip 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chip my-chp-cls"
+    class="my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-3"
@@ -97,7 +97,7 @@ exports[`Chip closable with tooltip 1`] = `
 exports[`Chip custom max-width text 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chip my-chp-cls"
+    class="my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-5"
@@ -145,7 +145,7 @@ exports[`Chip custom max-width text 1`] = `
 exports[`Chip overflow 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chip pf-m-overflow my-chp-cls"
+    class="my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-1"
@@ -165,7 +165,7 @@ exports[`Chip overflow 1`] = `
 exports[`Chip readonly 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chip my-chp-cls"
+    class="my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-4"
@@ -186,7 +186,7 @@ exports[`Chip readonly 1`] = `
 exports[`Chip with role='gridcell' 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-chip my-chp-cls"
+    class="my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-6"
diff --git a/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap b/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
index 028d0c163fc..8a77521af10 100644
--- a/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
+++ b/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`ChipGroup chip group default 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class="pf-c-chip"
+            class=""
             closebtnarialabel="close"
             component="div"
             data-ouia-component-id="OUIA-Generated-Chip-1"
@@ -95,7 +95,7 @@ exports[`ChipGroup chip group with category 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class="pf-c-chip"
+            class=""
             closebtnarialabel="close"
             component="div"
             data-ouia-component-id="OUIA-Generated-Chip-2"
@@ -169,7 +169,7 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class="pf-c-chip"
+            class=""
             closebtnarialabel="close"
             component="div"
             data-ouia-component-id="OUIA-Generated-Chip-9"
@@ -243,7 +243,7 @@ exports[`ChipGroup chip group with closable category 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class="pf-c-chip"
+            class=""
             closebtnarialabel="close"
             component="div"
             data-ouia-component-id="OUIA-Generated-Chip-3"
diff --git a/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
index 3d5061e17b1..9d57a028991 100644
--- a/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
@@ -1855,7 +1855,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                 class="pf-c-chip-group__list-item"
               >
                 <div
-                  class="pf-c-chip"
+                  class=""
                   closebtnarialabel="Remove"
                   component="div"
                   data-ouia-component-id="OUIA-Generated-Chip-1"
@@ -1900,7 +1900,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                 class="pf-c-chip-group__list-item"
               >
                 <div
-                  class="pf-c-chip"
+                  class=""
                   closebtnarialabel="Remove"
                   component="div"
                   data-ouia-component-id="OUIA-Generated-Chip-2"
diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
index 18525e75ce7..239e66b81b9 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
@@ -293,7 +293,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   class="pf-c-chip-group__list-item"
                 >
                   <div
-                    class="pf-c-chip"
+                    class=""
                     closebtnarialabel="close"
                     component="div"
                     data-ouia-component-id="OUIA-Generated-Chip-1"
@@ -338,7 +338,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   class="pf-c-chip-group__list-item"
                 >
                   <div
-                    class="pf-c-chip"
+                    class=""
                     closebtnarialabel="close"
                     component="div"
                     data-ouia-component-id="OUIA-Generated-Chip-2"

From 337e245b561f7bfb27854d7de292beddb2cabf6f Mon Sep 17 00:00:00 2001
From: erkanercan <erkanercandev@gmail.com>
Date: Mon, 9 Jan 2023 23:46:39 +0300
Subject: [PATCH 5/5] fix: props spreaded in a different way

---
 .../react-core/src/components/Chip/Chip.tsx   |  8 +++----
 .../__snapshots__/Chip.test.tsx.snap          | 22 +++++--------------
 .../__snapshots__/ChipGroup.test.tsx.snap     | 16 ++++----------
 .../__snapshots__/Select.test.tsx.snap        |  8 ++-----
 .../__snapshots__/Toolbar.test.tsx.snap       |  8 ++-----
 5 files changed, 18 insertions(+), 44 deletions(-)

diff --git a/packages/react-core/src/components/Chip/Chip.tsx b/packages/react-core/src/components/Chip/Chip.tsx
index f2687bb10b0..ae95d143358 100644
--- a/packages/react-core/src/components/Chip/Chip.tsx
+++ b/packages/react-core/src/components/Chip/Chip.tsx
@@ -83,7 +83,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
   });
 
   renderOverflowChip = () => {
-    const { children, className, onClick, ouiaId } = this.props;
+    const { children, className, onClick, ouiaId, ...props } = this.props;
     const Component = this.props.component as any;
     return (
       <Component
@@ -95,7 +95,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
         className={css(styles.chip, styles.modifiers.overflow, className)}
         {...(this.props.component === 'button' ? { type: 'button' } : {})}
         {...getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
-        {...this.props}
+        {...props}
       >
         <span className={css(styles.chipText)}>{children}</span>
       </Component>
@@ -103,7 +103,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
   };
 
   renderInnerChip(id: string) {
-    const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId } = this.props;
+    const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId, ...props } = this.props;
     const Component = component as any;
     return (
       <Component
@@ -113,7 +113,7 @@ export class Chip extends React.Component<ChipProps, ChipState> {
         className={css(styles.chip, className)}
         {...(this.state.isTooltipVisible && { tabIndex: 0 })}
         {...getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)}
-        {...this.props}
+        {...props}
       >
         <span ref={this.span} className={css(styles.chipText)} id={id}>
           {children}
diff --git a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
index bdab9b43aec..bd90c6b3076 100644
--- a/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/packages/react-core/src/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -3,9 +3,7 @@
 exports[`Chip closable 1`] = `
 <DocumentFragment>
   <div
-    class="my-chp-cls"
-    closebtnarialabel="close"
-    component="div"
+    class="pf-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-2"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
@@ -50,9 +48,7 @@ exports[`Chip closable 1`] = `
 exports[`Chip closable with tooltip 1`] = `
 <DocumentFragment>
   <div
-    class="my-chp-cls"
-    closebtnarialabel="close"
-    component="div"
+    class="pf-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-3"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
@@ -97,9 +93,7 @@ exports[`Chip closable with tooltip 1`] = `
 exports[`Chip custom max-width text 1`] = `
 <DocumentFragment>
   <div
-    class="my-chp-cls"
-    closebtnarialabel="close"
-    component="div"
+    class="pf-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-5"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
@@ -145,7 +139,7 @@ exports[`Chip custom max-width text 1`] = `
 exports[`Chip overflow 1`] = `
 <DocumentFragment>
   <div
-    class="my-chp-cls"
+    class="pf-c-chip pf-m-overflow my-chp-cls"
     closebtnarialabel="close"
     component="div"
     data-ouia-component-id="OUIA-Generated-Chip-1"
@@ -165,9 +159,7 @@ exports[`Chip overflow 1`] = `
 exports[`Chip readonly 1`] = `
 <DocumentFragment>
   <div
-    class="my-chp-cls"
-    closebtnarialabel="close"
-    component="div"
+    class="pf-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-4"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
@@ -186,9 +178,7 @@ exports[`Chip readonly 1`] = `
 exports[`Chip with role='gridcell' 1`] = `
 <DocumentFragment>
   <div
-    class="my-chp-cls"
-    closebtnarialabel="close"
-    component="div"
+    class="pf-c-chip my-chp-cls"
     data-ouia-component-id="OUIA-Generated-Chip-6"
     data-ouia-component-type="PF4/Chip"
     data-ouia-safe="true"
diff --git a/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap b/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
index 8a77521af10..4db703a7a31 100644
--- a/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
+++ b/packages/react-core/src/components/ChipGroup/__tests__/__snapshots__/ChipGroup.test.tsx.snap
@@ -21,9 +21,7 @@ exports[`ChipGroup chip group default 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class=""
-            closebtnarialabel="close"
-            component="div"
+            class="pf-c-chip"
             data-ouia-component-id="OUIA-Generated-Chip-1"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
@@ -95,9 +93,7 @@ exports[`ChipGroup chip group with category 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class=""
-            closebtnarialabel="close"
-            component="div"
+            class="pf-c-chip"
             data-ouia-component-id="OUIA-Generated-Chip-2"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
@@ -169,9 +165,7 @@ exports[`ChipGroup chip group with category and tooltip 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class=""
-            closebtnarialabel="close"
-            component="div"
+            class="pf-c-chip"
             data-ouia-component-id="OUIA-Generated-Chip-9"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
@@ -243,9 +237,7 @@ exports[`ChipGroup chip group with closable category 1`] = `
           class="pf-c-chip-group__list-item"
         >
           <div
-            class=""
-            closebtnarialabel="close"
-            component="div"
+            class="pf-c-chip"
             data-ouia-component-id="OUIA-Generated-Chip-3"
             data-ouia-component-type="PF4/Chip"
             data-ouia-safe="true"
diff --git a/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
index 9d57a028991..15c459c39af 100644
--- a/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap
@@ -1855,9 +1855,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                 class="pf-c-chip-group__list-item"
               >
                 <div
-                  class=""
-                  closebtnarialabel="Remove"
-                  component="div"
+                  class="pf-c-chip"
                   data-ouia-component-id="OUIA-Generated-Chip-1"
                   data-ouia-component-type="PF4/Chip"
                   data-ouia-safe="true"
@@ -1900,9 +1898,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
                 class="pf-c-chip-group__list-item"
               >
                 <div
-                  class=""
-                  closebtnarialabel="Remove"
-                  component="div"
+                  class="pf-c-chip"
                   data-ouia-component-id="OUIA-Generated-Chip-2"
                   data-ouia-component-type="PF4/Chip"
                   data-ouia-safe="true"
diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
index 239e66b81b9..775e47ee477 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
+++ b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
@@ -293,9 +293,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   class="pf-c-chip-group__list-item"
                 >
                   <div
-                    class=""
-                    closebtnarialabel="close"
-                    component="div"
+                    class="pf-c-chip"
                     data-ouia-component-id="OUIA-Generated-Chip-1"
                     data-ouia-component-type="PF4/Chip"
                     data-ouia-safe="true"
@@ -338,9 +336,7 @@ exports[`Toolbar should render with custom chip content 1`] = `
                   class="pf-c-chip-group__list-item"
                 >
                   <div
-                    class=""
-                    closebtnarialabel="close"
-                    component="div"
+                    class="pf-c-chip"
                     data-ouia-component-id="OUIA-Generated-Chip-2"
                     data-ouia-component-type="PF4/Chip"
                     data-ouia-safe="true"