From 7fb075a85d9f7d553cf353b4f3d2514611225d88 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 6 Apr 2024 23:24:27 +0300
Subject: [PATCH] Refactored Chips

---
 components/lib/chips/style/ChipsStyle.js      | 10 +++---
 .../lib/themes/primeone/base/chips/index.js   | 33 +++++++++----------
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/components/lib/chips/style/ChipsStyle.js b/components/lib/chips/style/ChipsStyle.js
index 7fe34ee00..e8ed1be8a 100644
--- a/components/lib/chips/style/ChipsStyle.js
+++ b/components/lib/chips/style/ChipsStyle.js
@@ -12,15 +12,15 @@ const classes = {
         }
     ],
     container: ({ props, instance }) => [
-        'p-chips-multiple-container',
+        'p-chips-list',
         {
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
         }
     ],
-    token: ({ state, index }) => ['p-chips-token', { 'p-focus': state.focusedIndex === index }],
-    label: 'p-chips-token-label',
-    removeTokenIcon: 'p-chips-token-icon',
-    inputToken: 'p-chips-input-token'
+    token: ({ state, index }) => ['p-chips-item', { 'p-focus': state.focusedIndex === index }],
+    label: 'p-chips-item-label',
+    removeTokenIcon: 'p-chips-item-icon',
+    inputToken: 'p-chips-input-item'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/themes/primeone/base/chips/index.js b/components/lib/themes/primeone/base/chips/index.js
index b0d8fe91a..fccbd6f25 100644
--- a/components/lib/themes/primeone/base/chips/index.js
+++ b/components/lib/themes/primeone/base/chips/index.js
@@ -4,7 +4,7 @@ export default {
     display: inline-flex;
 }
 
-.p-chips-multiple-container {
+.p-chips-list {
     margin: 0;
     padding: 0;
     list-style-type: none;
@@ -25,34 +25,34 @@ export default {
     box-shadow: ${dt('chips.box.shadow')};
 }
 
-.p-chips:not(.p-disabled):hover .p-chips-multiple-container {
+.p-chips:not(.p-disabled):hover .p-chips-list {
     border-color: ${dt('chips.hover.border.color')};
 }
 
-.p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
+.p-chips:not(.p-disabled).p-focus .p-chips-list {
     border-color: ${dt('chips.focus.border.color')};
     outline: 0 none;
 }
 
-.p-chips.p-invalid .p-chips-multiple-container {
+.p-chips.p-invalid .p-chips-list {
     border-color: ${dt('chips.invalid.border.color')};
 }
 
-.p-variant-filled.p-chips-multiple-container {
+.p-variant-filled.p-chips-list {
     background: ${dt('chips.filled.background')};
 }
 
-.p-chips:not(.p-disabled).p-focus .p-variant-filled.p-chips-multiple-container  {
+.p-chips:not(.p-disabled).p-focus .p-variant-filled.p-chips-list  {
     background: ${dt('chips.filled.focus.background')};
 }
 
-.p-chips.p-disabled .p-chips-multiple-container {
+.p-chips.p-disabled .p-chips-list {
     opacity: 1;
     background: ${dt('chips.disabled.background')};
     color: ${dt('chips.disabled.color')};
 }
 
-.p-chips-token {
+.p-chips-item {
     cursor: default;
     display: inline-flex;
     align-items: center;
@@ -63,27 +63,24 @@ export default {
     border-radius: ${dt('rounded.sm')};
 }
 
-.p-chips-token.p-focus {
+.p-chips-item.p-focus {
     background: ${dt('chips.chip.focus.background')};
     color: ${dt('chips.chip.focus.color')};
 }
 
-.p-chips-input-token {
-    flex: 1 1 auto;
-    display: inline-flex;
-}
-
-.p-chips-token-icon {
+.p-chips-item-icon {
     cursor: pointer;
     margin-left: 0.375rem;
 }
 
-.p-chips-input-token {
+.p-chips-input-item {
     padding: 0.25rem 0;
     margin-left: 0.5rem;
+    flex: 1 1 auto;
+    display: inline-flex;
 }
 
-.p-chips-input-token input {
+.p-chips-input-item input {
     border: 0 none;
     outline: 0 none;
     background-color: transparent;
@@ -100,7 +97,7 @@ export default {
     margin: 0;
 }
 
-.p-chips-input-token input::placeholder {
+.p-chips-input-item input::placeholder {
     color: ${dt('chips.placeholder.color')};
 }