Skip to content

Commit

Permalink
chore: fix breadcrumb errors (#29650)
Browse files Browse the repository at this point in the history
### Parent Issue
#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)
  • Loading branch information
nicobytes authored Aug 20, 2024
1 parent 7174207 commit eb5b46f
Show file tree
Hide file tree
Showing 8 changed files with 166 additions and 238 deletions.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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: '<p-breadcrumb [model]="$model()" />',
styleUrls: ['./dot-crumbtrail.component.scss']
})
export class DotCrumbtrailComponent implements OnInit {
crumb: Observable<DotCrumb[]>;

constructor(private crumbTrailService: DotCrumbtrailService) {}

ngOnInit() {
this.crumb = this.crumbTrailService.crumbTrail$;
}
export class DotCrumbtrailComponent {
readonly #crumbTrailService = inject(DotCrumbtrailService);
$model = toSignal(this.#crumbTrailService.crumbTrail$, {
initialValue: []
});
}
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/* eslint-disable no-console */
import { action } from '@storybook/addon-actions';
import {
Meta,
StoryObj,
Expand All @@ -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<DotCollapseBreadcrumbComponent> = {
type Args = DotCollapseBreadcrumbComponent & { model: MenuItem[]; maxItems: number };

const meta: Meta<Args> = {
title: 'DotCMS/Menu/DotCollapseBreadcrumb',
component: DotCollapseBreadcrumbComponent,
decorators: [
Expand All @@ -40,10 +43,10 @@ const meta: Meta<DotCollapseBreadcrumbComponent> = {
}
},
argTypes: {
$model: {
model: {
description: 'Menu items to display'
},
$maxItems: {
maxItems: {
description: 'Max items to display',
control: { type: 'number' }
}
Expand All @@ -56,17 +59,17 @@ const meta: Meta<DotCollapseBreadcrumbComponent> = {

export default meta;

type Story = StoryObj<DotCollapseBreadcrumbComponent>;
type Story = StoryObj<Args>;

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') }
]
}
};
Original file line number Diff line number Diff line change
Expand Up @@ -41,19 +41,17 @@ const meta: Meta<DotCrumbtrailComponent> = {
)
],
parameters: {
layout: 'centered',
docs: {
description: {
component:
'Breadcrumb provides contextual information about page hierarchy.: https://primefaces.org/primeng/showcase/#/breadcrumb'
}
}
},
render: () => {
return {
template: `<dot-crumbtrail class="max-w-full" />`
};
}
render: (args) => ({
props: args,
template: `<dot-crumbtrail class="max-w-full" />`
})
};

export default meta;
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ describe('DotSiteSelectorDirective', () => {
});

it('should get sites list with filter', fakeAsync(() => {

const event: DropdownFilterEvent = {
filter: 'demo',
originalEvent: createFakeEvent('click')
Expand All @@ -83,4 +82,4 @@ describe('DotSiteSelectorDirective', () => {
expect(getSitesSpy).toHaveBeenCalledTimes(2);
}));
});
});
});
Loading

0 comments on commit eb5b46f

Please sign in to comment.