fix: missed component class name 'kbq-' prefix (#DS-3753)

packages/components-dev/e2e/components/file-upload.ts

@@ -158,7 +158,7 @@ export class DevFileUploadStateAndStyle {
         afterNextRender(() => {
             this.document
                 .querySelectorAll('.dev-dragover .kbq-file-upload')
-                .forEach((el) => this.renderer.addClass(el, 'dragover'));
+                .forEach((el) => this.renderer.addClass(el, 'kbq-file-drop_dragover'));
 
             this.document
                 .querySelectorAll('.dev-error .kbq-file-upload')

packages/components-dev/file-upload/module.ts

@@ -246,7 +246,7 @@ export class DevFileUploadStateAndStyle {
         afterNextRender(() => {
             this.document
                 .querySelectorAll('.dev-dragover .kbq-file-upload')
-                .forEach((el) => this.renderer.addClass(el, 'dragover'));
+                .forEach((el) => this.renderer.addClass(el, 'kbq-file-drop_dragover'));
             this.document
                 .querySelectorAll('.dev-error .kbq-file-upload')
                 .forEach((el) => this.renderer.addClass(el, 'kbq-error'));
@@ -308,7 +308,7 @@ export class DevFileUploadStateAndStyle {
     },
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-class DevExamples {}
+export class DevExamples {}
 
 @Component({
     standalone: true,

packages/components/core/styles/typography/_typography.scss

@@ -1,9 +1,5 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use 'sass:map';
-
 @use 'typography-utils' as *;
-
 @use '../common/tokens' as *;
 
 // TODO: REMOVE
@@ -303,28 +299,45 @@
 @mixin kbq-markdown-base-typography() {
     // h1, h2, h3, h4, h5, h6
     @for $i from 1 through 6 {
-        .md-h#{$i} {
+        // DEPRECATED: .md-h# class is deprecated, use .kbq-md-h# instead
+        .md-h#{$i},
+        .kbq-md-h#{$i} {
             @include kbq-typography-level-to-styles-css-variables(md-typography, md-h#{$i});
         }
     }
 
-    .md-body {
+    // DEPRECATED: .md-body class is deprecated, use .kbq-md-body instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-body,
+    .kbq-md-body {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
     }
 
-    .md-body-mono {
+    // DEPRECATED: .md-body-mono class is deprecated, use .kbq-md-body-mono instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-body-mono,
+    .kbq-md-body-mono {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-body-mono);
     }
 
-    .md-caption {
+    // DEPRECATED: .md-caption class is deprecated, use .kbq-md-caption instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-caption,
+    .kbq-md-caption {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-caption);
     }
 
-    .md-table-cell {
+    // DEPRECATED: .md-table-cell class is deprecated, use .kbq-md-table-cell instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-table-cell,
+    .kbq-md-table-cell {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-cell);
     }
 
-    .md-table-header {
+    // DEPRECATED: .md-table-header class is deprecated, use .kbq-md-table-header instead
+    /* stylelint-disable-next-line selector-class-pattern */
+    .md-table-header,
+    .kbq-md-table-header {
         @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-header);
     }
 }

packages/components/ellipsis-center/ellipsis-center.directive.spec.ts

@@ -70,8 +70,8 @@ describe(KbqEllipsisCenterDirective.name, () => {
         componentInstance.ellipsisCenterDirective.refresh();
         tick(); // wait for setTimeout
 
-        const startEl: HTMLElement = nativeElement.querySelector('.data-text-start')!;
-        const endEl: HTMLElement = nativeElement.querySelector('.data-text-end')!;
+        const startEl: HTMLElement = nativeElement.querySelector('.kbq-ellipsis-center_data-text-start')!;
+        const endEl: HTMLElement = nativeElement.querySelector('.kbq-ellipsis-center_data-text-end')!;
 
         expect(startEl).toBeTruthy();
         expect(endEl).toBeTruthy();

packages/components/ellipsis-center/ellipsis-center.directive.ts

@@ -79,7 +79,10 @@ export class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnI
 
         this.content = this._kbqEllipsisCenter;
 
-        const [dataTextStart, dataTextEnd] = ['data-text-start', 'data-text-end'].map((querySelector) => {
+        const [dataTextStart, dataTextEnd] = [
+            'kbq-ellipsis-center_data-text-start',
+            'kbq-ellipsis-center_data-text-end'
+        ].map((querySelector) => {
             const element = this.elementRef.nativeElement.querySelector(`.${querySelector}`);
 
             if (element) {

packages/components/file-upload/_file-upload-theme.scss

@@ -1,5 +1,3 @@
-// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
-/* stylelint-disable selector-class-pattern */
 @use '../core/styles/common/tokens';
 
 @mixin kbq-file-upload-theme() {
@@ -19,11 +17,11 @@
                     color: var(--kbq-file-upload-single-default-icon-button-color);
                 }
 
-                .kbq-dropzone__icon {
+                .kbq-file-dropzone__icon {
                     color: var(--kbq-file-upload-single-default-upload-icon-color);
                 }
 
-                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-single-default-left-icon-color);
                 }
 
@@ -32,27 +30,27 @@
                 }
             }
 
-            &.dragover {
+            &.kbq-file-drop_dragover {
                 background-color: var(--kbq-file-upload-single-states-on-drag-container-background);
                 border-color: var(--kbq-file-upload-single-states-on-drag-container-border) !important;
             }
 
             &.kbq-error:not(.kbq-disabled) {
-                &:not(.dragover) {
+                &:not(.kbq-file-drop_dragover) {
                     background-color: var(--kbq-file-upload-single-states-error-container-background);
                     border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
                 }
 
-                .kbq-dropzone__icon {
+                .kbq-file-dropzone__icon {
                     color: var(--kbq-file-upload-single-states-error-upload-icon-color);
                 }
 
-                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-single-states-error-left-icon-color);
                 }
 
-                .file-item__text,
-                .dropzone__text:not(.kbq-link) {
+                .kbq-file-item__text,
+                .kbq-file-dropzone__text:not(.kbq-link) {
                     color: var(--kbq-file-upload-single-states-error-text-block-color);
                 }
 
@@ -69,16 +67,16 @@
                 background-color: var(--kbq-file-upload-single-states-disabled-container-background);
                 border-color: var(--kbq-file-upload-single-states-disabled-container-border) !important;
 
-                .kbq-dropzone__icon {
+                .kbq-file-dropzone__icon {
                     color: var(--kbq-file-upload-single-states-disabled-upload-icon-color);
                 }
 
-                .file-item__text-wrapper .kbq-icon.kbq-empty {
+                .kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-single-states-disabled-left-icon-color);
                 }
 
-                .dropzone__text,
-                .file-item__text {
+                .kbq-file-dropzone__text,
+                .kbq-file-item__text {
                     color: var(--kbq-file-upload-single-states-disabled-text-block-color);
                 }
 
@@ -103,7 +101,7 @@
                 border: 2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color);
             }
 
-            .btn-upload {
+            .kbq-file-btn-upload {
                 border-top-color: var(--kbq-file-upload-multiple-default-container-border);
             }
 
@@ -113,24 +111,24 @@
             }
 
             &:not(.kbq-disabled, .kbq-error) {
-                .kbq-dropzone__icon {
+                .kbq-file-dropzone__icon {
                     color: var(--kbq-file-upload-multiple-default-upload-icon-color);
                 }
             }
 
-            &.dragover {
+            &.kbq-file-drop_dragover {
                 background-color: var(--kbq-file-upload-multiple-states-on-drag-container-background);
                 border-color: var(--kbq-file-upload-multiple-states-on-drag-container-border) !important;
 
-                .btn-upload {
+                .kbq-file-btn-upload {
                     border-top-color: var(--kbq-file-upload-multiple-states-on-drag-container-border);
                 }
 
                 .kbq-file-multiple-uploaded__header {
                     border-bottom-color: var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color) !important;
                 }
 
-                .kbq-dropzone__icon {
+                .kbq-file-dropzone__icon {
                     color: var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color);
                 }
             }
@@ -139,11 +137,11 @@
                 background-color: var(--kbq-file-upload-multiple-states-disabled-container-background);
                 border-color: var(--kbq-file-upload-multiple-states-disabled-container-border) !important;
 
-                .kbq-dropzone__icon {
+                .kbq-file-dropzone__icon {
                     color: var(--kbq-file-upload-multiple-states-disabled-upload-icon-color);
                 }
 
-                .dropzone__text,
+                .kbq-file-dropzone__text,
                 .kbq-file-multiple-uploaded__header {
                     color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
                 }
@@ -152,12 +150,12 @@
                     border-bottom-color: var(--kbq-file-upload-multiple-states-disabled-grid-divider-color) !important;
                 }
 
-                .multiple__uploaded-item {
+                .kbq-file-multiple__uploaded-item {
                     .kbq-file-upload__file .kbq-icon.kbq-empty {
                         color: var(--kbq-file-upload-multiple-states-disabled-left-icon-color);
                     }
 
-                    .file-item__text,
+                    .kbq-file-item__text,
                     .kbq-file-upload__size {
                         color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
                     }
@@ -173,21 +171,21 @@
                     background-color: var(--kbq-background-error-less);
                     border-color: var(--kbq-line-error) !important;
 
-                    .kbq-dropzone__icon {
+                    .kbq-file-dropzone__icon {
                         color: var(--kbq-file-upload-multiple-states-error-upload-icon-color);
                     }
 
-                    .dropzone__text:not(.kbq-link),
+                    .kbq-file-dropzone__text:not(.kbq-link),
                     .kbq-file-multiple-uploaded__header {
                         color: var(--kbq-file-upload-multiple-states-error-text-block-color);
                     }
                 }
 
-                .multiple__uploaded-item {
-                    &:has(.kbq-file-upload__row.error) {
+                .kbq-file-multiple__uploaded-item {
+                    &:has(.kbq-file-upload__row.kbq-error) {
                         background-color: var(--kbq-background-error-less);
 
-                        .file-item__text,
+                        .kbq-file-item__text,
                         .kbq-file-upload__size {
                             color: var(--kbq-foreground-error);
                         }
@@ -203,7 +201,7 @@
                 }
             }
 
-            .multiple__uploaded-item {
+            .kbq-file-multiple__uploaded-item {
                 .kbq-file-upload__file .kbq-icon.kbq-empty {
                     color: var(--kbq-file-upload-multiple-default-left-icon-color);
                 }
@@ -233,19 +231,19 @@
 
     // @TODO: remove when redesign applied, use default font (#DS-3858)
     .kbq-single-file-upload {
-        & .file-item__text-wrapper,
-        & .dropzone__text {
+        & .kbq-file-item__text-wrapper,
+        & .kbq-file-dropzone__text {
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
     }
 
     .kbq-multiple-file-upload {
-        .multiple__header {
+        .kbq-file-multiple__header {
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, subheading);
         }
 
         // @TODO: remove when redesign applied, use default font (#DS-3858)
-        .multiple__caption {
+        .kbq-file-multiple__caption {
             &,
             .kbq-link {
                 @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
@@ -258,7 +256,7 @@
         }
 
         // @TODO: remove when redesign applied, use default font (#DS-3858)
-        .multiple__uploaded-item {
+        .kbq-file-multiple__uploaded-item {
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 

packages/components/file-upload/file-drop.spec.ts

@@ -46,17 +46,17 @@ describe('FileDropDirective', () => {
     });
 
     it('FileDropDirective: dragover/dragleave', () => {
-        expect(dndZone.classList.contains('dragover')).toBeFalsy();
+        expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeFalsy();
 
         dispatchFakeEvent(dndZone, 'dragover');
         fixture.detectChanges();
 
-        expect(dndZone.classList.contains('dragover')).toBeTruthy();
+        expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeTruthy();
 
         dispatchFakeEvent(dndZone, 'dragleave');
         fixture.detectChanges();
 
-        expect(dndZone.classList.contains('dragover')).toBeFalsy();
+        expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeFalsy();
     });
 
     it('FileDropDirective: drop with files', (done) => {
@@ -70,14 +70,14 @@ describe('FileDropDirective', () => {
         dispatchFakeEvent(dndZone, 'dragover');
         fixture.detectChanges();
 
-        expect(dndZone.classList.contains('dragover')).toBeTruthy();
+        expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeTruthy();
 
         dispatchEvent(dndZone, event);
         fixture.detectChanges();
 
         setTimeout(() => {
             expect(component.onDrop).toHaveBeenCalledWith(expect.objectContaining({ length: fakeFiles.length }));
-            expect(dndZone.classList.contains('dragover')).toBeFalsy();
+            expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeFalsy();
             done();
         });
     });

packages/components/file-upload/file-drop.ts

@@ -9,7 +9,8 @@ const entryIsFile = (entry?: FileSystemEntry): entry is FileSystemFileEntry => !
     selector: '[kbqFileDrop]',
     exportAs: 'kbqFileDrop',
     host: {
-        '[class.dragover]': 'dragover',
+        class: 'kbq-file-drop',
+        '[class.kbq-file-drop_dragover]': 'dragover',
         '(dragover)': 'onDragOver($event)',
         '(dragleave)': 'onDragLeave($event)',
         '(drop)': 'onDrop($event)'

packages/components/file-upload/file-upload-tokens.scss

@@ -87,8 +87,7 @@
     --kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
 }
 
-/* stylelint-disable-next-line selector-class-pattern */
-:where(.kbq-file-upload.compact) {
+:where(.kbq-file-upload.kbq-file-upload_compact) {
     --kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);
     --kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);
     --kbq-file-upload-multiple-compact-container-padding-vertical: 11px;

packages/components/file-upload/file-upload.karma-spec.ts

@@ -11,9 +11,9 @@ import { KbqFileUploadModule } from './file-upload.module';
 import { KbqMultipleFileUploadComponent } from './multiple-file-upload.component';
 import { KbqSingleFileUploadComponent } from './single-file-upload.component';
 
-const fileItemRowCssClass = 'multiple__uploaded-item';
+const fileItemRowCssClass = 'kbq-file-multiple__uploaded-item';
 
-const fileItemCssClass = 'file-item';
+const fileItemCssClass = 'kbq-file-item';
 
 const FILE_NAME = 'test.file';