docs(labels): Updates design guidelines.

package.json

@@ -16,7 +16,7 @@
     "serve": "npx pf-docs-framework serve build/patternfly-org/site",
     "test": "yarn workspace patternfly-org test:a11y:ci",
     "screenshots": "node node_modules/puppeteer/install.js && yarn workspace patternfly-org screenshots",
-    "start":  "yarn develop",
+    "start": "yarn develop",
     "start:extensions": "yarn develop:extensions",
     "uninstall": "find . -name node_modules | xargs rm -rf",
     "workflows": "node .github/generate-workflows",
@@ -30,16 +30,16 @@
     ]
   },
   "devDependencies": {
+    "@octokit/rest": "^19.0.7",
     "@patternfly/patternfly": "6.0.0-alpha.227",
     "@patternfly/react-code-editor": "6.0.0-alpha.105",
     "@patternfly/react-core": "6.0.0-alpha.105",
     "@patternfly/react-table": "6.0.0-alpha.106",
-    "@octokit/rest": "^19.0.7",
     "glob": "^8.1.0",
     "lerna": "^6.4.1",
-    "surge": "^0.23.1",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "surge": "^0.23.1"
   },
   "resolutions": {
     "node-sass": ">=6.0.1"

packages/documentation-framework/package.json

@@ -4,7 +4,6 @@
   "version": "6.0.0-alpha.95",
   "author": "Red Hat",
   "license": "MIT",
-  "private": false,
   "bin": {
     "pf-docs-framework": "scripts/cli/cli.js"
   },

packages/documentation-site/package.json

@@ -19,25 +19,24 @@
   "dependencies": {
     "@patternfly/documentation-framework": "6.0.0-alpha.94",
     "@patternfly/react-catalog-view-extension": "6.0.0-alpha.7",
+    "@patternfly/react-component-groups": "6.0.0-alpha.14",
     "@patternfly/react-console": "6.0.0-alpha.5",
     "@patternfly/react-docs": "7.0.0-alpha.113",
     "@patternfly/react-log-viewer": "6.0.0-alpha.5",
     "@patternfly/react-topology": "6.0.0-alpha.3",
     "@patternfly/react-user-feedback": "6.0.0-alpha.4",
-    "@patternfly/react-component-groups": "6.0.0-alpha.14",
     "@patternfly/react-virtualized-extension": "6.0.0-alpha.3",
-    "@patternfly/design-tokens": "1.13.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "showdown": "^2.1.0"
   },
   "devDependencies": {
     "@patternfly/patternfly-a11y": "4.3.1",
+    "classnames": "^2.2.5",
     "fs-extra": "^11.1.0",
     "glob": "^8.1.0",
     "react-jss": "^10.9.2",
     "react-router": "^6.3.0",
-    "react-router-dom": "^6.3.0",
-    "classnames": "^2.2.5"
+    "react-router-dom": "^6.3.0"
   }
 }

packages/documentation-site/patternfly-docs/content/design-guidelines/components/chip/chip.md

@@ -3,8 +3,13 @@ id: Chip
 section: components
 ---
 
+import { Alert } from '@patternfly/react-core';
+
 ## Elements
 
+<Alert variant="warning" title="Deprecated feature" ouiaId="DeprecatedAlert"> Chip has been deprecated in favor of  [the label component.](/components/label) Chip will no longer be maintained or enhanced. 
+</Alert>
+
 Chips are mainly used within chip groups, which represent an attribute that has been assigned one or more values. 
 
 Chip groups contain two elements.

packages/documentation-site/patternfly-docs/content/design-guidelines/components/date-picker/date-picker.md

@@ -67,7 +67,7 @@ Consider using adding an "All day" checkbox to a date and time picker to simplif
 Use date pickers in a toolbar to filter by date ranges.
 
 #### Date picker in attribute filter
-Date range fields can be added to an attribute filter as an attribute. Selecting the Date range attribute will display a date picker, and push other content in the toolbar to the right - in this case, the CTA button. The date(s) selected should display as chips under the filter.
+Date range fields can be added to an attribute filter as an attribute. Selecting the Date range attribute will display a date picker, and push other content in the toolbar to the right - in this case, the CTA button. The date(s) selected should display as labels under the filter.
 
 <img src="./img/In toolbar attribute filter.png" alt="Example of date picker in toolbar attribute filter" width="500"/>
 

packages/documentation-site/patternfly-docs/content/design-guidelines/components/label/label.md

@@ -5,87 +5,119 @@ section: components
 ## Labels
 
 ### Elements
-You can further customize labels by making them filled or unfilled, dismissable, adding icons, or making them clickable links. You can use any combination of these elements in a single label.
+You can further customize labels by adjusting their visual styling or adding functionality to let user click, edit, or remove labels.
 
+![text](./img/label-elements.png)
 
-<img src="./img/label-features.png" alt="Examples of different label features" width="180"/>
 
-
-1. **Fill/Unfilled labels:** Offer customization for emphasis.
-2. **Dismissible label:** Can be dismissed by clicking on the “x”.
-3. **Label with icon:** Can be used to further clarify the label.
-4. **Clickable labels:** Has a hover state to show interactiveness.
-5. **Editable labels:** Has a dashed underline to communicate editability.
+1. **Status label:** Combines color and an icon to communicate a status, like danger, warning, or success.
+1. **Filled label:** Can be used for additional emphasis.
+1. **Unfilled label:** Can be used as a less prominent label style.
+1. **Compact label:** Takes up less space than the default label.
+1. **Label with icon:** Can utilize a recognizable icon to make the label more clear and identifiable. 
+1. **Clickable label:** Is identified by the inclusion of a hover state (as shown in the example image).
+1. **Editable label:** Is identified by a dashed underline.
+1. **Dismissible label:** Can be removed or dismissed by clicking on the "x" close icon.
+1. **Label group:** Contains multiple labels at once.
+1. **Overflow label** Contains additional labels that don't fit within the main space of the label group.
 
 ### Usage
 
-Use a **label** when you want to highlight an element on a page to draw attention to it or make it more searchable. Labels can also be used to tag items of the same category. If you want to show a count, use a [badge](/components/badge) instead.
+Labels are useful in a few scenarios: 
+- When you want to highlight an element on a page to draw attention to it or make it more searchable. 
+- To tag items of the same category. If you want to show a count, use a [badge](/components/badge) instead.
+- For use in [filtering](/patterns/filters) to indicate user selections, similar to the now deprecated [chip](/component/chip) component.
 
-There are 2 specific label types:
+There are 2 label sizes:
 
-<img src="./img/label-features-type.png" alt="Different label types" width="180"/>
+![sdf](./img/label-sizes.png)
 
 1. **Default labels:** Use by default when needing a label.
 2. **Compact labels:** Use when confronted by space limitations and a smaller label is required (for example, in a table).
 
-Labels can be used almost anywhere in a UI, but are commonly used in table views and catalogs as shown below. 
+Labels can be used almost anywhere in a UI. They are commonly used in tables, card views, and filters.
 
-<img src="./img/label-table-view.png" alt="Example labels in a table" width="1209"/>
+#### Labels in tables
 
-<img src="./img/catalog-view.png" alt="Example labels in a catalog" width="1204"/>
+    ![](./img/table-with-labels.png)
 
-#### Color considerations
-Both default and compact labels come in the following default colors: gray, blue, green, orange, red, purple, and cyan. We offer a wide array of colors to allow for color coding labels within UIs. Label colors can be used to indicate status if desired, but do not have to. Regardless, we recommend you avoid using the red label unless it indicates danger or an error state.
+#### Labels in card views
+
+    ![](./img/card-view-labels.png)
 
+#### Filter labels
 
-<img src="./img/filled-labels.png" alt="Label colors" width="646"/>
+Labels are typically used in filter and selection use cases to indicate what selections a user has made. They utilize [label groups](#label-groups) to organize selections by category for added clarity. When there are multiple filter labels within a group, any data that matches one or more of the labels will be filtered. It is not required for all filter labels to be apply in order to match a filtered item.
+
+![](./img/label-filters.png)
+
+#### Color considerations
 
+Labels can utilize both our [status](/design-foundations/colors#status-and-state-colors)  and [nonstatus](/design-foundations/colors#nonstatus-colors) color palettes.
 
 While you may use other colors for your labels, we recommend using the ones provided as they have been carefully selected to be accessible with the PatternFly library. If you choose to use other colors, be mindful of picking [accessible text color and icon color](/accessibility/testing-your-accessibility) to go with the label background.
 
+The colors you should use differs for status and nonstatus labels:
 
-### Variations
-* [Unfilled](#when-to-use-filled-or-unfilled-labels)
-* [Filled](#when-to-use-filled-or-unfilled-labels)
-* [Dismissable](#when-to-use-dismissable-labels)
-* [With icons](#when-to-use-labels-with-icons)
-* [Clickable](#when-to-use-clickable-labels)
-* [Editable](#when-to-use-editable-labels)
+##### Status labels
 
-#### When to use filled or unfilled labels
+Status colors can be used to indicate danger, warning, success, info, or custom statuses. 
+
+    ![](./img/status-labels.png)
+
+##### Nonstatus labels
+
+We offer a nonstatus color palette, which you can use to color code labels that don't correspond to any status level, including red, orange, orange red, gold, green, cyan, blue, purple, and gray. 
+
+    ![](./img/nonstatus-labels.png)
 
-Use the filled option to add more visual prominence to a label. If your use case requires a mix of clickable and non-clickable labels, consider using one type for clickable and another for non-clickable. Whatever convention you choose, be sure to maintain consistency through your UI.
+**Note:** We recommend to avoid using red, unless you're indicating danger or an error state.
 
-1. Unfilled
+### Variations
+- [Filled or unfilled labels](#when-to-use-filled-or-unfilled-labels)
+- [Labels with icons](#when-to-use-labels-with-icons)
+- [Editable labels](#when-to-use-editable-labels)
+- [dismissible labels](#when-to-use-dismissible-labels)
+- [Clickable labels](#when-to-use-clickable-labels)
 
-<img src="./img/unfilled-labels.png" alt="Unfilled labels" width="646"/>
+#### When to use filled or unfilled labels
 
-2. Filled
+Use the filled option to add more visual prominence to a label. If your use case requires a mix of clickable and non-clickable labels, consider using 1 type for clickable and another for non-clickable. Whatever convention you choose, be sure to maintain consistency through your UI.
 
-<img src="./img/filled-labels.png" alt="Filled labels" width="646"/>
+Both status and nonstatus labels can be filled or unfilled.
 
-Use the filled option to add more visual prominence to a label.
+##### Filled
 
-#### When to use dismissable labels
+![Filled label styles for light and dark themes.](./img/filled-labels.png)
 
-Use a dismissable label for labels that are easily removed. A common use case for dismissable labels is when users can edit labels.
+##### Unfilled
 
-<img src="./img/edit-labels.png" alt="Example of dismissable labels" width="646"/>
+![Unfilled label styles for light and dark themes.](./img/unfilled-labels.png)
 
 #### When to use labels with icons
-Add an icon to your label in cases where additional visual information is helpful. You can also use them to distinguish labels of the same color if needed.
 
-<img src="./img/labels-with-icons.png" alt="Example of different colored labels with icons" width="318"/>
+While status labels will automatically contain an appropriate icon, you can also add an icon to nonstatus labels, when additional visual information would be helpful. 
 
-#### When to use clickable labels
-Use a clickable label for actionable labels. A common use case for clickable labels is when a user may want to filter by a specific label. You can also use label links to redirect users to a new page.
+![](./img/card-labels.png)
 
-<img src="./img/clickable-label.png" alt="Example of a clickable label" width="220"/>
+Icons can also help distinguish labels of the same color.
 
 #### When to use editable labels
 Use editable labels when you want to allow users to organize and select resources manually. Adding editable labels enables the user to query for objects that have similar, dissimilar, or overlapping labels.
 
-<img src="./img/editable-label-feature.png" alt="Example of a editable label" width="165"/>
+![](./img/editable-labels.png)
+#### When to use dismissible labels
+
+Use a dismissible label for labels that can be easily removed. Editable labels are often dismissible as well.
+
+![](./img/dismissible-labels.png)
+
+#### When to use clickable labels
+Use a clickable label for labels that trigger actions or link to new pages. 
+
+As shown in the following image, a common use case for clickable labels is when a user may want to filter by a specific label. 
+
+![](./img/clickable-labels.png)
 
 ## Label groups
 
@@ -94,66 +126,61 @@ Label groups are used to display multiple labels at once.
 ### Elements
 Label groups have a number of components to them.
 
-<img src="./img/label-group-elements.png" alt="Elements of a label group" width="532"/>
+![](./img/label-group-elements.png)
 
-1. **Group category (optional):** indicates the group category
-2. **Label:** indicates the labels applied.
-3. **Overflow:** indicates if there are more labels to show.
-4. **Group close (optional):** deletes the entire label group.
+1. **Label:** Indicates the labels applied.
+1. **Group label (optional):** Indicates the group category or name.
+1. **Overflow:** Indicates if there are more labels to show.
+1. **Group close (optional):** Deletes the entire label group.
 
-Label groups can use various combinations of these features to build custom label groups.
+You can build custom label groups using various combinations of these features.
 
 ### Usage
-Label groups should be used when there are multiple labels assigned to a component. They can be used almost anywhere in a UI, but are commonly used in table views and description lists. Label groups can be oriented either horizontally or vertically and can optionally be named and be dismissable. You may also make the label group editable to allow users to edit an existing label or add a new label.
+Label groups should be used when there are multiple labels assigned to a component. They can be used almost anywhere in a UI, but are commonly used in table views and description lists. Label groups can be oriented either horizontally or vertically and can optionally be named and be dismissible. You may also make the label group editable to allow users to edit an existing label or add a new label.
 
 #### Label groups in a table
-<img src="./img/table-view.png" alt="Table with labels" width="1200"/>
 
+In a table, basic label groups can 
+
+![](./img/table-with-label-group.png)
 #### Label groups in a table popover
 <img src="./img/table-view-2.png" alt="Table with vertical label group in a popover" width="1200"/>
 
 #### Label groups in a description list
-<img src="./img/description-list.png" alt="Description list with labels" width="520"/>
+
+![](./img/description-list-labels.png)
 
 ### Variations
 
 #### Editable label group
 
-##### Adding a new label to a group, without a group label
-This variation can be used when there is a need to add a new label or edit an existing label within a label group, and the label group does not have a group label.
+##### Adding a new label to a group
 
-<img src="./img/editable-label-group-in-a-table_1.png" alt="Adding a new label to a group without a group label" width="1200"/>
+This pattern can be followed to let users add a new label or edit an existing label within a group.
 
-When the user selects the ‘Add label’ button, a new label is added as the first label in the group. Once the new label is added, the user can overwrite the default value by double clicking the label.
-<img src="./img/editable-label-group-in-a-table_1-1.png" alt="Adding a new label to a group without a group label" width="1200"/>
+![](./img/adding-label.png)
 
-##### Adding a new label to a group, with a group label
-This variation can be used when there is a need to add a new label within the label group, and the label group has a group label. 
+When a user selects the **Add label** button, a new label is added to the beginning of the group. Once the new label is added, they can overwrite the default value by double clicking the label.
 
-<img src="./img/editable-label-group-in-a-table_2.png" alt="Add a new label to a group with a group label" width="1200"/>
+![](./img/added-label.png)
 
-When the user selects the ‘Add label’ button, a new label is added as the first label in the group. Once the new label is added, the user can overwrite the default value by double clicking the label.
-<img src="./img/editable-label-group-in-a-table_2_1.png" alt="OVerwrite default value" width="1200"/>
+##### Adding a new label to a group from a list of preselected labels
 
-##### Adding a new label to a label group from a list of preselected labels
-This variation can be used when only a fixed set of labels can be added to a label group. 
-<img src="./img/editable-label-group-in-a-table_3.png" alt="Add fixed set of labels to a label group" width="1200"/>
+You can provide users with a fixed set of label options to add to a group. 
 
-When the user selects the ‘Add label’ button, a drop list is displayed with the existing list of values. User selects a new label from the values in the drop list.
-<img src="./img/editable-label-group-in-a-table_3_1.png" alt="Add new label and select value from existing list" width="1200"/>
+When a user selects the **Add label** button, display a menu of available label options. They can select a new label from the values in the menu.
 
-The new label is added with the selected value and can not be changed. 
-<img src="./img/editable-label-group-in-a-table_3_2.png" alt="New lavel added with selected value" width="1200"/>
+![](./img/adding-label-options.png)
 
+The new label is added with the selected value and can not be edited. 
 ##### Adding a new custom label to a label group
-This variation can be used when you want to allow users to customize the labels they add to a label group. 
-<img src="./img/editable-label-group-in-a-table_4.png" alt="Add customized label to a label group" width="1200"/>
 
-When the user selects the ‘Add label’ button, it opens up a modal from which they can select the attributes for the new label. These include label text, color, icon, filled vs outlined, ability to dismiss, and editability. The options shown can be customized to fit your use cases.
-<img src="./img/editable-label-group-in-a-table_4_1_add-label-model.png" alt="Select custom label properties" width="1200"/>
+You can allow users to customize the labels they add to a group. 
+
+When a user selects the **Add label** button, it opens up a modal, where they can select the attributes for their new label, including the label type, text, color, icon, and the ability to dismiss or edit. Customize these options to fit your needs.
 
-The new label is created based on the attributes selected by the user and it can not be changed.
-<img src="./img/editable-label-group-in-a-table_4_2.png" alt="New custom label added to a label group" width="1200"/>
+![](./img/adding-label-modal.png)
 
+Once the new label is created, it cannot be edited. Users will need to add a new label if they want to make changes.
 ## Accessibility
 For information regarding accessibility, visit the [labels accessibility](/components/label/accessibility) tab.