Syndesis: Introduce background, box-shadow, and border-color CSS modifier for .toolbar-pf

[mcoker]

I see this block of CSS in various parts of the application where we're modifying PatternFly's .toolbar-pf:

1. changing background-color
2. removing box-shadow
3. either removing the border or modifying border-color
   
   
   
   • the border could also be "removed" by setting border-color: transparent;, which would be a 1px difference from border: none;, since the border would still be there, just invisible.
   
   

Should we introduce modifiers on the parent element that would apply to a child .toolbar-pf:

1. .syn-toolbar-bg--#{$color}
2. .syn-toolbar-shadow--disabled
3. .syn-toolbar-border--#{$color} (and use transparent to "remove" the border)

Below are places I've found this repetitive CSS used:

• customizations/api-connector/api-connector-list/api-connector-list.component.scss

  & ::ng-deep .toolbar-pf {
  background: inherit;
  box-shadow: none;
  border-bottom-color: transparent;
  }

• customizations/tech-extensions/tech-extensions-list.component.scss

  :host ::ng-deep .toolbar-pf {
  background: inherit;
  border-bottom: none;
  box-shadow: none;
  }

• integration/edit-page/action-configure/action-configure.component.scss

  .toolbar-pf {
  background: none !important;
  border: none !important;

  .pre-content {
  .toolbar-pf {
  background: none !important;
  border: none !important;

• integration/edit-page/action-select/action-select.component.scss

  .toolbar-pf {
  background: none !important;
  border-bottom: 1px #d9d9d9 solid;
  box-shadow: none;

• integration/edit-page/step-select/step-select.component.scss

  .toolbar-pf {
  background: none !important;
  border-bottom: 1px #d9d9d9 solid;
  box-shadow: none;

• integration/edit-page/connection-select/connection-select.component.scss

  .toolbar-pf {
  background: none !important;
  border-bottom: 1px #d9d9d9 solid;
  box-shadow: none;

• integration/edit-page/integration-basics/integration-basics.component.scss

  .toolbar-pf {
  background: none !important;
  border-bottom: 1px #d9d9d9 solid;
  box-shadow: none;

• integration/edit-page/save-or-add-step/save-or-add-step.component.scss

  .toolbar-pf {
  background: none !important;
  border-bottom: 1px #d9d9d9 solid;
  box-shadow: none;

• integration/edit-page/step-configure/step-configure.component.scss

  .toolbar-pf {
  background: none !important;
  border-bottom: 1px #d9d9d9 solid;
  box-shadow: none;

• settings/oauth-apps/oauth-apps.component.scss

  & /deep/ .toolbar-pf {
  background: inherit;
  box-shadow: none;
  border-bottom-color: transparent;
  }

• support/support.component.scss

  ::ng-deep .toolbar-pf {
  border: none;
  box-shadow: none;

[gashcrumb]

+1 from me, any refactoring in the styling like this is more than welcome :-)

[sjcox-rh]

+1 !! Agreed with @gashcrumb. Woot!

On Thu, Feb 15, 2018 at 5:26 AM, Stan Lewis [e-mail]
wrote:

+1 from me, any refactoring in the styling like this is more than welcome
:-)

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/syndesisio/syndesis/issues/1470#issuecomment-365926488,
or mute the thread
https://github.com/notifications/unsubscribe-auth/APgSBGnHYbQx6uKvGUu6JatTcr8w6Nu2ks5tVDCMgaJpZM4R8_ZT
.

--
Sarah Jane Cox
User Interaction Designer
User Experience Design Team

Red Hat, Inc.
http://www.redhat.com/about/whoisredhat/redhatstories.html?intcmp=70160000000TB9vAAG&

[deeleman]

Yeah, let's remove all this duplicated code for once and for all. Tips:

1. Since that block of code is always the same, I'd wrap it up inside a configurable mixin. That will allow you re-use it under different incarnations by tweaking whatever you need on each case.
2. Expose the most used incarnations of such mixin though the classnames you already suggested.
3. Force the default .toolbar-pf classname to inherit the classname. so we can spare all that abuse of the ::ng-deep Shadow Piercing combinator, which will be phased out soon.

@mixin toolbar($border-bottom: none, $background: inherit, $box-shadow: none) {
  background: $background;
  box-shadow: $box-shadow;
  border-bottom-color: $border-bottom;
}

Please note that I added the border-bottom parameter first, as it is the most likely to change. Then you can just code against .toolbar-pf like this (in _overrides.scss):

.toolbar-pf {
  @include toolbar;
}

And for files such as integration/edit-page/action-select/action-select.component.scss, just do the following:

.toolbar-pf {
  @include toolbar(1px #d9d9d9 solid);
}

.syn-toolbar-border--#{$color} (and use transparent to "remove" the border)

Bear in mind that will leave the space consumed by the border as empty.

[mcoker]

@deeleman thanks for the tips! Since I don't want to change the default toolbar for most pages, in the toolbar mixin, would it be a good practice to use the default values for the PF toolbar in that mixin instead?

@mixin toolbar($border-bottom: 1px solid $sidebar-pf-border-color, 
  $background: $color-pf-white,
  $box-shadow: 0 1px 0px rgba($color-pf-black, 0.045)) {
    border-bottom: $border-bottom;
    background: $background;
    box-shadow: $box-shadow;
}

And I don't see how .toolbar-pf { @include toolbar(...) } in a component's SCSS file will allow me to break outside of ::ng-deep since the .toolbar-pf selector that's injected will contain the encapsulation attribute.