Skip to content

Commit ccec766

Browse files
artembelikartembelik
authored
fix: missed component class name 'kbq-' prefix (#DS-3753) (#1116)
1 parent b0c8cd7 commit ccec766

26 files changed

Lines changed: 146 additions & 141 deletions

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export class DevFileUploadStateAndStyle {
158158
afterNextRender(() => {
159159
this.document
160160
.querySelectorAll('.dev-dragover .kbq-file-upload')
161-
.forEach((el) => this.renderer.addClass(el, 'dragover'));
161+
.forEach((el) => this.renderer.addClass(el, 'kbq-file-drop_dragover'));
162162

163163
this.document
164164
.querySelectorAll('.dev-error .kbq-file-upload')

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -246,7 +246,7 @@ export class DevFileUploadStateAndStyle {
246246
afterNextRender(() => {
247247
this.document
248248
.querySelectorAll('.dev-dragover .kbq-file-upload')
249-
.forEach((el) => this.renderer.addClass(el, 'dragover'));
249+
.forEach((el) => this.renderer.addClass(el, 'kbq-file-drop_dragover'));
250250
this.document
251251
.querySelectorAll('.dev-error .kbq-file-upload')
252252
.forEach((el) => this.renderer.addClass(el, 'kbq-error'));
@@ -308,7 +308,7 @@ export class DevFileUploadStateAndStyle {
308308
},
309309
changeDetection: ChangeDetectionStrategy.OnPush
310310
})
311-
class DevExamples {}
311+
export class DevExamples {}
312312

313313
@Component({
314314
standalone: true,

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

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
2-
/* stylelint-disable selector-class-pattern */
31
@use 'sass:map';
4-
52
@use 'typography-utils' as *;
6-
73
@use '../common/tokens' as *;
84

95
// TODO: REMOVE
@@ -303,28 +299,45 @@
303299
@mixin kbq-markdown-base-typography() {
304300
// h1, h2, h3, h4, h5, h6
305301
@for $i from 1 through 6 {
306-
.md-h#{$i} {
302+
// DEPRECATED: .md-h# class is deprecated, use .kbq-md-h# instead
303+
.md-h#{$i},
304+
.kbq-md-h#{$i} {
307305
@include kbq-typography-level-to-styles-css-variables(md-typography, md-h#{$i});
308306
}
309307
}
310308

311-
.md-body {
309+
// DEPRECATED: .md-body class is deprecated, use .kbq-md-body instead
310+
/* stylelint-disable-next-line selector-class-pattern */
311+
.md-body,
312+
.kbq-md-body {
312313
@include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
313314
}
314315

315-
.md-body-mono {
316+
// DEPRECATED: .md-body-mono class is deprecated, use .kbq-md-body-mono instead
317+
/* stylelint-disable-next-line selector-class-pattern */
318+
.md-body-mono,
319+
.kbq-md-body-mono {
316320
@include kbq-typography-level-to-styles-css-variables(md-typography, md-body-mono);
317321
}
318322

319-
.md-caption {
323+
// DEPRECATED: .md-caption class is deprecated, use .kbq-md-caption instead
324+
/* stylelint-disable-next-line selector-class-pattern */
325+
.md-caption,
326+
.kbq-md-caption {
320327
@include kbq-typography-level-to-styles-css-variables(md-typography, md-caption);
321328
}
322329

323-
.md-table-cell {
330+
// DEPRECATED: .md-table-cell class is deprecated, use .kbq-md-table-cell instead
331+
/* stylelint-disable-next-line selector-class-pattern */
332+
.md-table-cell,
333+
.kbq-md-table-cell {
324334
@include kbq-typography-level-to-styles-css-variables(md-typography, md-table-cell);
325335
}
326336

327-
.md-table-header {
337+
// DEPRECATED: .md-table-header class is deprecated, use .kbq-md-table-header instead
338+
/* stylelint-disable-next-line selector-class-pattern */
339+
.md-table-header,
340+
.kbq-md-table-header {
328341
@include kbq-typography-level-to-styles-css-variables(md-typography, md-table-header);
329342
}
330343
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,8 @@ describe(KbqEllipsisCenterDirective.name, () => {
7070
componentInstance.ellipsisCenterDirective.refresh();
7171
tick(); // wait for setTimeout
7272

73-
const startEl: HTMLElement = nativeElement.querySelector('.data-text-start')!;
74-
const endEl: HTMLElement = nativeElement.querySelector('.data-text-end')!;
73+
const startEl: HTMLElement = nativeElement.querySelector('.kbq-ellipsis-center_data-text-start')!;
74+
const endEl: HTMLElement = nativeElement.querySelector('.kbq-ellipsis-center_data-text-end')!;
7575

7676
expect(startEl).toBeTruthy();
7777
expect(endEl).toBeTruthy();

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,10 @@ export class KbqEllipsisCenterDirective extends KbqTooltipTrigger implements OnI
7979

8080
this.content = this._kbqEllipsisCenter;
8181

82-
const [dataTextStart, dataTextEnd] = ['data-text-start', 'data-text-end'].map((querySelector) => {
82+
const [dataTextStart, dataTextEnd] = [
83+
'kbq-ellipsis-center_data-text-start',
84+
'kbq-ellipsis-center_data-text-end'
85+
].map((querySelector) => {
8386
const element = this.elementRef.nativeElement.querySelector(`.${querySelector}`);
8487

8588
if (element) {

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

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// @TODO should remove "selector-class-pattern" rule ignore (#DS-3753)
2-
/* stylelint-disable selector-class-pattern */
31
@use '../core/styles/common/tokens';
42

53
@mixin kbq-file-upload-theme() {
@@ -19,11 +17,11 @@
1917
color: var(--kbq-file-upload-single-default-icon-button-color);
2018
}
2119

22-
.kbq-dropzone__icon {
20+
.kbq-file-dropzone__icon {
2321
color: var(--kbq-file-upload-single-default-upload-icon-color);
2422
}
2523

26-
.file-item__text-wrapper .kbq-icon.kbq-empty {
24+
.kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
2725
color: var(--kbq-file-upload-single-default-left-icon-color);
2826
}
2927

@@ -32,27 +30,27 @@
3230
}
3331
}
3432

35-
&.dragover {
33+
&.kbq-file-drop_dragover {
3634
background-color: var(--kbq-file-upload-single-states-on-drag-container-background);
3735
border-color: var(--kbq-file-upload-single-states-on-drag-container-border) !important;
3836
}
3937

4038
&.kbq-error:not(.kbq-disabled) {
41-
&:not(.dragover) {
39+
&:not(.kbq-file-drop_dragover) {
4240
background-color: var(--kbq-file-upload-single-states-error-container-background);
4341
border-color: var(--kbq-file-upload-single-states-error-container-border) !important;
4442
}
4543

46-
.kbq-dropzone__icon {
44+
.kbq-file-dropzone__icon {
4745
color: var(--kbq-file-upload-single-states-error-upload-icon-color);
4846
}
4947

50-
.file-item__text-wrapper .kbq-icon.kbq-empty {
48+
.kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
5149
color: var(--kbq-file-upload-single-states-error-left-icon-color);
5250
}
5351

54-
.file-item__text,
55-
.dropzone__text:not(.kbq-link) {
52+
.kbq-file-item__text,
53+
.kbq-file-dropzone__text:not(.kbq-link) {
5654
color: var(--kbq-file-upload-single-states-error-text-block-color);
5755
}
5856

@@ -69,16 +67,16 @@
6967
background-color: var(--kbq-file-upload-single-states-disabled-container-background);
7068
border-color: var(--kbq-file-upload-single-states-disabled-container-border) !important;
7169

72-
.kbq-dropzone__icon {
70+
.kbq-file-dropzone__icon {
7371
color: var(--kbq-file-upload-single-states-disabled-upload-icon-color);
7472
}
7573

76-
.file-item__text-wrapper .kbq-icon.kbq-empty {
74+
.kbq-file-item__text-wrapper .kbq-icon.kbq-empty {
7775
color: var(--kbq-file-upload-single-states-disabled-left-icon-color);
7876
}
7977

80-
.dropzone__text,
81-
.file-item__text {
78+
.kbq-file-dropzone__text,
79+
.kbq-file-item__text {
8280
color: var(--kbq-file-upload-single-states-disabled-text-block-color);
8381
}
8482

@@ -103,7 +101,7 @@
103101
border: 2px solid var(--kbq-file-upload-multiple-states-focused-focus-outline-color);
104102
}
105103

106-
.btn-upload {
104+
.kbq-file-btn-upload {
107105
border-top-color: var(--kbq-file-upload-multiple-default-container-border);
108106
}
109107

@@ -113,24 +111,24 @@
113111
}
114112

115113
&:not(.kbq-disabled, .kbq-error) {
116-
.kbq-dropzone__icon {
114+
.kbq-file-dropzone__icon {
117115
color: var(--kbq-file-upload-multiple-default-upload-icon-color);
118116
}
119117
}
120118

121-
&.dragover {
119+
&.kbq-file-drop_dragover {
122120
background-color: var(--kbq-file-upload-multiple-states-on-drag-container-background);
123121
border-color: var(--kbq-file-upload-multiple-states-on-drag-container-border) !important;
124122

125-
.btn-upload {
123+
.kbq-file-btn-upload {
126124
border-top-color: var(--kbq-file-upload-multiple-states-on-drag-container-border);
127125
}
128126

129127
.kbq-file-multiple-uploaded__header {
130128
border-bottom-color: var(--kbq-file-upload-multiple-states-on-drag-grid-divider-color) !important;
131129
}
132130

133-
.kbq-dropzone__icon {
131+
.kbq-file-dropzone__icon {
134132
color: var(--kbq-file-upload-multiple-states-on-drag-upload-icon-color);
135133
}
136134
}
@@ -139,11 +137,11 @@
139137
background-color: var(--kbq-file-upload-multiple-states-disabled-container-background);
140138
border-color: var(--kbq-file-upload-multiple-states-disabled-container-border) !important;
141139

142-
.kbq-dropzone__icon {
140+
.kbq-file-dropzone__icon {
143141
color: var(--kbq-file-upload-multiple-states-disabled-upload-icon-color);
144142
}
145143

146-
.dropzone__text,
144+
.kbq-file-dropzone__text,
147145
.kbq-file-multiple-uploaded__header {
148146
color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
149147
}
@@ -152,12 +150,12 @@
152150
border-bottom-color: var(--kbq-file-upload-multiple-states-disabled-grid-divider-color) !important;
153151
}
154152

155-
.multiple__uploaded-item {
153+
.kbq-file-multiple__uploaded-item {
156154
.kbq-file-upload__file .kbq-icon.kbq-empty {
157155
color: var(--kbq-file-upload-multiple-states-disabled-left-icon-color);
158156
}
159157

160-
.file-item__text,
158+
.kbq-file-item__text,
161159
.kbq-file-upload__size {
162160
color: var(--kbq-file-upload-multiple-states-disabled-text-block-color);
163161
}
@@ -173,21 +171,21 @@
173171
background-color: var(--kbq-background-error-less);
174172
border-color: var(--kbq-line-error) !important;
175173

176-
.kbq-dropzone__icon {
174+
.kbq-file-dropzone__icon {
177175
color: var(--kbq-file-upload-multiple-states-error-upload-icon-color);
178176
}
179177

180-
.dropzone__text:not(.kbq-link),
178+
.kbq-file-dropzone__text:not(.kbq-link),
181179
.kbq-file-multiple-uploaded__header {
182180
color: var(--kbq-file-upload-multiple-states-error-text-block-color);
183181
}
184182
}
185183

186-
.multiple__uploaded-item {
187-
&:has(.kbq-file-upload__row.error) {
184+
.kbq-file-multiple__uploaded-item {
185+
&:has(.kbq-file-upload__row.kbq-error) {
188186
background-color: var(--kbq-background-error-less);
189187

190-
.file-item__text,
188+
.kbq-file-item__text,
191189
.kbq-file-upload__size {
192190
color: var(--kbq-foreground-error);
193191
}
@@ -203,7 +201,7 @@
203201
}
204202
}
205203

206-
.multiple__uploaded-item {
204+
.kbq-file-multiple__uploaded-item {
207205
.kbq-file-upload__file .kbq-icon.kbq-empty {
208206
color: var(--kbq-file-upload-multiple-default-left-icon-color);
209207
}
@@ -233,19 +231,19 @@
233231

234232
// @TODO: remove when redesign applied, use default font (#DS-3858)
235233
.kbq-single-file-upload {
236-
& .file-item__text-wrapper,
237-
& .dropzone__text {
234+
& .kbq-file-item__text-wrapper,
235+
& .kbq-file-dropzone__text {
238236
@include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
239237
}
240238
}
241239

242240
.kbq-multiple-file-upload {
243-
.multiple__header {
241+
.kbq-file-multiple__header {
244242
@include tokens.kbq-typography-level-to-styles-css-variables(typography, subheading);
245243
}
246244

247245
// @TODO: remove when redesign applied, use default font (#DS-3858)
248-
.multiple__caption {
246+
.kbq-file-multiple__caption {
249247
&,
250248
.kbq-link {
251249
@include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
@@ -258,7 +256,7 @@
258256
}
259257

260258
// @TODO: remove when redesign applied, use default font (#DS-3858)
261-
.multiple__uploaded-item {
259+
.kbq-file-multiple__uploaded-item {
262260
@include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
263261
}
264262

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,17 @@ describe('FileDropDirective', () => {
4646
});
4747

4848
it('FileDropDirective: dragover/dragleave', () => {
49-
expect(dndZone.classList.contains('dragover')).toBeFalsy();
49+
expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeFalsy();
5050

5151
dispatchFakeEvent(dndZone, 'dragover');
5252
fixture.detectChanges();
5353

54-
expect(dndZone.classList.contains('dragover')).toBeTruthy();
54+
expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeTruthy();
5555

5656
dispatchFakeEvent(dndZone, 'dragleave');
5757
fixture.detectChanges();
5858

59-
expect(dndZone.classList.contains('dragover')).toBeFalsy();
59+
expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeFalsy();
6060
});
6161

6262
it('FileDropDirective: drop with files', (done) => {
@@ -70,14 +70,14 @@ describe('FileDropDirective', () => {
7070
dispatchFakeEvent(dndZone, 'dragover');
7171
fixture.detectChanges();
7272

73-
expect(dndZone.classList.contains('dragover')).toBeTruthy();
73+
expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeTruthy();
7474

7575
dispatchEvent(dndZone, event);
7676
fixture.detectChanges();
7777

7878
setTimeout(() => {
7979
expect(component.onDrop).toHaveBeenCalledWith(expect.objectContaining({ length: fakeFiles.length }));
80-
expect(dndZone.classList.contains('dragover')).toBeFalsy();
80+
expect(dndZone.classList.contains('kbq-file-drop_dragover')).toBeFalsy();
8181
done();
8282
});
8383
});

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ const entryIsFile = (entry?: FileSystemEntry): entry is FileSystemFileEntry => !
99
selector: '[kbqFileDrop]',
1010
exportAs: 'kbqFileDrop',
1111
host: {
12-
'[class.dragover]': 'dragover',
12+
class: 'kbq-file-drop',
13+
'[class.kbq-file-drop_dragover]': 'dragover',
1314
'(dragover)': 'onDragOver($event)',
1415
'(dragleave)': 'onDragLeave($event)',
1516
'(drop)': 'onDrop($event)'

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,8 +87,7 @@
8787
--kbq-file-upload-multiple-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);
8888
}
8989

90-
/* stylelint-disable-next-line selector-class-pattern */
91-
:where(.kbq-file-upload.compact) {
90+
:where(.kbq-file-upload.kbq-file-upload_compact) {
9291
--kbq-file-upload-multiple-compact-container-content-gap-horizontal: var(--kbq-size-s);
9392
--kbq-file-upload-multiple-compact-text-block-padding-vertical: var(--kbq-size-3xs);
9493
--kbq-file-upload-multiple-compact-container-padding-vertical: 11px;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ import { KbqFileUploadModule } from './file-upload.module';
1111
import { KbqMultipleFileUploadComponent } from './multiple-file-upload.component';
1212
import { KbqSingleFileUploadComponent } from './single-file-upload.component';
1313

14-
const fileItemRowCssClass = 'multiple__uploaded-item';
14+
const fileItemRowCssClass = 'kbq-file-multiple__uploaded-item';
1515

16-
const fileItemCssClass = 'file-item';
16+
const fileItemCssClass = 'kbq-file-item';
1717

1818
const FILE_NAME = 'test.file';
1919

0 commit comments

Comments
 (0)