From 1028df91da083c511c932c94c1dc52425266ef35 Mon Sep 17 00:00:00 2001 From: Michal Kinas <113341662+MichalKinas@users.noreply.github.com> Date: Tue, 27 Jan 2026 08:10:15 +0100 Subject: [PATCH] [ACS-7768] ADF Form fields cleanup (#11484) * [ACS-7768] ADF Form fields cleanup * [ACS-7768] CR fixes * [ACS-7768] Bring back label condition * ACS-7768 Fixing storybook build * [ACS-7768] Fix rebase issues --------- Co-authored-by: Ehsan Rezaei --- .../categories-management.component.html | 23 +- .../categories-management.component.scss | 21 +- .../categories-management.component.spec.ts | 2 +- .../categories-management.component.ts | 4 +- .../content-metadata.component.html | 6 +- .../content-metadata.component.scss | 33 +- ...content-node-selector-panel.component.html | 127 +++---- ...content-node-selector-panel.component.scss | 56 +--- .../content-node-selector-panel.component.ts | 2 - .../sites-dropdown.component.html | 2 +- .../content-node-share.dialog.html | 10 +- .../content-node-share.dialog.scss | 62 +--- .../content-node-share.dialog.spec.ts | 12 - .../src/lib/dialogs/folder/folder.dialog.html | 6 +- .../src/lib/dialogs/folder/folder.dialog.scss | 17 +- .../lib/dialogs/library/library.dialog.scss | 45 +-- .../src/lib/mat-selectors.scss | 19 -- .../add-permission-panel.component.html | 3 +- .../add-permission-panel.component.scss | 47 +-- .../user-role-column.component.ts | 45 +-- ...rch-chip-autocomplete-input.component.html | 2 +- .../search-date-range.component.html | 6 +- .../search-facet-field.component.html | 42 ++- .../search-facet-field.component.scss | 25 -- .../search-input/search-input.component.html | 2 +- .../search-properties.component.html | 10 +- .../search-text/search-text.component.html | 4 +- .../search-text/search-text.component.scss | 1 + .../tags-creator/tags-creator.component.html | 31 +- .../tags-creator/tags-creator.component.scss | 15 +- .../version-upload.component.html | 2 +- .../version-upload.component.scss | 1 + .../card-view/components/base-card-view.ts | 3 +- .../card-view-dateitem.component.html | 215 ++++++------ .../card-view-dateitem.component.scss | 14 +- .../card-view-dateitem.component.spec.ts | 20 +- ...ard-view-item-dispatcher.component.spec.ts | 5 +- .../card-view-item-dispatcher.component.ts | 4 - .../card-view-selectitem.component.html | 83 ++--- .../card-view-selectitem.component.scss | 11 - .../card-view-selectitem.component.spec.ts | 20 +- .../select-filter-input.component.html | 2 +- .../card-view-textitem.component.html | 314 +++++++++--------- .../card-view-textitem.component.scss | 15 +- .../card-view-textitem.component.spec.ts | 36 +- .../card-view-textitem.component.stories.ts | 22 +- .../card-view-textitem.component.ts | 10 +- .../card-view/card-view.component.html | 3 +- .../card-view/card-view.component.scss | 15 - .../card-view/card-view.component.spec.ts | 34 +- .../card-view/card-view.component.ts | 4 - .../stories/card-view-shared-meta.ts | 11 +- .../src/lib/comments/comments.component.html | 6 +- .../src/lib/comments/comments.component.scss | 35 +- .../columns-selector.component.html | 18 +- .../columns-selector.component.scss | 28 +- .../columns-selector.component.spec.ts | 15 +- .../columns-selector.component.ts | 6 +- .../components/widgets/date/date.widget.html | 2 +- .../components/login/login.component.scss | 14 +- .../search-text-input.component.html | 2 +- .../search-text-input.component.scss | 6 - .../search-text-input.component.spec.ts | 37 +-- .../search-text-input.component.ts | 4 +- lib/core/src/lib/styles/_mat-selectors.scss | 19 -- .../src/lib/testing/unit-testing-utils.ts | 18 + ...analytics-report-parameters.component.html | 2 +- ...analytics-report-parameters.component.scss | 2 +- .../widgets/duration/duration.widget.html | 2 +- .../widgets/number/number.widget.html | 2 +- .../widgets/number/number.widget.scss | 2 +- .../process-header-cloud.component.spec.ts | 8 +- .../task-header-cloud.component.spec.ts | 2 +- .../process-instance-header.component.spec.ts | 6 +- .../start-process.component.html | 6 +- .../start-process.component.spec.ts | 13 - .../src/lib/process.module.ts | 6 +- .../task-header/task-header.component.spec.ts | 2 +- 78 files changed, 620 insertions(+), 1167 deletions(-) diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.html b/lib/content-services/src/lib/category/categories-management/categories-management.component.html index fa72d2f7d8..607bae8755 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.html +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.html @@ -1,13 +1,20 @@
-
- + {{ 'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }} + - {{ categoryNameErrorMessageKey | translate }} -
+ + {{ categoryNameErrorMessageKey | translate }} + + + }
{ * @returns error text */ function getFirstError(): string { - return fixture.debugElement.query(By.directive(MatError)).nativeElement.textContent; + return fixture.debugElement.query(By.directive(MatError)).nativeElement.textContent.trim(); } /** diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts index 940e894149..ce24883c2d 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts @@ -42,6 +42,7 @@ import { MatButtonModule } from '@angular/material/button'; import { MatListModule } from '@angular/material/list'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; +import { MatInputModule } from '@angular/material/input'; import { IconModule } from '@alfresco/adf-core'; interface CategoryNameControlErrors { @@ -64,7 +65,8 @@ interface CategoryNameControlErrors { MatButtonModule, IconModule, MatListModule, - MatProgressSpinnerModule + MatProgressSpinnerModule, + MatInputModule ], templateUrl: './categories-management.component.html', styleUrls: ['./categories-management.component.scss'], diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html index 7bcb260a28..c7ca25fa6c 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html @@ -246,18 +246,18 @@
-
+
{{ 'METADATA.BASIC.NO_ITEMS_MESSAGE' | translate : { groupTitle: group.title | translate } }}
+ [multiValueSeparator]="multiValueSeparator" />
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss index b4dc8d9763..9aec87ab0d 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss @@ -10,21 +10,8 @@ $panel-properties-height: 56px !default; border-radius: 12px; margin: 12px; - adf-card-view-textitem { - #{ms.$mat-form-field-subscript-wrapper} { - display: none; - } - - #{ms.$mat-form-field-infix} { - padding-bottom: 0; - } - } - .adf-property-list .adf-property .adf-property-field { .adf-property-value:not(.adf-card-view-selectitem .adf-property-value) { - margin-top: 10px; - height: 32px; - &:is(textarea) { padding-top: 6px; } @@ -32,7 +19,7 @@ $panel-properties-height: 56px !default; label { font-size: 19px; - line-height: 20px; + line-height: 24px; } } } @@ -47,17 +34,15 @@ $panel-properties-height: 56px !default; } } - #{ms.$mat-expansion-panel-body} { - padding-top: 16px; + .adf-metadata-properties-expansion-panel, + .adf-metadata-categories-header { + display: block; + margin-top: 16px; + } - input { - border-color: transparent; - width: 100%; - - &:focus-visible { - outline: none; - } - } + .adf-metadata-properties-tags, + .adf-metadata-no-item-added { + margin-top: 16px; } .adf-edit-icon-buttons { diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html index 51ad02eab5..0128aa18cb 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.html @@ -1,73 +1,80 @@
- - {{ 'NODE_SELECTOR.SEARCH' | translate }} - + @if (showSearch) { + + {{ 'NODE_SELECTOR.SEARCH' | translate }} + + @if (searchTerm.length > 0) { + + } + @if (searchTerm.length === 0) { + + } + + } + @if (showDropdownSiteList) { + + } + @if (hasCustomModels()) { - - - - - + }
- + @if (searchPanelExpanded) { + + }
- + @if (!showBreadcrumbs()) {

{{ 'NODE_SELECTOR.SEARCH_RESULTS' | translate }}

- - - + } @else { + + } + @if (showNodeCounter) { + + } diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss index 02d34c7d03..cb39c9c2a4 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.scss @@ -36,74 +36,27 @@ h2.adf-search-results-label { } &-document-list-container { - margin-top: 16px; width: 100%; } &-content { - #{ms.$mat-input-element} { - &:focus::placeholder { - color: var(--theme-primary-color); - } - } - - #{ms.$mat-form-field-wrapper} { - #{ms.$mat-form-field-flex} { - align-items: center; - - #{ms.$mat-form-field-infix} { - padding-bottom: 0; - } - } - } - - .adf-sites-dropdown-form-field { - label { - &#{ms.$mat-form-field-label} { - top: 32px; - } - } - } - - #{ms.$mat-form-field-subscript-wrapper} { - height: 16px; - } - - padding-top: 0; + padding-top: 10px; &-input { width: 100%; - margin-bottom: 8px; + margin-bottom: 15px; - .adf-content-node-selector-content-input-icon:is(mat-icon) { + .adf-content-node-selector-content-input-icon { color: var(--adf-theme-foreground-icon-color-054); - padding: 0 0 8px; - width: 1em; - height: 1em; - font-size: 20px; } .adf-content-node-selector-search-clear-button { - padding: 0; - width: 20px; - height: 28px; - - &:focus { - outline-offset: -1.5px; - } - - .adf-content-node-selector-content-input-icon:is(mat-icon) { - cursor: pointer; - + .adf-content-node-selector-content-input-icon { &:hover { color: var(--adf-theme-foreground-base-color); } } } - - #{ms.$mat-form-field-subscript-wrapper} { - display: none; - } } .adf-site-dropdown-container { @@ -111,6 +64,7 @@ h2.adf-search-results-label { .adf-sites-dropdown-form-field { width: 100%; + margin-bottom: 15px; } } } diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.ts b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.ts index f238c27f88..663d84885b 100644 --- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.ts +++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel/content-node-selector-panel.component.ts @@ -42,7 +42,6 @@ import { ShareDataRow } from '../../document-list/data/share-data-row.model'; import { NodeEntryEvent } from '../../document-list/components/node.event'; import { debounceTime } from 'rxjs/operators'; import { ContentNodeSelectorPanelService } from './content-node-selector-panel.service'; -import { CommonModule } from '@angular/common'; import { MatFormFieldModule } from '@angular/material/form-field'; import { TranslatePipe } from '@ngx-translate/core'; import { MatInputModule } from '@angular/material/input'; @@ -63,7 +62,6 @@ export const defaultValidation = () => true; @Component({ selector: 'adf-content-node-selector-panel', imports: [ - CommonModule, MatFormFieldModule, TranslatePipe, MatInputModule, diff --git a/lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.html b/lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.html index dcda55e7e1..21d51694e9 100644 --- a/lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.html +++ b/lib/content-services/src/lib/content-node-selector/site-dropdown/sites-dropdown.component.html @@ -1,5 +1,5 @@ diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss index 7b6f4ee957..2c068e6e72 100644 --- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss +++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss @@ -1,11 +1,7 @@ -@use '../mat-selectors.scss' as ms; +@use '@angular/material' as mat; .adf-share-link-dialog { .adf-share-link { - #{ms.$mat-form-field-flex} { - height: 48px; - } - &__dialog-content { display: flex; flex-direction: column; @@ -34,16 +30,6 @@ &__form { padding-top: 8px; - - #{ms.$mat-form-field-infix}:has(.adf-share-link__input) { - border-top: 0.9375em solid transparent; - border-bottom: 0.9375em solid transparent; - height: 16px; - } - - &--field { - padding-bottom: 16px; - } } &__public-content { @@ -56,6 +42,14 @@ font-size: var(--theme-caption-font-size); } + &__border-color { + @include mat.form-field-overrides( + ( + outlined-outline-color: var(--theme-warn-color-a700) + ) + ); + } + &--row { display: flex; flex-direction: row; @@ -65,7 +59,7 @@ margin: 8px 0; &-sharable { - margin-bottom: 0; + margin-bottom: 10px; } } @@ -82,10 +76,6 @@ padding-bottom: 0; } - &__input { - color: var(--adf-theme-foreground-text-color-087); - } - &__separation-line { border: 1px solid var(--theme-grey-background-color); margin: 8px -24px; @@ -96,12 +86,6 @@ margin-left: 12px; } - &__icon { - color: var(--adf-theme-foreground-icon-color-054); - padding-bottom: 0; - padding-right: 0; - } - &__para { margin-top: 8px; margin-bottom: 8px; @@ -111,30 +95,6 @@ font-weight: 700; font-size: var(--theme-subheading-2-font-size); } - - &__copy-icon { - padding-top: 18px; - font-size: 22px; - } - - &__calender-icon { - top: 12px; - position: relative; - right: -6px; - - svg { - height: 18px; - width: 18px; - } - } - - &__date-time-container { - padding-bottom: 20px; - } - - &__border-color { - border: 1px solid var(--theme-warn-color-a700); - } } .adf-input-action { @@ -143,8 +103,6 @@ .adf-full-width { width: 100%; - border-radius: 6px; - margin-top: -6px; } .adf-sharable-link { diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts index 76c47bc1f5..2c668d2d9b 100644 --- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts +++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.spec.ts @@ -305,18 +305,6 @@ describe('ShareDialogComponent', () => { ); }); - it('should not display floating label for public link field', () => { - component.data = { - node, - baseShareUrl: 'some-url/' - }; - - fixture.detectChanges(); - expect(fixture.debugElement.query(By.css('[data-automation-id="adf-content-share-public-link-field"]')).componentInstance.floatLabel).toBe( - 'always' - ); - }); - describe('datetimepicker type', () => { beforeEach(() => { spyOn(sharedLinksApiService, 'createSharedLinks').and.returnValue(of()); diff --git a/lib/content-services/src/lib/dialogs/folder/folder.dialog.html b/lib/content-services/src/lib/dialogs/folder/folder.dialog.html index 386f4ee8ff..14b8522ea3 100644 --- a/lib/content-services/src/lib/dialogs/folder/folder.dialog.html +++ b/lib/content-services/src/lib/dialogs/folder/folder.dialog.html @@ -4,7 +4,7 @@
- + {{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.LABEL' | translate }} - + {{ 'CORE.FOLDER_DIALOG.FOLDER_TITLE.LABEL' | translate }} - + {{ 'CORE.FOLDER_DIALOG.FOLDER_DESCRIPTION.LABEL' | translate }} + +
+ +
- - {{ property.label | translate }} - - - - - -
- -
- + {{ property.label | translate }} + + + + {{ propertyValue }} + + + + + +
+
- {{ property.label | translate }} - - - - {{ propertyValue }} - - - - - - - -
- -
- - - {{ property.label | translate }} - - - - -
- -
- {{ property.default | translate }} -
+ + + {{ property.label | translate }} + + + + +
+} diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss index 0820b4985e..84d440a970 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss @@ -2,9 +2,6 @@ .adf-card-view-textitem { .adf-textitem-error { - font-size: var(--theme-caption-font-size); - padding-top: 6px; - &::before { display: none; } @@ -50,12 +47,8 @@ margin-top: 6px; } - #{ms.$mat-form-field-infix} { - padding-top: 0; - - .adf-property-value { - margin-left: 0; - } + .adf-property-value { + margin-left: 0; } } @@ -75,10 +68,6 @@ } } - .adf-textitem-default-value { - color: var(--adf-theme-foreground-text-color-064); - } - .adf-property-value-not-editable { color: var(--adf-metadata-property-panel-title-color); } diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts index ec82ca4134..665fc8366c 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts @@ -355,7 +355,7 @@ describe('CardViewTextItemComponent', () => { expect(await testingUtils.checkIfMatChipGridExists()).toBe(false); }); - it('should display the label for multi-valued chips if displayLabelForChips is true', async () => { + it('should display the label for multi-valued chips', async () => { const cardViewTextItemObject = { label: 'Text label', value: ['item1', 'item2', 'item3'], @@ -367,7 +367,6 @@ describe('CardViewTextItemComponent', () => { component.editable = true; component.property = new CardViewTextItemModel(cardViewTextItemObject); - component.displayLabelForChips = true; component.ngOnChanges({ property: new SimpleChange(null, null, true) }); fixture.detectChanges(); @@ -376,37 +375,14 @@ describe('CardViewTextItemComponent', () => { expect(testingUtils.getInnerTextByCSS('.adf-property-label')).toBe('Text label'); }); - it('should NOT display the label for multi-valued chips if displayLabelForChips is false', async () => { - const cardViewTextItemObject = { - label: 'Text label', - value: ['item1', 'item2', 'item3'], - key: 'textkey', - default: ['FAKE-DEFAULT-KEY'], - editable: true, - multivalued: true - }; - - component.editable = true; - component.property = new CardViewTextItemModel(cardViewTextItemObject); - component.displayLabelForChips = false; - component.ngOnChanges({ property: new SimpleChange(null, null, true) }); - - fixture.detectChanges(); - await fixture.whenStable(); - - expect(testingUtils.getByCSS('.adf-property-label')).toBeNull(); - }); - - it('should return true when editable is true, and property.editable is false', () => { - component.editable = true; + it('should return true when property.editable is false', () => { component.property.editable = false; fixture.detectChanges(); expect(component.isReadonlyProperty).toBe(true); }); - it('should return false when editable is false, and property.editable is false', () => { - component.editable = false; - component.property.editable = false; + it('should return false when and property.editable is true', () => { + component.property.editable = true; fixture.detectChanges(); expect(component.isReadonlyProperty).toBe(false); }); @@ -595,7 +571,7 @@ describe('CardViewTextItemComponent', () => { ); }); - it('should input be readonly if item it NOT editable', async () => { + it('should input be disabled if item it NOT editable', async () => { component.editable = false; component.property.clickable = true; component.ngOnChanges({}); @@ -605,7 +581,7 @@ describe('CardViewTextItemComponent', () => { const inputHarness = await testingUtils.getMatInputByDataAutomationId(`card-textitem-value-${component.property.key}`); expect(component.isEditable).toBe(false); - expect(await inputHarness.isReadonly()).toBe(true); + expect(await inputHarness.isDisabled()).toBe(true); }); }); diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts index 85820f5c50..76ec338c91 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.stories.ts @@ -67,8 +67,7 @@ export const ChipsCardViewTextItem: Story = { multivalued: true, icon: 'icon', editable: true - }), - displayLabelForChips: false + }) } }; @@ -107,22 +106,3 @@ export const DefaultCardViewTextItem: Story = { }) } }; - -export const DisplayLabelForChipsCardTextItem: Story = { - render: (args) => ({ - props: args - }), - args: { - property: new CardViewTextItemModel({ - label: 'CardView Text Item - Multi-Valued Chips template', - value: ['Chip 1', 'Chip 2', 'Chip 3'], - key: 'multivalued', - default: 'default value', - multiline: true, - multivalued: true, - icon: 'icon', - editable: true - }), - displayLabelForChips: false - } -}; diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts index ebeac0d097..e9f0725fd1 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts @@ -38,7 +38,6 @@ const templateTypes = { clickableTemplate: 'clickableTemplate', multilineTemplate: 'multilineTemplate', chipsTemplate: 'chipsTemplate', - emptyTemplate: 'emptyTemplate', defaultTemplate: 'defaultTemplate' }; @@ -74,9 +73,6 @@ export class CardViewTextItemComponent extends BaseCardView + [multiValueSeparator]="multiValueSeparator" />
diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss index 560a527f08..4d0624d35c 100644 --- a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss +++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss @@ -5,21 +5,6 @@ border-color: var(--adf-theme-foreground-divider-color); border-radius: 0; - .adf-property-label { - color: var(--adf-metadata-property-panel-text-color); - display: flex; - line-height: 20px; - margin-bottom: 4px; - - &.adf-property-readonly-value { - color: var(--adf-metadata-property-panel-label-color); - } - - &.adf-property-value-editable { - color: var(--adf-metadata-property-panel-title-color); - } - } - .adf-property-container { margin-bottom: 12px; } diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts b/lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts index 2655e74a16..bb428c9fb2 100644 --- a/lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts +++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.spec.ts @@ -22,8 +22,6 @@ import { CardViewComponent } from './card-view.component'; import { CardViewSelectItemModel } from '../../models/card-view-selectitem.model'; import { of } from 'rxjs'; import { CardViewSelectItemOption } from '../../interfaces/card-view-selectitem-properties.interface'; -import { CardViewItem } from '../../interfaces/card-view-item.interface'; -import { CardViewItemDispatcherComponent } from '../card-view-item-dispatcher/card-view-item-dispatcher.component'; import { HarnessLoader } from '@angular/cdk/testing'; import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'; import { MatDialogModule } from '@angular/material/dialog'; @@ -53,7 +51,7 @@ describe('CardViewComponent', () => { const getPropertyLabel = (): string => testingUtils.getInnerTextByCSS('.adf-property-label'); const getPropertyValue = (): string => testingUtils.getByCSS('.adf-property-value').nativeElement.value; - const getPropertyValueText = (): string => testingUtils.getInnerTextByCSS('.adf-property-value'); + const getPropertyValueText = (): string => testingUtils.getInnerTextByCSS('.adf-datepicker-span-button'); const getPropertyValueByDataAutomationId = (dataAutomationId: string): string => testingUtils.getByDataAutomationId(dataAutomationId).nativeElement.value; @@ -223,34 +221,4 @@ describe('CardViewComponent', () => { expect(await currentOptions[0].getText()).toContain(options[0].label); expect(await currentOptions[1].getText()).toContain(options[1].label); }); - - it('should show/hide the label for multivalued chip property based on displayLabelForChips input', () => { - const multiValueProperty: CardViewItem = new CardViewTextItemModel({ - label: 'My Multivalue Label', - value: ['Value 1', 'Value 2', 'Value 3'], - key: 'multi-key' - }); - - component.properties = [multiValueProperty]; - fixture.detectChanges(); - - const cardViewItemDispatcherComponent = getCardViewItemDispatcherComponent(); - - expect(cardViewItemDispatcherComponent.displayLabelForChips).toBe(false); - - component.displayLabelForChips = true; - fixture.detectChanges(); - - expect(cardViewItemDispatcherComponent.displayLabelForChips).toBe(true); - }); - - /** - * Return the card view item dispatcher component - * - * @returns the dispatcher component instance - */ - function getCardViewItemDispatcherComponent(): CardViewItemDispatcherComponent { - const cardViewItemDispatcherDebugElement = testingUtils.getByDirective(CardViewItemDispatcherComponent); - return cardViewItemDispatcherDebugElement.componentInstance as CardViewItemDispatcherComponent; - } }); diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.ts b/lib/core/src/lib/card-view/components/card-view/card-view.component.ts index e0d427d984..f0a1bd0a89 100644 --- a/lib/core/src/lib/card-view/components/card-view/card-view.component.ts +++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.ts @@ -60,8 +60,4 @@ export class CardViewComponent { /** String separator between multi-value property items. */ @Input() multiValueSeparator: string = DEFAULT_SEPARATOR; - - /** Toggles whether or not to show label for multivalued chip property. */ - @Input() - displayLabelForChips: boolean = false; } diff --git a/lib/core/src/lib/card-view/stories/card-view-shared-meta.ts b/lib/core/src/lib/card-view/stories/card-view-shared-meta.ts index d2052e34d6..f5578af368 100644 --- a/lib/core/src/lib/card-view/stories/card-view-shared-meta.ts +++ b/lib/core/src/lib/card-view/stories/card-view-shared-meta.ts @@ -92,14 +92,6 @@ export const cardViewArgTypes: ArgTypes = { type: { summary: 'string' }, defaultValue: { summary: ', ' } } - }, - displayLabelForChips: { - control: 'boolean', - description: 'Display label for chips property', - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: 'false' } - } } }; @@ -113,8 +105,7 @@ export const cardViewDefaultArgs: Record = { displayClearAction: true, copyToClipboardAction: true, useChipsForMultiValueProperty: true, - multiValueSeparator: ', ', - displayLabelForChips: false + multiValueSeparator: ', ' }; /** diff --git a/lib/core/src/lib/comments/comments.component.html b/lib/core/src/lib/comments/comments.component.html index 31d2d1ccbc..55a54c9c00 100644 --- a/lib/core/src/lib/comments/comments.component.html +++ b/lib/core/src/lib/comments/comments.component.html @@ -3,14 +3,14 @@ {{'COMMENTS.HEADER' | translate: { count: comments?.length } }}
- + + {{ 'COMMENTS.ADD' | translate }}