From 4f330bcb8372103e8695220986f79978496e5582 Mon Sep 17 00:00:00 2001 From: i505485 Date: Fri, 27 Aug 2021 13:16:07 +0530 Subject: [PATCH 1/5] fix(core): remove hardcoded style from ngx for toolbar component --- .../toolbar-overflow-example.component.html | 12 +- .../toolbar/toolbar-form-label.directive.ts | 4 +- .../lib/toolbar/toolbar-label.directive.ts | 4 +- .../toolbar-overflow-button-menu.directive.ts | 11 ++ .../toolbar-overflow-button.directive.ts | 11 ++ .../src/lib/toolbar/toolbar.component.html | 6 +- .../src/lib/toolbar/toolbar.component.scss | 122 ------------------ libs/core/src/lib/toolbar/toolbar.module.ts | 4 + package-lock.json | 12 +- package.json | 2 +- 10 files changed, 46 insertions(+), 142 deletions(-) create mode 100644 libs/core/src/lib/toolbar/toolbar-overflow-button-menu.directive.ts create mode 100644 libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts diff --git a/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html b/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html index 6c28849cb0e..dfc04e6cb96 100644 --- a/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html +++ b/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html @@ -43,7 +43,7 @@ style="max-width: 200px;" /> - + @@ -51,10 +51,10 @@ - - + + - - - + + + diff --git a/libs/core/src/lib/toolbar/toolbar-form-label.directive.ts b/libs/core/src/lib/toolbar/toolbar-form-label.directive.ts index 2fd3e399bde..04a3e6f2f3b 100644 --- a/libs/core/src/lib/toolbar/toolbar-form-label.directive.ts +++ b/libs/core/src/lib/toolbar/toolbar-form-label.directive.ts @@ -1,11 +1,11 @@ -import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive } from '@angular/core'; +import { Directive } from '@angular/core'; import { ToolbarItemDirective } from './toolbar-item.directive'; @Directive({ // tslint:disable-next-line: directive-selector selector: '[fd-toolbar-form-label]', host: { - class: 'fd-form-label fd-toolbar__overflow__form-label' + class: 'fd-form-label fd-toolbar__overflow-form-label' } }) export class ToolbarFormLabelDirective extends ToolbarItemDirective {} diff --git a/libs/core/src/lib/toolbar/toolbar-label.directive.ts b/libs/core/src/lib/toolbar/toolbar-label.directive.ts index b6d20dbeed0..4409ff72c6a 100644 --- a/libs/core/src/lib/toolbar/toolbar-label.directive.ts +++ b/libs/core/src/lib/toolbar/toolbar-label.directive.ts @@ -1,11 +1,11 @@ -import { Component, ViewEncapsulation, ChangeDetectionStrategy, Directive } from '@angular/core'; +import { Directive } from '@angular/core'; import { ToolbarItemDirective } from './toolbar-item.directive'; @Directive({ // tslint:disable-next-line: directive-selector selector: '[fd-toolbar-label]', host: { - class: 'fd-label fd-toolbar__overflow__label' + class: 'fd-label fd-toolbar__overflow-label' } }) export class ToolbarLabelDirective extends ToolbarItemDirective {} diff --git a/libs/core/src/lib/toolbar/toolbar-overflow-button-menu.directive.ts b/libs/core/src/lib/toolbar/toolbar-overflow-button-menu.directive.ts new file mode 100644 index 00000000000..4296b29eb81 --- /dev/null +++ b/libs/core/src/lib/toolbar/toolbar-overflow-button-menu.directive.ts @@ -0,0 +1,11 @@ +import { Directive } from '@angular/core'; +import { ToolbarItemDirective } from './toolbar-item.directive'; + +@Directive({ + // tslint:disable-next-line: directive-selector + selector: '[fd-toolbar-overflow-button-menu]', + host: { + class: 'fd-toolbar__overflow-button--menu' + } +}) +export class ToolbarOverflowButtonMenuDirective extends ToolbarItemDirective {} diff --git a/libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts b/libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts new file mode 100644 index 00000000000..da41e1717bc --- /dev/null +++ b/libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts @@ -0,0 +1,11 @@ +import { Directive } from '@angular/core'; +import { ToolbarItemDirective } from './toolbar-item.directive'; + +@Directive({ + // tslint:disable-next-line: directive-selector + selector: '[fd-toolbar-overflow-button]', + host: { + class: 'fd-toolbar__overflow-button' + } +}) +export class ToolbarOverflowButtonDirective extends ToolbarItemDirective {} diff --git a/libs/core/src/lib/toolbar/toolbar.component.html b/libs/core/src/lib/toolbar/toolbar.component.html index 16458f620ed..18b149c2997 100644 --- a/libs/core/src/lib/toolbar/toolbar.component.html +++ b/libs/core/src/lib/toolbar/toolbar.component.html @@ -1,11 +1,11 @@
- + + class="fd-popover"> -
+
diff --git a/libs/core/src/lib/toolbar/toolbar.component.scss b/libs/core/src/lib/toolbar/toolbar.component.scss index 29185223114..2ea780b7c27 100644 --- a/libs/core/src/lib/toolbar/toolbar.component.scss +++ b/libs/core/src/lib/toolbar/toolbar.component.scss @@ -1,127 +1,5 @@ @import '~fundamental-styles/dist/toolbar'; - -@mixin fd-rtl { - @at-root { - [dir='rtl'] &, - &[dir='rtl'] { - @content; - } - } -} - - -.fd-toolbar { - position: relative; - - .fd-form-label { - align-self: auto; - } - - &__overflow-spacer { - display: none; - } -} - .fd-toolbar > * { flex-shrink: 0; } - -.fd-toolbar-fade-out { - visibility: hidden; - opacity: 0; - transition: visibility 0s linear 1s, opacity 1ms; -} - -.fd-toolbar-fade-in { - visibility: visible; - opacity: 1; - transition: visibility 0s linear 0s, opacity 1s; -} - -// TODO: Remove after merging https://github.com/SAP/fundamental-styles/pull/1851 -$fd-namespace: fd; -$block: fd-toolbar; - -.#{$block}__overflow__body { - font-size: .875rem; - font-size: var(--sapFontSize, .875rem); - line-height: 1.4; - line-height: var(--sapContent_LineHeight, 1.4); - color: #32363a; - color: var(--sapTextColor, #32363a); - font-family: "72", "72full", Arial, Helvetica, sans-serif; - font-family: var(--sapFontFamily, "72", "72full", Arial, Helvetica, sans-serif); - font-weight: 400; - -webkit-font-smoothing: antialiased; - box-sizing: border-box; - margin: 0; - border: 0; - display: flex; - flex-direction: column; - max-width: 20rem; - padding: .1875rem .375rem; - - > *, - > .fd-button { - display: block; - text-align: left; - width: auto; - - @at-root { - [dir="rtl"] &, - &[dir="rtl"] { - text-align: right; - } - } - } - - > .#{$block}__separator { - height: 0.0625rem; - margin: 0.375rem 0.1875rem; - width: auto; - background-color: var(--sapToolbar_SeparatorColor); - } - - .#{$block}__overflow__label { - &.#{$fd-namespace}-label { - margin: 0.375rem 0; - } - } - - .#{$block}__overflow__form-label { - &.#{$fd-namespace}-form-label { - margin: 0.625rem 0 0.125rem 0; - } - } - - .#{$block}__overflow__form-label, - .#{$block}__overflow__label { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } -} - - -.#{$block}__overflow__body { - max-height: 50vh; - overflow: auto; - - .fd-button--menu { - display: flex; - align-items: center; - justify-content: space-between; - max-width: 100%; - } -} - -.#{$block} > .#{$block}__overflow, -.#{$block} .#{$block}__overflow, { - margin-left: auto; - - @include fd-rtl() { - margin-left: 0; - margin-right: auto; - } -} diff --git a/libs/core/src/lib/toolbar/toolbar.module.ts b/libs/core/src/lib/toolbar/toolbar.module.ts index 89e584c1756..f07c1cb8ef9 100644 --- a/libs/core/src/lib/toolbar/toolbar.module.ts +++ b/libs/core/src/lib/toolbar/toolbar.module.ts @@ -8,6 +8,8 @@ import { ToolbarItemDirective } from './toolbar-item.directive'; import { ToolbarSeparatorComponent } from './toolbar-separator.component'; import { ToolbarSpacerComponent } from './toolbar-spacer.component'; import { ToolbarLabelDirective } from './toolbar-label.directive'; +import { ToolbarOverflowButtonDirective } from './toolbar-overflow-button.directive'; +import { ToolbarOverflowButtonMenuDirective } from './toolbar-overflow-button-menu.directive'; import { ToolbarFormLabelDirective } from './toolbar-form-label.directive'; import { ToolbarOverflowPriorityDirective } from './toolbar-overflow-priority.directive'; import { ToolbarOverflowGroupDirective } from './toolbar-overflow-group.directive'; @@ -19,6 +21,8 @@ const components = [ ToolbarSeparatorComponent, ToolbarFormLabelDirective, ToolbarLabelDirective, + ToolbarOverflowButtonDirective, + ToolbarOverflowButtonMenuDirective, ToolbarOverflowPriorityDirective, ToolbarOverflowGroupDirective ]; diff --git a/package-lock.json b/package-lock.json index beafb389857..629f3ead5ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14899,9 +14899,9 @@ "dev": true }, "fundamental-styles": { - "version": "0.19.0-rc.43", - "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.19.0-rc.43.tgz", - "integrity": "sha512-GuPBtDeI7vCyzskIRawh5RqW8wjH9+7rzJb9MINjoumyiqiP4ktUgI2K5IMlBjYtrioOON18n8+6Ygc04HBidQ==" + "version": "0.20.0-rc.21", + "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.20.0-rc.21.tgz", + "integrity": "sha512-ZCIUPDw5ry0KeBPu4bs4vY4wgkKVZwDi/HiLn7mnOOt4hcYMUNqkTSHnGEeTIrlvu3doJhQaWhbfBKnLlf/ZIw==" }, "gauge": { "version": "2.7.4", @@ -18181,9 +18181,9 @@ } }, "karma-typescript-angular2-transform": { - "version": "5.5.1", - "resolved": "https://registry.npmjs.org/karma-typescript-angular2-transform/-/karma-typescript-angular2-transform-5.5.1.tgz", - "integrity": "sha512-Qwg+k6pTvD94GZnaapH5oGiOC1GINHWdqeZxPjmjDufZfuukfJ2AtoXlWWU8ygys0D1EPHVY/HHQS1toSpRXPw==", + "version": "5.5.2", + "resolved": "https://registry.npmjs.org/karma-typescript-angular2-transform/-/karma-typescript-angular2-transform-5.5.2.tgz", + "integrity": "sha512-X6KEfEyFb/ThdqzllckMu8iFTokULgsD5is6mTkSskQDevRgtgm+/Xk1giseTuxuwu0eXoxm+eWKwH/LJBAVGQ==", "dev": true, "requires": { "acorn": "^8.1.0", diff --git a/package.json b/package.json index 3a547cd1d41..be30be1bc8f 100644 --- a/package.json +++ b/package.json @@ -121,7 +121,7 @@ "classlist.js": "1.1.20150312", "core-js": "3.7.0", "focus-trap": "6.6.0", - "fundamental-styles": "0.19.0-rc.43", + "fundamental-styles": "0.20.0-rc.21", "highlight.js": "10.7.2", "intl": "1.2.5", "jasminewd2": "2.2.0", From dbfdfc2dc591da860e9d6e4799ee9922c3d04f2f Mon Sep 17 00:00:00 2001 From: i505485 Date: Mon, 30 Aug 2021 17:56:20 +0530 Subject: [PATCH 2/5] fix(core): remove hardcoded style from ngx for toolbar component --- .../examples/toolbar-overflow-example.component.html | 12 ++++++------ .../toolbar/toolbar-docs.component.html | 2 +- .../src/lib/toolbar/toolbar-form-label.directive.ts | 4 ++-- libs/core/src/lib/toolbar/toolbar-label.directive.ts | 2 +- .../toolbar-overflow-button-menu.directive.ts | 3 +-- .../lib/toolbar/toolbar-overflow-button.directive.ts | 3 +-- 6 files changed, 12 insertions(+), 14 deletions(-) diff --git a/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html b/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html index dfc04e6cb96..9c47a5ae852 100644 --- a/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html +++ b/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html @@ -43,7 +43,7 @@ style="max-width: 200px;" /> - + @@ -51,10 +51,10 @@ - - + + - - - + + + diff --git a/apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.component.html b/apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.component.html index 1020c33d48b..4a6173f767e 100644 --- a/apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.component.html +++ b/apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.component.html @@ -25,7 +25,7 @@ If there isn’t enough room in a Toolbar, the [shouldOverflow]="true" can be used to move buttons to an overflow area. A popover button will be created which will contain all the items in the overflow. - Make sure to include the fd-toolbar-item directive in each Toolbar. + Make sure to include the fd-toolbar-item directive in each Toolbar. fdToolbarOverflowButton for button and fdToolbarOverflowButtonMenu for menu button in each Toolbar. diff --git a/libs/core/src/lib/toolbar/toolbar-form-label.directive.ts b/libs/core/src/lib/toolbar/toolbar-form-label.directive.ts index 04a3e6f2f3b..41e2f93e1de 100644 --- a/libs/core/src/lib/toolbar/toolbar-form-label.directive.ts +++ b/libs/core/src/lib/toolbar/toolbar-form-label.directive.ts @@ -5,7 +5,7 @@ import { ToolbarItemDirective } from './toolbar-item.directive'; // tslint:disable-next-line: directive-selector selector: '[fd-toolbar-form-label]', host: { - class: 'fd-form-label fd-toolbar__overflow-form-label' + class: 'fd-form-label fd-toolbar__overflow-form-label fd-toolbar__overflow-form-label--text' } }) -export class ToolbarFormLabelDirective extends ToolbarItemDirective {} +export class ToolbarFormLabelDirective extends ToolbarItemDirective { } diff --git a/libs/core/src/lib/toolbar/toolbar-label.directive.ts b/libs/core/src/lib/toolbar/toolbar-label.directive.ts index 4409ff72c6a..9d67092cd0f 100644 --- a/libs/core/src/lib/toolbar/toolbar-label.directive.ts +++ b/libs/core/src/lib/toolbar/toolbar-label.directive.ts @@ -1,4 +1,4 @@ -import { Directive } from '@angular/core'; +import { Directive } from '@angular/core'; import { ToolbarItemDirective } from './toolbar-item.directive'; @Directive({ diff --git a/libs/core/src/lib/toolbar/toolbar-overflow-button-menu.directive.ts b/libs/core/src/lib/toolbar/toolbar-overflow-button-menu.directive.ts index 4296b29eb81..2f709b8734a 100644 --- a/libs/core/src/lib/toolbar/toolbar-overflow-button-menu.directive.ts +++ b/libs/core/src/lib/toolbar/toolbar-overflow-button-menu.directive.ts @@ -2,8 +2,7 @@ import { Directive } from '@angular/core'; import { ToolbarItemDirective } from './toolbar-item.directive'; @Directive({ - // tslint:disable-next-line: directive-selector - selector: '[fd-toolbar-overflow-button-menu]', + selector: '[fdToolbarOverflowButtonMenu]', host: { class: 'fd-toolbar__overflow-button--menu' } diff --git a/libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts b/libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts index da41e1717bc..94811b8c30a 100644 --- a/libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts +++ b/libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts @@ -2,8 +2,7 @@ import { Directive } from '@angular/core'; import { ToolbarItemDirective } from './toolbar-item.directive'; @Directive({ - // tslint:disable-next-line: directive-selector - selector: '[fd-toolbar-overflow-button]', + selector: '[fdToolbarOverflowButton]', host: { class: 'fd-toolbar__overflow-button' } From 1b3af3cad4c8aae07b16c4c1f373b37faecbdfcf Mon Sep 17 00:00:00 2001 From: i505485 Date: Mon, 30 Aug 2021 20:10:11 +0530 Subject: [PATCH 3/5] fix(core): remove hardcoded style from ngx for toolbar component --- e2e/wdio/core/pages/toolbar.po.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e/wdio/core/pages/toolbar.po.ts b/e2e/wdio/core/pages/toolbar.po.ts index 5339861180b..34912d4e42c 100644 --- a/e2e/wdio/core/pages/toolbar.po.ts +++ b/e2e/wdio/core/pages/toolbar.po.ts @@ -13,7 +13,7 @@ export class ToolbarPo extends CoreBaseComponentPo { overflowPriorityExample = 'fd-toolbar-overflow-priority-example'; overflowGroupingExample = 'fd-toolbar-overflow-grouping-example'; moreButton = ' [title="More"]'; - overflowBody = '.fd-toolbar__overflow__body'; + overflowBody = '.fd-toolbar__overflow'; alwaysButton = '[label="Always"]'; overflowGroupingButton = '#background-ex7' + this.button; checkbox = '.fd-checkbox__label'; From ee36bacaba94d611e9e4372a5166aa476c2dad94 Mon Sep 17 00:00:00 2001 From: i505485 Date: Mon, 30 Aug 2021 20:29:30 +0530 Subject: [PATCH 4/5] fix(core): remove hardcoded style from ngx for toolbar component --- .../src/lib/toolbar/toolbar-overflow-button-menu.directive.ts | 2 +- libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/core/src/lib/toolbar/toolbar-overflow-button-menu.directive.ts b/libs/core/src/lib/toolbar/toolbar-overflow-button-menu.directive.ts index 2f709b8734a..fe3baf010f3 100644 --- a/libs/core/src/lib/toolbar/toolbar-overflow-button-menu.directive.ts +++ b/libs/core/src/lib/toolbar/toolbar-overflow-button-menu.directive.ts @@ -2,7 +2,7 @@ import { Directive } from '@angular/core'; import { ToolbarItemDirective } from './toolbar-item.directive'; @Directive({ - selector: '[fdToolbarOverflowButtonMenu]', + selector: '[fdToolbarOverflowButtonMenu], [fd-toolbar-overflow-button-menu]', host: { class: 'fd-toolbar__overflow-button--menu' } diff --git a/libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts b/libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts index 94811b8c30a..80d9aa05c67 100644 --- a/libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts +++ b/libs/core/src/lib/toolbar/toolbar-overflow-button.directive.ts @@ -2,7 +2,7 @@ import { Directive } from '@angular/core'; import { ToolbarItemDirective } from './toolbar-item.directive'; @Directive({ - selector: '[fdToolbarOverflowButton]', + selector: '[fdToolbarOverflowButton], [fd-toolbar-overflow-button]', host: { class: 'fd-toolbar__overflow-button' } From b3978032f829b81058ad91de133b38aa9bfdcb83 Mon Sep 17 00:00:00 2001 From: i505485 Date: Tue, 31 Aug 2021 12:59:28 +0530 Subject: [PATCH 5/5] fix(core): remove hardcoded style from ngx for toolbar component --- .../examples/toolbar-overflow-example.component.html | 12 ++++++------ .../toolbar/toolbar-docs.component.html | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html b/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html index 9c47a5ae852..dfc04e6cb96 100644 --- a/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html +++ b/apps/docs/src/app/core/component-docs/toolbar/examples/toolbar-overflow-example.component.html @@ -43,7 +43,7 @@ style="max-width: 200px;" /> - + @@ -51,10 +51,10 @@ - - + + - - - + + + diff --git a/apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.component.html b/apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.component.html index 4a6173f767e..1e4b82a7ef9 100644 --- a/apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.component.html +++ b/apps/docs/src/app/core/component-docs/toolbar/toolbar-docs.component.html @@ -25,7 +25,7 @@ If there isn’t enough room in a Toolbar, the [shouldOverflow]="true" can be used to move buttons to an overflow area. A popover button will be created which will contain all the items in the overflow. - Make sure to include the fd-toolbar-item directive in each Toolbar. fdToolbarOverflowButton for button and fdToolbarOverflowButtonMenu for menu button in each Toolbar. + Make sure to include the fd-toolbar-item directive in each Toolbar. fd-toolbar-overflow-button for button and fd-toolbar-overflow-button-menu for menu button in each Toolbar.