fix(toolbar): added center and baseline alignments (patternfly#5201)

mattnolting · May 18, 2023 · 8160887 · 8160887
1 parent 111ab2f
commit 8160887
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,14 +368,14 @@ $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
 .pf-c-toolbar__content {
   @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
@@ -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"'}}
+                        <i class="fas fa-calendar-alt" aria-hidden="true"></i>
+                      {{/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"'}}
+                        <i class="fas fa-calendar-alt" aria-hidden="true"></i>
+                      {{/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}}
+    <div>
+      {{> table-simple-table page--id=(concat toolbar--id '-table')}}
+    </div>
+  {{/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}}