Skip to content

Commit

Permalink
fix(edit-content-type) check it out in WYSIWYG field has broken styles
Browse files Browse the repository at this point in the history
…#27341  (#30250)

### Proposed Changes
* Updated the `dot-convert-to-block-info.component.html` template to use
the `label` property of PrimeNG `pButton` instead of manually setting
the button label inside the button element.
* Imported the `ButtonModule` from PrimeNG in the
`dot-convert-to-block-info.component.spec.ts` to properly support the
`pButton` directive and its `label` property in tests.

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated.

### Additional Info
This update ensures that the `pButton` directive from PrimeNG correctly
handles the button label by using the `label` property, allowing for
more maintainable and PrimeNG-compliant code. Previously, the button
label was manually rendered inside the button, which lead to styling
issues.

### Screenshots
Original             |  Updated
:-------------------------:|:-------------------------:
<img width="1383" alt="image"
src="https://github.com/user-attachments/assets/6e9de521-6826-4a12-845d-08cc22a34764">
| <img width="1124" alt="image"
src="https://github.com/user-attachments/assets/134bab72-ba5c-49e9-a60f-d4a9b2f3f5f3">
  • Loading branch information
valentinogiardino authored Oct 4, 2024
1 parent 77c9232 commit 77ef429
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 4 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@
<button
*ngIf="currentField?.id; else learnMore"
(click)="action.emit($event)"
[label]="'contenttypes.field.properties.wysiwyg.info.button' | dm"
class="p-button-outlined p-button-sm"
pButton
data-testId="button">
{{ 'contenttypes.field.properties.wysiwyg.info.button' | dm }}
</button>
data-testId="button"></button>

<ng-template #learnMore>
<a
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

import { ButtonModule } from 'primeng/button';

import { DotMessageService } from '@dotcms/data-access';
import { DotMessagePipe } from '@dotcms/ui';
import { MockDotMessageService } from '@dotcms/utils-testing';
Expand All @@ -22,7 +24,7 @@ describe('DotConvertToBlockInfoComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [DotConvertToBlockInfoComponent],
imports: [DotMessagePipe],
imports: [DotMessagePipe, ButtonModule],
providers: [
{
provide: DotMessageService,
Expand Down

0 comments on commit 77ef429

Please sign in to comment.