feat(label-group): add new functions and features for label management

Author: Sara Dahan

elements/pf-label-group/demo/pf-label-group.html

@@ -1,30 +1,16 @@
-<pf-label-group removable add-label>
-  <pf-label  icon="info-circle" removable>Gold icon</pf-label>
- <pf-label  icon="info-circle" removable>Gold icon</pf-label>
- <h2 slot="header">label group </h2>
 
+<pf-label-group removable num-labels="3" orientation="horizontal">
+  <h2 slot="category-name">Very very very long textttttttttt</h2>
+
+  <pf-label icon="info-circle" removable>label-1</pf-label>
+  <pf-label icon="info-circle" removable>label-2</pf-label>
+  <pf-label icon="info-circle" removable>label-3</pf-label>
+  <pf-label icon="info-circle" removable>label-4</pf-label>
+  <pf-label icon="info-circle" removable>label-5</pf-label>
 </pf-label-group>
 
 <script type="module">
   import '@patternfly/elements/pf-label-group/pf-label-group.js';
   import '@patternfly/elements/pf-label/pf-label.js';
   import '@patternfly/elements/pf-button/pf-button.js';
-
-  const container = document.querySelector('pf-label-group');
-  container.addEventListener('close', function(event) {
-    event.target.remove();
-  });
-   
- 
-  container.addEventListener('add-label' , function(event) {
-   
-   
-    console.log('Add label button clicked');
-  } ); 
 </script>
-
-<style>
-pf-label-group {
-  /* insert demo styles */
-}
-</style>

elements/pf-label-group/pf-label-group.css

@@ -1,78 +1,12 @@
+
 :host {
   display: flex;
-  flex-direction: row; /* ברירת מחדל = horizontal */
+  flex-direction: row;
   position: relative;
   gap: 0.5rem;
   border: 0;
 }
 
-:host([orientation="horizontal"]) #container {
-  flex-direction: row;
-}
-
-:host([orientation="vertical"]) {
-  flex-direction: column;
-}
-
-:host([orientation="vertical"]) #container {
-  flex-direction: column;
-}
-
-:host([removable]) span[part="close-button"] {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  margin-left: auto;
-}
-
-/* Container styles */
-#container {
-  display: flex;
-  align-items: center;
-  gap: var(--pf-c-label--m-compact--c-button--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
-  padding: var(--pf-c-label--PaddingTop, var(--pf-global--spacer--xs, 0.25rem))
-           var(--pf-c-label--PaddingRight, var(--pf-global--spacer--sm, 0.5rem))
-           var(--pf-c-label--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem))
-           var(--pf-c-label--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
-  font-size: var(--pf-c-label--FontSize, var(--pf-global--FontSize--sm, 0.875rem));
-  color: var(--pf-c-label__content--Color, var(--pf-global--Color--100, #151515));
-  background-color: var(--pf-c-label--BackgroundColor, var(--pf-global--BackgroundColor--100, #fff));
-  border-radius: var(--pf-c-label--BorderRadius, 0em);
-  max-width: 100%;
-  position: relative;
-  --pf-global--icon--FontSize--sm: 14px;
-}
-
-#container::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-  content: "";
-  border-radius: var(--pf-c-label--BorderRadius, 0em);
-  border: var(--pf-c-label__content--before--BorderWidth, 1px) solid var(--pf-c-label__content--before--BorderColor, var(--pf-global--palette--black-300, #d2d2d2));
-}
-
-/* Icons */
-pf-icon, ::slotted(pf-icon) {
-  color: currentColor;
-}
-
-[part=icon] {
-  display: none;
-  pointer-events: none;
-}
-
-svg {
-  vertical-align: -0.125em;
-  fill: currentColor;
-  height: 1em;
-  width: 1em;
-}
-
-/* Button inside label */
 pf-button {
   --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));
   --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
@@ -85,26 +19,60 @@ pf-button {
           var(--pf-c-label__c-button--MarginLeft, 0.25rem);
 }
 
-/* Compact modifier */
 .compact {
   --pf-c-label--PaddingTop: var(--pf-c-label--m-compact--PaddingTop, 0);
   --pf-c-label--PaddingRight: var(--pf-c-label--m-compact--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
   --pf-c-label--PaddingBottom: var(--pf-c-label--m-compact--PaddingBottom, 0);
   --pf-c-label--PaddingLeft: var(--pf-c-label--m-compact--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
   --pf-global--icon--FontSize--sm: 12px;
 }
+
 .add-label-btn {
-  background-color: #fff;         
-  color: #0066cc;               
-  border: 1px solid #d2d2d2;        
-  border-radius: 9999px;           
-  padding: 0px 2px;   /* ריווח קטן יותר */
-  font-size: 9px;   /* טקסט קטן יותר */
+  background-color: #fff;
+  color: #0066cc;
+  border: 1px solid #d2d2d2;
+  border-radius: 9999px;
+  padding: 0px 2px;
+  font-size: 9px;
   cursor: pointer;
-  font-weight: 500;                 
+  font-weight: 500;
 }
 
-
 .add-label-btn:hover {
-  background-color: #f5f5f5;       
-}
+  background-color: #f5f5f5;
+}
+
+#outer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  border: 1px solid #d2d2d2;
+  border-radius: 6px;
+  background-color: #fff;
+}
+
+:host([orientation="horizontal"]) #outer {
+  flex-direction: row;
+}
+
+:host([orientation="vertical"]) #outer {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* הכותרת ב-slotted category-name */
+::slotted([slot="category-name"]) {
+  display: inline-block;
+  max-width: 16ch; /* מגביל את הרוחב כדי שיוכל להיחתך */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: default;
+}
+
+/* מאפשר להוסיף tooltip טבעי של הדפדפן */
+::slotted([slot="category-name"][title]):hover {
+  /* אין צורך בסגנון נוסף – הדפדפן מציג tooltip לבד */
+}