diff --git a/src/patternfly/components/Label/examples/Label.css b/src/patternfly/components/Label/examples/Label.css index 651b4aac63..6c0b5ecbcc 100644 --- a/src/patternfly/components/Label/examples/Label.css +++ b/src/patternfly/components/Label/examples/Label.css @@ -1,6 +1,7 @@ #ws-core-c-label-filled .ws-preview-html, #ws-core-c-label-outline .ws-preview-html, #ws-core-c-label-compact .ws-preview-html, +#ws-core-c-label-large .ws-preview-html, #ws-core-c-label-overflow .ws-preview-html { margin: -4px; } @@ -8,6 +9,7 @@ #ws-core-c-label-filled .pf-v6-c-label, #ws-core-c-label-outline .pf-v6-c-label, #ws-core-c-label-compact .pf-v6-c-label, +#ws-core-c-label-large .pf-v6-c-label, #ws-core-c-label-overflow .pf-v6-c-label { margin: 4px; } diff --git a/src/patternfly/components/Label/examples/Label.md b/src/patternfly/components/Label/examples/Label.md index 384a1d7821..80843a76a3 100644 --- a/src/patternfly/components/Label/examples/Label.md +++ b/src/patternfly/components/Label/examples/Label.md @@ -38,6 +38,25 @@ import './Label.css' label--IsCompact=true}} ``` +### Large + +```hbs +{{> label--variants + label--IsFilled=true + label--variants--title="Large" + label--variants--id="large" + label--IsLarge=true}} + +

+ +{{> label--variants + label--variants--title="Large" + label--variants--id="large-outline" + label--color="blue" + label--IsOutlined=true + label--IsLarge=true}} +``` + ### Overflow This style of label is used to indicate overflow within a label group. @@ -109,13 +128,13 @@ Use a label group to display multiple labels at once. {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -147,13 +166,13 @@ Use a label group to display multiple labels at once. {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="blue" label--IsOverflow=true label-text--value="3 more"}} @@ -169,19 +188,19 @@ Use a label group to display multiple labels at once. {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="teal" label-text--value="Label 4" label-icon--value="info-circle"}} + {{> label label--color="teal" label-text--value="Label 4" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="purple" label-text--value="Label 5" label-icon--value="info-circle"}} + {{> label label--color="purple" label-text--value="Label 5" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--IsOverflow=true label-text--value="3 less"}} @@ -199,13 +218,13 @@ The contents of a label group can be modified by removing labels or adding new o {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--IsAdd=true label-text--value="Add label"}} @@ -224,13 +243,13 @@ The contents of a label group can be modified by removing labels or adding new o {{/label-group-label}} {{#> label-group-list label-group-list--attribute=(concat 'aria-labelledby="' label-group--id '-label"')}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -246,22 +265,22 @@ The contents of a label group can be modified by removing labels or adding new o {{/label-group-label}} {{#> label-group-list label-group-list--attribute=(concat 'aria-labelledby="' label-group--id '-label"')}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="teal" label-text--value="Label 4" label-icon--value="info-circle"}} + {{> label label--color="teal" label-text--value="Label 4" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="orange" label-text--value="Label 5" label-icon--value="info-circle"}} + {{> label label--color="orange" label-text--value="Label 5" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="red" label-text--value="Label 6" label-icon--value="info-circle"}} + {{> label label--color="red" label-text--value="Label 6" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -275,13 +294,13 @@ The contents of a label group can be modified by removing labels or adding new o {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -294,13 +313,13 @@ The contents of a label group can be modified by removing labels or adding new o {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--IsOverflow=true label-text--value="3 more"}} @@ -316,19 +335,19 @@ The contents of a label group can be modified by removing labels or adding new o {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="teal" label-text--value="Label 4" label-icon--value="info-circle"}} + {{> label label--color="teal" label-text--value="Label 4" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="purple" label-text--value="Label 5" label-icon--value="info-circle"}} + {{> label label--color="purple" label-text--value="Label 5" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--IsOverflow=true label-text--value="3 less"}} @@ -347,13 +366,13 @@ The contents of a label group can be modified by removing labels or adding new o {{/label-group-label}} {{#> label-group-list label-group-list--attribute=(concat 'aria-labelledby="' label-group--id '-label"')}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -504,21 +523,21 @@ In addition to the JavaScript management of [editable labels](/components/label# {{> label label--IsCompact=true label-text--value="Label 1" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="blue" label--IsCompact=true label-text--value="Label 2" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="green" label--IsCompact=true label-text--value="Label 3" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -531,21 +550,21 @@ In addition to the JavaScript management of [editable labels](/components/label# {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label--IsCompact=true label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label--IsCompact=true label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="blue" label--IsCompact=true label-text--value="Label 2" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="green" label--IsCompact=true label-text--value="Label 3" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--IsOverflow=true label--IsCompact=true label-text--value="3 more"}} @@ -561,21 +580,21 @@ In addition to the JavaScript management of [editable labels](/components/label# {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label--IsCompact=true label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label--IsCompact=true label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="blue" label--IsCompact=true label-text--value="Label 2" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} {{> label label--color="green" label--IsCompact=true label-text--value="Label 3" - label-icon--value="info-circle"}} + label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -599,13 +618,13 @@ In addition to the JavaScript management of [editable labels](/components/label# {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label--color="blue" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label--color="blue" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label-text--value="Label 2" label--color="green" label-icon--value="info-circle"}} + {{> label label-text--value="Label 2" label--color="green" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label-text--value="Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula" label-icon--value="info-circle"}} + {{> label label-text--value="Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -617,13 +636,13 @@ In addition to the JavaScript management of [editable labels](/components/label# {{#> label-group-main}} {{#> label-group-list label-group-list--attribute='aria-label="Group of labels"'}} {{#> label-group-list-item}} - {{> label label-text--value="Label 1" label-icon--value="info-circle"}} + {{> label label-text--value="Label 1" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="blue" label-text--value="Label 2" label-icon--value="info-circle"}} + {{> label label--color="blue" label-text--value="Label 2" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{#> label-group-list-item}} - {{> label label--color="green" label-text--value="Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula" label-icon--value="info-circle"}} + {{> label label--color="green" label-text--value="Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula" label-icon--value="rh-ui-information-fill"}} {{/label-group-list-item}} {{/label-group-list}} {{/label-group-main}} @@ -646,6 +665,9 @@ In addition to the JavaScript management of [editable labels](/components/label# | `.pf-m-filled` | `.pf-v6-c-label` | Modifies label for filled styles. | | `.pf-m-outline` | `.pf-v6-c-label` | Modifies label for outline styles. | | `.pf-m-compact` | `.pf-v6-c-label` | Modifies label for compact styles. | +| `.pf-m-large` | `.pf-v6-c-label` | Modifies label for large styles. | +| `.pf-m-clickable` | `.pf-v6-c-label` | Modifies label for clickable styles when `.pf-v6-c-label__content` is an `` or `