diff --git a/scripts/gulp/html.js b/scripts/gulp/html.js
index 62a4838ae6..6d9e6d3bf6 100644
--- a/scripts/gulp/html.js
+++ b/scripts/gulp/html.js
@@ -37,6 +37,16 @@ hbsInstance.registerHelper('ifEquals', (arg1, arg2, options) => {
// something else
// {{/ifEquals}}
+hbsInstance.registerHelper('ternary', (testValue, trueValue, fallback) => {
+ return testValue ? trueValue : fallback;
+});
+
+// Using ternary
+// if custom value for select--width: {{#> select select--width='160px'}}Filter by name{{/select}}
+// else custom value for select--width: {{#> select)}}Filter by name{{/select}}
+// {{#> select select--id=(concat toolbar--id '-select-name') select--width=(ternary toolbar-items-search-filter--width toolbar-items-search-filter--width '175px') select-toggle--icon="fas fa-filter"}}
+// {{> toolbar-item-search-filter toolbar-items-search-filter--width="300px"}}
+
function compileHBS0(srcFiles) {
return srcFiles.pipe(
through2.obj((chunk, _, cb2) => {
diff --git a/src/patternfly/components/Select/select.hbs b/src/patternfly/components/Select/select.hbs
index 50246ac639..ea3c45f24d 100644
--- a/src/patternfly/components/Select/select.hbs
+++ b/src/patternfly/components/Select/select.hbs
@@ -4,6 +4,9 @@
{{~#if select--IsWarning}} pf-m-warning{{/if}}
{{~#if select--IsInvalid}} pf-m-invalid{{/if}}
{{~#if select--modifier}} {{select--modifier}}{{/if}}"
+ {{#if select--width}}
+ style="width: {{select--width}}"
+ {{/if}}
{{#if select--attribute}}
{{{select--attribute}}}
{{/if}}>
diff --git a/src/patternfly/components/Toolbar/examples/Toolbar.md b/src/patternfly/components/Toolbar/examples/Toolbar.md
index fb58e67a09..bfe5434d21 100644
--- a/src/patternfly/components/Toolbar/examples/Toolbar.md
+++ b/src/patternfly/components/Toolbar/examples/Toolbar.md
@@ -34,6 +34,10 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
+| `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
+| `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
+| `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
### Special notes
@@ -664,6 +668,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-align-items-center` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies toolbar element to vertically align children to center. |
+| `.pf-m-align-items-baseline` | `.pf-c-toolbar__group` | Modifies toolbar group to vertically align children to baseline. |
+| `.pf-m-align-self-center` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to center. |
+| `.pf-m-align-self-baseline` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar element to vertically align self to baseline. |
| `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
| `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
| `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
diff --git a/src/patternfly/components/Toolbar/toolbar-item-search-filter.hbs b/src/patternfly/components/Toolbar/toolbar-item-search-filter.hbs
index 41fd7f86b5..ad17a4252e 100644
--- a/src/patternfly/components/Toolbar/toolbar-item-search-filter.hbs
+++ b/src/patternfly/components/Toolbar/toolbar-item-search-filter.hbs
@@ -1,8 +1,16 @@
{{#> toolbar-item toolbar-item--modifier=(concat 'pf-m-search-filter ' toolbar-item-search-filter--modifier)}}
{{#> input-group input-group--attribute=(concat 'aria-label="search filter" role="group"')}}
- {{#> select select--attribute='style="width: 175px"' select--id=(concat toolbar--id '-select-name') select-toggle--icon="fas fa-filter"}}
- Name
+ {{#> select select--id=(concat toolbar--id '-select-name') select--width=(ternary toolbar-items-search-filter--width toolbar-items-search-filter--width '175px') select-toggle--icon="fas fa-filter"}}
+ {{#if toolbar-items-search-filter--text}}
+ {{{toolbar-items-search-filter--text}}}
+ {{else}}
+ Name
+ {{/if}}
{{/select}}
- {{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group" text-input-group-text-input--placeholder="Filter by name"}}
+ {{#if toolbar-items-search-filter--text}}
+ {{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group" text-input-group-text-input--placeholder=(concat "Filter by " toolbar-items-search-filter--text) text-input-group--attribute='style="width: auto"'}}
+ {{else}}
+ {{> text-input-group--search-input text-input-group--id="text-input-group-search-input-group" text-input-group-text-input--placeholder="Filter by name" text-input-group--attribute='style="width: auto"'}}
+ {{/if}}
{{/input-group}}
{{/toolbar-item}}
diff --git a/src/patternfly/components/Toolbar/toolbar.scss b/src/patternfly/components/Toolbar/toolbar.scss
index 4d905a1906..779e7ffaca 100644
--- a/src/patternfly/components/Toolbar/toolbar.scss
+++ b/src/patternfly/components/Toolbar/toolbar.scss
@@ -13,9 +13,12 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
// Item
--pf-c-toolbar__item--Display: block;
--pf-c-toolbar__item--MinWidth--base: auto;
+ --pf-c-toolbar__item--AlignSelf: auto;
// Group
--pf-c-toolbar__group--Display: flex;
+ --pf-c-toolbar__group--AlignItems: baseline;
+ --pf-c-toolbar__group--AlignSelf: auto;
// Sticky
--pf-c-toolbar--m-sticky--ZIndex: var(--pf-global--ZIndex--xs);
@@ -28,6 +31,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
// Content section
--pf-c-toolbar__content-section--Display: flex;
+ --pf-c-toolbar__content-section--AlignItems: baseline;
// Insets
--pf-c-toolbar--m-page-insets--inset: var(--pf-global--spacer--md); // make this the default inset at breaking change
@@ -208,9 +212,26 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
@include pf-hidden-visible(var(--pf-c-toolbar__group--Display));
- align-items: center;
+ align-items: var(--pf-c-toolbar__group--AlignItems);
+ align-self: var(--pf-c-toolbar__group--AlignSelf);
margin-right: var(--pf-c-toolbar--spacer);
+ &.pf-m-align-items-center {
+ align-items: center;
+ }
+
+ &.pf-m-align-items-baseline {
+ align-items: baseline;
+ }
+
+ &.pf-m-align-self-center {
+ align-self: center;
+ }
+
+ &.pf-m-align-self-baseline {
+ align-self: baseline;
+ }
+
// Button group
&.pf-m-button-group {
--pf-c-toolbar--spacer: var(--pf-c-toolbar__group--m-button-group--spacer);
@@ -270,10 +291,19 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
@include pf-build-css-variable-stack("--pf-c-toolbar__item--MinWidth--base", "--pf-c-toolbar__item--MinWidth", $pf-c-toolbar--breakpoint-map);
@include pf-hidden-visible(var(--pf-c-toolbar__item--Display));
+ align-self: var(--pf-c-toolbar__item--AlignSelf);
width: var(--pf-c-toolbar__item--Width--base);
min-width: var(--pf-c-toolbar__item--MinWidth--base);
margin-right: var(--pf-c-toolbar--spacer);
+ &.pf-m-align-self-center {
+ align-self: center;
+ }
+
+ &.pf-m-align-self-baseline {
+ align-self: baseline;
+ }
+
// Overflow menu
&.pf-m-overflow-menu {
--pf-c-toolbar--spacer: var(--pf-c-toolbar__item--m-overflow-menu--spacer);
@@ -329,7 +359,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
}
}
-
.pf-c-toolbar__expand-all-icon {
display: inline-block;
transition: var(--pf-c-toolbar__expand-all-icon--Transition);
@@ -339,7 +368,6 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
.pf-c-toolbar__content,
.pf-c-toolbar__content-section {
flex-wrap: wrap;
- align-items: center;
}
// Content
@@ -347,6 +375,7 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
@include pf-hidden-visible(var(--pf-c-toolbar__content--Display));
position: relative;
+ align-items: center;
padding-right: var(--pf-c-toolbar__content--PaddingRight);
padding-left: var(--pf-c-toolbar__content--PaddingLeft);
}
@@ -355,7 +384,12 @@ $pf-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl"
.pf-c-toolbar__content-section {
@include pf-hidden-visible(var(--pf-c-toolbar__content-section--Display));
+ align-items: var(--pf-c-toolbar__content-section--AlignItems);
width: 100%;
+
+ &.pf-m-align-items-center {
+ align-items: center;
+ }
}
// Expandable content
diff --git a/src/patternfly/demos/Toolbar/examples/Toolbar.md b/src/patternfly/demos/Toolbar/examples/Toolbar.md
index 6ba509807f..16a37289be 100644
--- a/src/patternfly/demos/Toolbar/examples/Toolbar.md
+++ b/src/patternfly/demos/Toolbar/examples/Toolbar.md
@@ -7,7 +7,7 @@ import './Toolbar.css'
## Demos
-### Toolbar attribute value search filter desktop
+### Toolbar attribute value search filter on desktop
```hbs
{{#> toolbar toolbar--id="toolbar-attribute-value-search-filter-desktop-example"}}
{{#> toolbar-content}}
@@ -31,6 +31,61 @@ import './Toolbar.css'
{{/toolbar}}
```
+### Toolbar with validation on desktop
+```hbs isFullscreen
+{{> page-template page-template--id="toolbar-pagination-management-example"}}
+
+{{#* inline "page-template-main-content"}}
+ {{> page-template-breadcrumb}}
+ {{> page-template-title}}
+ {{#> page-main-section}}
+ {{#> toolbar toolbar--id="toolbar-with-validation-example"}}
+ {{#> toolbar-content}}
+ {{#> toolbar-content-section}}
+ {{#> toolbar-group toolbar-group--modifier="pf-m-toggle-group pf-m-show-on-2xl"}}
+ {{> toolbar-toggle toolbar-toggle--IsExpanded="false"}}
+ {{#> toolbar-group toolbar-group--modifier="pf-m-filter-group"}}
+ {{#> toolbar-item}}
+ {{#> input-group input-group--attribute=(concat 'aria-label="search filter" role="group"')}}
+ {{#> select select--id=(concat toolbar--id '-select-month') select--width='160px' select-toggle--icon="fas fa-filter"}}
+ Last month
+ {{/select}}
+ {{#> date-picker date-picker--id=(concat toolbar--id "-helper-text") date-picker-helper-text--text="MM/DD/YYYY"}}
+ {{#> input-group}}
+ {{> form-control controlType="input" input="true" form-control--attribute=(concat 'type="text" value="2020-03-05" id="' date-picker--id '-input" name="' date-picker--id '-input" aria-label="Date picker"')}}
+ {{#> button button--modifier="pf-m-control" button--attribute='aria-label="Toggle date picker"'}}
+
+ {{/button}}
+ {{/input-group}}
+ {{/date-picker}}
+ {{#> date-picker date-picker--id=(concat toolbar--id "-invalid") date-picker-helper-text--text="Max: 08/10/2022" date-picker-helper-text--IsError="true"}}
+ {{#> input-group}}
+ {{> form-control controlType="input" input="true" form-control--attribute=(concat 'aria-invalid="true" type="text" value="2020-03-05" id="' date-picker--id '-input" name="' date-picker--id '-input" aria-label="Date picker"')}}
+ {{#> button button--modifier="pf-m-control" button--attribute='aria-label="Toggle date picker"'}}
+
+ {{/button}}
+ {{/input-group}}
+ {{> date-picker-helper-text date-picker-helper-text--text="MM/DD/YYYY" date-picker-helper-text--IsError=false}}
+ {{/date-picker}}
+ {{/input-group}}
+ {{/toolbar-item}}
+ {{/toolbar-group}}
+ {{> toolbar-item-search-filter toolbar-items-search-filter--text="Description" toolbar-items-search-filter--width="160px"}}
+ {{/toolbar-group}}
+ {{#> button button--modifier="pf-m-primary"}}
+ Download
+ {{/button}}
+ {{/toolbar-content-section}}
+ {{> toolbar-expandable-content}}
+ {{/toolbar-content}}
+ {{/toolbar}}
+
+ {{> table-simple-table page--id=(concat toolbar--id '-table')}}
+
+ {{/page-main-section}}
+{{/inline}}
+```
+
### Toolbar attribute value search filter on mobile
```hbs
{{#> toolbar toolbar--id="toolbar-attribute-value-search-filter-mobile-example"}}
@@ -56,7 +111,7 @@ import './Toolbar.css'
{{/toolbar}}
```
-### Toolbar attribute value single select filter desktop
+### Toolbar attribute value single select filter on desktop
```hbs
{{#> toolbar toolbar--id="toolbar-attribute-value-single-select-filter-desktop-example"}}
{{#> toolbar-content}}
@@ -127,7 +182,7 @@ import './Toolbar.css'
{{/toolbar}}
```
-### Toolbar attribute value checkbox select filter desktop
+### Toolbar attribute value checkbox select filter on desktop
```hbs
{{#> toolbar toolbar--id="toolbar-attribute-value-checkbox-select-filter-desktop-example"}}
{{#> toolbar-content}}