From eb5b46fa3c9b08c376a85ca96c9674abd6bf02c7 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Monroy Date: Tue, 20 Aug 2024 10:10:41 -0400 Subject: [PATCH] chore: fix breadcrumb errors (#29650) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### Parent Issue https://github.com/dotCMS/core/issues/29648 ### Proposed Changes * Fix problem with breadcrumbs styles and PrimeNG v17 * Fix problem with storybook and alias signals ### Checklist - [x] Tests - [x] Translations - [x] Security Implications Contemplated (add notes if applicable) ### Screenshots Original | Updated :-------------------------:|:-------------------------: ![Screenshot 2024-08-19 at 9 30 30 PM](https://github.com/user-attachments/assets/078fcbc6-806c-42b8-a718-43fe84e6dfd6) | ![Screenshot 2024-08-19 at 9 30 36 PM](https://github.com/user-attachments/assets/c0c210ee-cae7-4bed-8ced-33ed52b5d502) ![Screenshot 2024-08-19 at 9 32 37 PM](https://github.com/user-attachments/assets/e5ad7994-82cd-475f-abd4-67b7ee06a843) | ![Screenshot 2024-08-19 at 9 32 46 PM](https://github.com/user-attachments/assets/80ecaf75-af75-4bc7-93fc-ca8d9cd6f71f) ![Screenshot 2024-08-19 at 9 33 23 PM](https://github.com/user-attachments/assets/e43a975b-9121-4bc6-8ceb-937676141a96) | ![Screenshot 2024-08-19 at 9 33 32 PM](https://github.com/user-attachments/assets/42937d86-8efb-4237-8c19-341dd68a097b) ![localhost_64737_dotAdmin](https://github.com/user-attachments/assets/1ea07998-3fb4-45f7-8efc-b0d96ab528a8) | ![localhost_4200_dotAdmin_](https://github.com/user-attachments/assets/3ad88ca1-c37c-46b0-ae21-dc246025c807) ![localhost_64737_dotAdmin (1)](https://github.com/user-attachments/assets/200d24e4-d2c0-419c-b3ac-d66ba269ccc2) | ![localhost_4200_dotAdmin_ (1)](https://github.com/user-attachments/assets/2952992f-9b7a-4666-9a3c-733c2cd86d2b) ![localhost_64737_dotAdmin (2)](https://github.com/user-attachments/assets/390bf61f-1b1f-4c29-8ca5-a6aa97e5d3cc) | ![localhost_4200_dotAdmin_ (2)](https://github.com/user-attachments/assets/84d45415-c8fe-4c83-80ec-0636ecc3ae5a) --- .../dot-crumbtrail.component.html | 1 - .../dot-crumbtrail.component.scss | 52 ++--- .../dot-crumbtrail.component.ts | 22 +- .../menu/DotCollapseBreadcrumb.stories.ts | 27 ++- .../dotcms/menu/DotCrumbtrail.stories.ts | 10 +- .../dotcms-theme/components/_breadcrumb.scss | 77 ++++--- .../dot-site-selector.directive.spec.ts | 3 +- core-web/tsconfig.base.json | 212 ++++++------------ 8 files changed, 166 insertions(+), 238 deletions(-) delete mode 100644 core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.html diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.html b/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.html deleted file mode 100644 index 5571e023509b..000000000000 --- a/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.scss index 567652908b22..91ff4efb9c73 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.scss +++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.scss @@ -1,35 +1,35 @@ @use "variables" as *; :host ::ng-deep .p-breadcrumb { - ul li { - &:first-child { - font-size: $font-size-lmd; - a span.p-menuitem-text { - color: $black; - font-size: $font-size-lmd; - font-weight: $font-weight-regular-bold; + .p-breadcrumb-list { + li { + &:first-child { + font-size: $font-size-lg; + a span.p-menuitem-text { + color: $black; + font-size: $font-size-lg; + font-weight: $font-weight-regular-bold; + } } - } - - .p-menuitem-link[href] { - .p-menuitem-text { - font-size: $font-size-lmd; + .p-menuitem-link[href] { + .p-menuitem-text { + font-size: $font-size-lg; + } } - } - - &:last-child a { - pointer-events: none; - } - &:nth-child(2) { - &::before { - content: ""; - width: 1px; - height: 20px; - background: $color-palette-gray-500; - display: block; + &:last-child a { + pointer-events: none; } - .p-icon-wrapper { - display: none; + &:nth-child(2) { + &::before { + content: ""; + width: 1px; + height: 20px; + background: $color-palette-gray-500; + display: block; + } + .p-icon-wrapper { + display: none; + } } } } diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.ts index 3aaf7e4b0e51..66890b390130 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.ts +++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-crumbtrail/dot-crumbtrail.component.ts @@ -1,19 +1,15 @@ -import { Observable } from 'rxjs'; +import { Component, inject } from '@angular/core'; +import { toSignal } from '@angular/core/rxjs-interop'; -import { Component, OnInit } from '@angular/core'; - -import { DotCrumb, DotCrumbtrailService } from './service/dot-crumbtrail.service'; +import { DotCrumbtrailService } from './service/dot-crumbtrail.service'; @Component({ selector: 'dot-crumbtrail', - templateUrl: './dot-crumbtrail.component.html', + template: '', styleUrls: ['./dot-crumbtrail.component.scss'] }) -export class DotCrumbtrailComponent implements OnInit { - crumb: Observable; - - constructor(private crumbTrailService: DotCrumbtrailService) {} - - ngOnInit() { - this.crumb = this.crumbTrailService.crumbTrail$; - } +export class DotCrumbtrailComponent { + readonly #crumbTrailService = inject(DotCrumbtrailService); + $model = toSignal(this.#crumbTrailService.crumbTrail$, { + initialValue: [] + }); } diff --git a/core-web/apps/dotcms-ui/src/stories/dotcms/menu/DotCollapseBreadcrumb.stories.ts b/core-web/apps/dotcms-ui/src/stories/dotcms/menu/DotCollapseBreadcrumb.stories.ts index 4c36fa02b062..03277de86afe 100644 --- a/core-web/apps/dotcms-ui/src/stories/dotcms/menu/DotCollapseBreadcrumb.stories.ts +++ b/core-web/apps/dotcms-ui/src/stories/dotcms/menu/DotCollapseBreadcrumb.stories.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-console */ +import { action } from '@storybook/addon-actions'; import { Meta, StoryObj, @@ -11,11 +11,14 @@ import { import { importProvidersFrom } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { MenuItem } from 'primeng/api'; import { ToastModule } from 'primeng/toast'; import { DotCollapseBreadcrumbComponent } from '@dotcms/ui'; -const meta: Meta = { +type Args = DotCollapseBreadcrumbComponent & { model: MenuItem[]; maxItems: number }; + +const meta: Meta = { title: 'DotCMS/Menu/DotCollapseBreadcrumb', component: DotCollapseBreadcrumbComponent, decorators: [ @@ -40,10 +43,10 @@ const meta: Meta = { } }, argTypes: { - $model: { + model: { description: 'Menu items to display' }, - $maxItems: { + maxItems: { description: 'Max items to display', control: { type: 'number' } } @@ -56,17 +59,17 @@ const meta: Meta = { export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { - $maxItems: 4, - $model: [ - { label: 'Electronics', command: console.log }, - { label: 'Computer', command: console.log }, - { label: 'Accessories', command: console.log }, - { label: 'Keyboard', command: console.log }, - { label: 'Wireless', command: console.log } + maxItems: 4, + model: [ + { label: 'Electronics', command: action('command') }, + { label: 'Computer', command: action('command') }, + { label: 'Accessories', command: action('command') }, + { label: 'Keyboard', command: action('command') }, + { label: 'Wireless', command: action('command') } ] } }; diff --git a/core-web/apps/dotcms-ui/src/stories/dotcms/menu/DotCrumbtrail.stories.ts b/core-web/apps/dotcms-ui/src/stories/dotcms/menu/DotCrumbtrail.stories.ts index d75db1784964..c54e60512bf1 100644 --- a/core-web/apps/dotcms-ui/src/stories/dotcms/menu/DotCrumbtrail.stories.ts +++ b/core-web/apps/dotcms-ui/src/stories/dotcms/menu/DotCrumbtrail.stories.ts @@ -41,7 +41,6 @@ const meta: Meta = { ) ], parameters: { - layout: 'centered', docs: { description: { component: @@ -49,11 +48,10 @@ const meta: Meta = { } } }, - render: () => { - return { - template: `` - }; - } + render: (args) => ({ + props: args, + template: `` + }) }; export default meta; diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_breadcrumb.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_breadcrumb.scss index 8829a9aa4e08..73e717e8a0f3 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_breadcrumb.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_breadcrumb.scss @@ -1,38 +1,47 @@ @use "variables" as *; -.p-breadcrumb ul li .p-menuitem-link { - transition: none; - border-radius: $border-radius-xs; -} - -.p-breadcrumb ul li .p-menuitem-link:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: none; -} - -.p-breadcrumb ul li .p-menuitem-link[href] .p-menuitem-text { - font-size: $font-size-default; - - &:hover { - color: $color-palette-primary; - text-decoration: underline; +.p-breadcrumb { + border: 0 none; + padding: $spacing-3 0; + + .p-breadcrumb-list { + li { + .p-menuitem-link { + transition: none; + .p-menuitem-text { + color: $color-palette-gray-700; + font-size: $font-size-default; + cursor: pointer; + &[href] { + color: $black; + &:hover { + color: $color-palette-primary; + text-decoration: underline; + } + } + } + .p-menuitem-icon { + color: $black; + } + &:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: none; + } + } + &.p-menuitem-separator { + margin: 0 $spacing-1 0 $spacing-1; + color: $black; + } + + &:last-child { + .p-menuitem-text { + color: $color-palette-gray-700; + } + .p-menuitem-icon { + color: $color-palette-gray-700; + } + } + } } } - -.p-breadcrumb ul li .p-menuitem-link .p-menuitem-text { - color: $color-palette-gray-700; -} - -.p-breadcrumb ul li .p-menuitem-link .p-menuitem-icon { - color: $black; -} - -.p-breadcrumb ul li.p-breadcrumb-chevron { - margin: 0 $spacing-1 0 $spacing-1; - color: $black; -} - -.p-breadcrumb ul li:last-child .p-menuitem-icon { - color: $black; -} diff --git a/core-web/libs/ui/src/lib/dot-site-selector/dot-site-selector.directive.spec.ts b/core-web/libs/ui/src/lib/dot-site-selector/dot-site-selector.directive.spec.ts index c96d5a42de8d..6d592c861947 100644 --- a/core-web/libs/ui/src/lib/dot-site-selector/dot-site-selector.directive.spec.ts +++ b/core-web/libs/ui/src/lib/dot-site-selector/dot-site-selector.directive.spec.ts @@ -60,7 +60,6 @@ describe('DotSiteSelectorDirective', () => { }); it('should get sites list with filter', fakeAsync(() => { - const event: DropdownFilterEvent = { filter: 'demo', originalEvent: createFakeEvent('click') @@ -83,4 +82,4 @@ describe('DotSiteSelectorDirective', () => { expect(getSitesSpy).toHaveBeenCalledTimes(2); })); }); -}); \ No newline at end of file +}); diff --git a/core-web/tsconfig.base.json b/core-web/tsconfig.base.json index a1e9b4c05056..41932ad351f5 100644 --- a/core-web/tsconfig.base.json +++ b/core-web/tsconfig.base.json @@ -1,145 +1,69 @@ { - "compileOnSave": false, - "compilerOptions": { - "rootDir": ".", - "sourceMap": true, - "declaration": false, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "moduleResolution": "node", - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "importHelpers": true, - "target": "es2021", - "module": "esnext", - "lib": [ - "es2017", - "es2020", - "dom", - "dom.iterable" - ], - "skipLibCheck": true, - "skipDefaultLibCheck": true, - "baseUrl": ".", - "paths": { - "@components/*": [ - "apps/dotcms-ui/src/app/view/components/*" - ], - "@directives/*": [ - "apps/dotcms-ui/src/app/view/directives/*" - ], - "@dotcms/angular": [ - "libs/sdk/angular/src/index.ts" - ], - "@dotcms/app/*": [ - "apps/dotcms-ui/src/app/*" - ], - "@dotcms/block-editor": [ - "libs/block-editor/src/public-api.ts" - ], - "@dotcms/client": [ - "libs/sdk/client/src/index.ts" - ], - "@dotcms/contenttype-fields": [ - "libs/contenttype-fields/src/index.ts" - ], - "@dotcms/data-access": [ - "libs/data-access/src/index.ts" - ], - "@dotcms/dot-layout-grid": [ - "libs/dot-layout-grid/src/public_api.ts" - ], - "@dotcms/dot-rules": [ - "libs/dot-rules/src/public_api.ts" - ], - "@dotcms/dotcms": [ - "libs/dotcms/src/index.ts" - ], - "@dotcms/dotcms-field-elements": [ - "libs/dotcms-field-elements/src/index.ts" - ], - "@dotcms/dotcms-field-elements/loader": [ - "dist/libs/dotcms-field-elements/loader" - ], - "@dotcms/dotcms-js": [ - "libs/dotcms-js/src/public_api.ts" - ], - "@dotcms/dotcms-models": [ - "libs/dotcms-models/src/index.ts" - ], - "@dotcms/dotcms-webcomponents": [ - "libs/dotcms-webcomponents/src/index.ts" - ], - "@dotcms/dotcms-webcomponents/loader": [ - "dist/libs/dotcms-webcomponents/loader" - ], - "@dotcms/edit-content": [ - "libs/edit-content/src/index.ts" - ], - "@dotcms/experiments": [ - "libs/sdk/experiments/src/index.ts" - ], - "@dotcms/portlets/dot-ema": [ - "libs/portlets/edit-ema/portlet/src/index.ts" - ], - "@dotcms/portlets/dot-ema/ui": [ - "libs/portlets/edit-ema/ui/src/index.ts" - ], - "@dotcms/portlets/dot-experiments/data-access": [ - "libs/portlets/dot-experiments/data-access/src/index.ts" - ], - "@dotcms/portlets/dot-experiments/portlet": [ - "libs/portlets/dot-experiments/portlet/src/index.ts" - ], - "@dotcms/portlets/dot-locales/portlet": [ - "libs/portlets/dot-locales/portlet/src/index.ts" - ], - "@dotcms/portlets/dot-locales/portlet/data-access": [ - "libs/portlets/dot-locales/data-access/src/index.ts" - ], - "@dotcms/react": [ - "libs/sdk/react/src/index.ts" - ], - "@dotcms/react/mocks": [ - "libs/sdk/react/src/lib/mocks/index.ts" - ], - "@dotcms/template-builder": [ - "libs/template-builder/src/index.ts" - ], - "@dotcms/ui": [ - "libs/ui/src/index.ts" - ], - "@dotcms/utils": [ - "libs/utils/src" - ], - "@dotcms/utils-testing": [ - "libs/utils-testing/src/index.ts" - ], - "@dotcms/utils/*": [ - "libs/utils/src/*" - ], - "@models/*": [ - "apps/dotcms-ui/src/app/shared/models/*" - ], - "@pipes/*": [ - "apps/dotcms-ui/src/app/view/pipes/*" - ], - "@portlets/*": [ - "apps/dotcms-ui/src/app/portlets/*" - ], - "@services/*": [ - "apps/dotcms-ui/src/app/api/services/*" - ], - "@shared/*": [ - "apps/dotcms-ui/src/app/shared/*" - ], - "@tests/*": [ - "apps/dotcms-ui/src/app/test/*" - ] - } - }, - "exclude": [ - "node_modules", - "tmp" - ] -} \ No newline at end of file + "compileOnSave": false, + "compilerOptions": { + "rootDir": ".", + "sourceMap": true, + "declaration": false, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "moduleResolution": "node", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "importHelpers": true, + "target": "es2021", + "module": "esnext", + "lib": ["es2017", "es2020", "dom", "dom.iterable"], + "skipLibCheck": true, + "skipDefaultLibCheck": true, + "baseUrl": ".", + "paths": { + "@components/*": ["apps/dotcms-ui/src/app/view/components/*"], + "@directives/*": ["apps/dotcms-ui/src/app/view/directives/*"], + "@dotcms/angular": ["libs/sdk/angular/src/index.ts"], + "@dotcms/app/*": ["apps/dotcms-ui/src/app/*"], + "@dotcms/block-editor": ["libs/block-editor/src/public-api.ts"], + "@dotcms/client": ["libs/sdk/client/src/index.ts"], + "@dotcms/contenttype-fields": ["libs/contenttype-fields/src/index.ts"], + "@dotcms/data-access": ["libs/data-access/src/index.ts"], + "@dotcms/dot-layout-grid": ["libs/dot-layout-grid/src/public_api.ts"], + "@dotcms/dot-rules": ["libs/dot-rules/src/public_api.ts"], + "@dotcms/dotcms": ["libs/dotcms/src/index.ts"], + "@dotcms/dotcms-field-elements": ["libs/dotcms-field-elements/src/index.ts"], + "@dotcms/dotcms-field-elements/loader": ["dist/libs/dotcms-field-elements/loader"], + "@dotcms/dotcms-js": ["libs/dotcms-js/src/public_api.ts"], + "@dotcms/dotcms-models": ["libs/dotcms-models/src/index.ts"], + "@dotcms/dotcms-webcomponents": ["libs/dotcms-webcomponents/src/index.ts"], + "@dotcms/dotcms-webcomponents/loader": ["dist/libs/dotcms-webcomponents/loader"], + "@dotcms/edit-content": ["libs/edit-content/src/index.ts"], + "@dotcms/experiments": ["libs/sdk/experiments/src/index.ts"], + "@dotcms/portlets/dot-ema": ["libs/portlets/edit-ema/portlet/src/index.ts"], + "@dotcms/portlets/dot-ema/ui": ["libs/portlets/edit-ema/ui/src/index.ts"], + "@dotcms/portlets/dot-experiments/data-access": [ + "libs/portlets/dot-experiments/data-access/src/index.ts" + ], + "@dotcms/portlets/dot-experiments/portlet": [ + "libs/portlets/dot-experiments/portlet/src/index.ts" + ], + "@dotcms/portlets/dot-locales/portlet": [ + "libs/portlets/dot-locales/portlet/src/index.ts" + ], + "@dotcms/portlets/dot-locales/portlet/data-access": [ + "libs/portlets/dot-locales/data-access/src/index.ts" + ], + "@dotcms/react": ["libs/sdk/react/src/index.ts"], + "@dotcms/react/mocks": ["libs/sdk/react/src/lib/mocks/index.ts"], + "@dotcms/template-builder": ["libs/template-builder/src/index.ts"], + "@dotcms/ui": ["libs/ui/src/index.ts"], + "@dotcms/utils": ["libs/utils/src"], + "@dotcms/utils-testing": ["libs/utils-testing/src/index.ts"], + "@dotcms/utils/*": ["libs/utils/src/*"], + "@models/*": ["apps/dotcms-ui/src/app/shared/models/*"], + "@pipes/*": ["apps/dotcms-ui/src/app/view/pipes/*"], + "@portlets/*": ["apps/dotcms-ui/src/app/portlets/*"], + "@services/*": ["apps/dotcms-ui/src/app/api/services/*"], + "@shared/*": ["apps/dotcms-ui/src/app/shared/*"], + "@tests/*": ["apps/dotcms-ui/src/app/test/*"] + } + }, + "exclude": ["node_modules", "tmp"] +}