Merge branch 'main' of https:/zyfra/Prizm into feat/stepp…

…er-v3-colors
zyfra · Dec 12, 2023 · 469671f · 469671f
2 parents 5eb3155 + 4741a80
commit 469671f
Show file tree

Hide file tree

Showing 76 changed files with 491 additions and 523 deletions.
diff --git a/.github/workflows/pr-ng14.yml b/.github/workflows/pr-ng14.yml
@@ -15,7 +15,7 @@ jobs:
 
  - uses: actions/setup-node@v3
  with:
- node-version: '16.x'
+ node-version: '18.x'
  registry-url: 'https://registry.npmjs.org'
 
  - name: Derive appropriate SHAs for base and head for `nx affected` commands

diff --git a/.github/workflows/pr-ng15.yml b/.github/workflows/pr-ng15.yml
@@ -15,7 +15,7 @@ jobs:
 
  - uses: actions/setup-node@v3
  with:
- node-version: '16.x'
+ node-version: '18.x'
  registry-url: 'https://registry.npmjs.org'
 
  - name: Derive appropriate SHAs for base and head for `nx affected` commands

diff --git a/.github/workflows/pr-ng16.yml b/.github/workflows/pr-ng16.yml
@@ -15,7 +15,7 @@ jobs:
 
  - uses: actions/setup-node@v3
  with:
- node-version: '16.x'
+ node-version: '18.x'
  registry-url: 'https://registry.npmjs.org'
 
  - name: Derive appropriate SHAs for base and head for `nx affected` commands

diff --git a/...nents/table/examples/table-editable-col-example/table-editable-col-example.component.html b/...nents/table/examples/table-editable-col-example/table-editable-col-example.component.html
@@ -24,7 +24,7 @@
  prizmTr
  >
  <td class="format__number" *prizmCell="'code'" prizmTd>{{ item.code | spaceNumber : '0.0-0' }}</td>
- <td class="row_editable" *prizmCell="'name'" prizmTd>
+ <td class="row_editable" *prizmCell="'name'" [status]="item.status ?? 'default'" prizmTd>
  <input
  [value]="item.name"
  [readOnly]="!(currentEditableProduct?.product === item && currentEditableProduct?.key === 'name')"

diff --git a/...nents/table/examples/table-editable-col-example/table-editable-col-example.component.less b/...nents/table/examples/table-editable-col-example/table-editable-col-example.component.less
@@ -15,12 +15,8 @@
 
  .row {
  &_editable {
- padding: 0;
-
  &:hover,
  .edit-cell:focus {
- box-shadow: 0 0 0 1px var(--prizm-index-plan) inset;
-
  position: relative;
  z-index: 10;
  }

diff --git a/...nents/table/examples/table-editable-row-example/table-editable-row-example.component.less b/...nents/table/examples/table-editable-row-example/table-editable-row-example.component.less
@@ -46,8 +46,6 @@
 
  &_edit {
  td {
- border: 1px solid var(--prizm-index-plan);
-
  position: relative;
  z-index: 10;
 

diff --git a/...rc/app/components/table/examples/table-search-example/table-search-example.component.html b/...rc/app/components/table/examples/table-search-example/table-search-example.component.html
@@ -15,6 +15,11 @@
  <tr *ngIf="control.value" prizmThGroup>
  <th class="extra-border search-cell" [resizable]="true" prizmTh>
  <input #input (enter)="search($event, 'name')" prizmInput placeholder="Поиск" />
+ <button
+ [interactive]="true"
+ (click)="input.value = ''; search('', 'name')"
+ prizmInputIconButton="cancel-delete-content"
+ ></button>
  <button
  [interactive]="true"
  (click)="search(input.value, 'name')"

diff --git a/...rc/app/components/table/examples/table-search-example/table-search-example.component.less b/...rc/app/components/table/examples/table-search-example/table-search-example.component.less
@@ -17,6 +17,10 @@
  input {
  padding: 8px;
  }
+
+ button {
+ margin-right: 8px;
+ }
  }
 
  .format {

diff --git a/...pp/components/table/examples/table-track-by-example/table-track-by-example.component.html b/...pp/components/table/examples/table-track-by-example/table-track-by-example.component.html
@@ -6,7 +6,7 @@
  <th prizmTh>Наименование</th>
  <th prizmTh>Категория</th>
  <th prizmTh>Количество</th>
- <th></th>
+ <th prizmTh></th>
  </tr>
  </thead>
 
@@ -33,7 +33,7 @@
  <td prizmTd>
  {{ item.count }}
  </td>
- <td>{{ item.active }}</td>
+ <td prizmTd>{{ item.active }}</td>
  </tr>
  </ng-container>
  </tbody>

diff --git a/apps/doc/src/app/components/table/table-example.component.html b/apps/doc/src/app/components/table/table-example.component.html
@@ -112,6 +112,7 @@
  [style.--prizm-table-row-hover-background]="prizmTableRowHoverBackground"
  [style.--prizm-table-row-background]="prizmTableRowBackground"
  [style.--prizm-table-row-cursor]="prizmTableRowCursor"
+ [style.--prizm-table-active-row-marker-color]="prizmTableActiveRowMarkerColor"
  [columns]="columns"
  [size]="size"
  [tableBorderStyle]="borderStyle"
@@ -128,7 +129,7 @@
 
  <tbody [data]="products" [open]="open" prizmTbody>
  <ng-container *prizmRow="let item of products; let i = index">
- <tr prizmTr>
+ <tr [active]="i === 2" prizmTr>
  <td class="format__number" *prizmCell="'code'" prizmTd>
  {{ item.code | spaceNumber : '0.0-0' }}
  </td>
@@ -184,6 +185,14 @@
  >
  Row cursor
  </ng-template>
+ <ng-template
+ [(documentationPropertyValue)]="prizmTableActiveRowMarkerColor"
+ documentationPropertyName="prizm-table-active-row-marker-color"
+ documentationPropertyType="string"
+ documentationPropertyMode="css-var"
+ >
+ Active row marker background color
+ </ng-template>
  </prizm-doc-documentation>
  <prizm-doc-documentation [hasTestId]="false" heading="PrizmTbodyComponent">
  <ng-template

diff --git a/apps/doc/src/app/components/table/table-example.component.ts b/apps/doc/src/app/components/table/table-example.component.ts
@@ -16,6 +16,7 @@ export class TableExampleComponent {
  public prizmTableRowBackground: string | null = null;
  public prizmTableRowCursor = 'pointer';
  public prizmTableRowHoverBackground: string | null = null;
+ public prizmTableActiveRowMarkerColor: string | null = null;
  public columns: string[] = ['code', 'name', 'category', 'count'];
  public columnsVarians: string[][] = [
  ['code', 'name'],

diff --git a/...rk/internationalization/examples/language-switcher/language-switcher-example.component.ts b/...rk/internationalization/examples/language-switcher/language-switcher-example.component.ts
@@ -33,6 +33,9 @@ import { PrizmFileValidationErrors, PrizmFilesProgress } from '@prizm-ui/compone
 })
 export class PrizmLanguageSwitcherExampleComponent {
  toastService: any;
+
+ progress$$ = new BehaviorSubject<PrizmFilesProgress>({});
+ files: Array<File> = [];
  constructor(
  @Self()
  private readonly prizmLanguageSwitcher: PrizmLanguageSwitcher,
@@ -43,9 +46,6 @@ export class PrizmLanguageSwitcherExampleComponent {
  this.prizmLanguageSwitcher.setLanguage(lang as PrizmLanguageName);
  }
 
- progress$$ = new BehaviorSubject<PrizmFilesProgress>({});
- files: Array<File> = [];
-
  public onFilesChange(files: Array<File>): void {
  this.files = files;
  if (this.files.length > 0) {

diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.html b/libs/components/src/lib/components/calendar-month/calendar-month.component.html
@@ -17,9 +17,9 @@
  prizmStopPropagation="mousedown"
  >
  <button
+ class="year-btn"
  [prizmFocusable]="false"
  (click)="onYearClick()"
- prizmLink
  automation-id="prizm-calendar-month__active-year"
  >
  {{ year.formattedYear }}

diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.less b/libs/components/src/lib/components/calendar-month/calendar-month.component.less
@@ -8,6 +8,10 @@
  width: 15.75rem;
  padding: 1.125rem;
  box-sizing: content-box;
+
+ .year-btn {
+ .pagination-btn();
+ }
 }
 
 .z-row {
@@ -23,10 +27,10 @@
  }
 
  &:not([data-range='start']):not([data-range='single']):not([data-range='end']):hover {
- background-color: var(--prizm-g2-g11);
+ background-color: var(--prizm-v3-button-ghost-hover);
 
  .z-item {
- color: var(--prizm-index-plan) !important;
+ color: var(--prizm-v3-button-primary-solid-hover) !important;
  }
  }
 }

diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.component.ts b/libs/components/src/lib/components/calendar-month/calendar-month.component.ts
@@ -33,7 +33,6 @@ import {
 } from '../../directives';
 import { PrizmPrimitiveSpinButtonModule, PrizmPrimitiveYearPickerModule } from '../internal';
 import { PrizmScrollbarModule } from '../scrollbar';
-import { PrizmLinkModule } from '../link';
 import { PrizmLetModule } from '@prizm-ui/helpers';
 
 const TODAY = PrizmDay.currentLocal();
@@ -49,7 +48,6 @@ const TODAY = PrizmDay.currentLocal();
  PrizmPrimitiveYearPickerModule,
  PrizmPrimitiveSpinButtonModule,
  PrizmScrollbarModule,
- PrizmLinkModule,
  PrizmLetModule,
  PrizmHoveredModule,
  PrizmPressedModule,

diff --git a/libs/components/src/lib/components/calendar-month/calendar-month.module.ts b/libs/components/src/lib/components/calendar-month/calendar-month.module.ts
@@ -1,15 +1,5 @@
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { PrizmLetModule } from '@prizm-ui/helpers';
-import { PrizmFocusableModule } from '../../directives/focusable/focusable.module';
-import { PrizmHoveredModule } from '../../directives/hovered/hovered.module';
-import { PrizmPressedModule } from '../../directives/pressed/pressed.module';
-import { PrizmPrimitiveSpinButtonModule } from '../internal/primitive-spin-button/primitive-spin-button.module';
-import { PrizmPrimitiveYearPickerModule } from '../internal/primitive-year-picker/primitive-year-picker.module';
-import { PrizmLinkModule } from '../link/link.module';
-import { PrizmScrollbarModule } from '../scrollbar/scrollbar.module';
 import { PrizmCalendarMonthComponent } from './calendar-month.component';
-import { PrizmStopPropagationModule } from '../../directives/stop-propagation/stop-propagation.module';
 
 /**
  * @deprecated

diff --git a/libs/components/src/lib/components/calendar-range/calendar-range.component.html b/libs/components/src/lib/components/calendar-range/calendar-range.component.html
@@ -42,7 +42,7 @@
  <prizm-data-list
  class="z-menu"
  [style.--prizm-data-list-border]="0"
- [style.--prizm-data-list-border-left]="'1px solid var(--prizm-border-widget)'"
+ [style.--prizm-data-list-border-left]="'1px solid var(--prizm-v3-background-stroke)'"
  role="menu"
  automation-id="prizm-calendar-range__menu"
  >

diff --git a/libs/components/src/lib/components/calendar-range/calendar-range.component.less b/libs/components/src/lib/components/calendar-range/calendar-range.component.less
@@ -10,7 +10,7 @@
 
 .z-menu {
  width: 11rem;
- border-left: 1px solid var(--prizm-base-03);
+ border-left: 1px solid var(--prizm-v3-background-stroke);
 }
 
 .z-checkmark {

diff --git a/libs/components/src/lib/components/chips/chips.component.less b/libs/components/src/lib/components/chips/chips.component.less
@@ -4,7 +4,7 @@
 
  .chips-list {
  width: 100%;
- padding: 0 12px 12px 8px;
+ padding: 0 12px 12px 0px;
 
  display: flex;
  flex-wrap: wrap;
@@ -30,7 +30,6 @@
  &.hidden {
  height: 20px;
  padding-top: 1px;
- overflow: hidden;
  width: 100%;
  }
  }

diff --git a/libs/components/src/lib/components/column-settings/column-settings.component.html b/libs/components/src/lib/components/column-settings/column-settings.component.html
@@ -39,9 +39,9 @@
  <div class="section">
  <div class="section-header">
  <div class="title prizm-font-title-h4">{{ translations | prizmPluck : ['mainColumns'] }}</div>
- <button (click)="showAll()" prizmButton appearanceType="ghost" appearance="secondary" size="m">
+ <div class="show-all" (click)="showAll()">
  {{ translations | prizmPluck : ['showAllBtn'] }}
- </button>
+ </div>
  </div>
  <prizm-column-drop-list
  #columnList="cdkDropList"

diff --git a/libs/components/src/lib/components/column-settings/column-settings.component.less b/libs/components/src/lib/components/column-settings/column-settings.component.less
@@ -2,18 +2,18 @@
 
 .container {
  width: 360px;
- color: var(--prizm-text-contrast);
+ color: var(--prizm-v3-text-icon-secondary);
 
  .header {
- border-bottom: 1px solid var(--prizm-border-widget);
- padding: var(--prizm-column-settings-header-padding, 14px 16px);
+ border-bottom: 1px solid var(--prizm-v3-background-stroke);
+ padding: var(--prizm-column-settings-header-padding, 16px);
  display: flex;
  justify-content: space-between;
 
  font-style: var(--prizm-column-settings-header-font-style, normal);
  font-weight: var(--prizm-column-settings-header-font-weight, 600);
  font-size: var(--prizm-column-settings-header-font-size, var(--prizm-dialog-font-size, 14px));
- color: var(--prizm-column-settings-header-text, var(--prizm-text-contrast));
+ color: var(--prizm-column-settings-header-text, var(--prizm-v3-text-icon-primary));
  }
 
  .title {
@@ -23,29 +23,32 @@
  align-items: center;
  }
  .section {
- border-bottom: 1px solid var(--prizm-border-widget);
+ border-bottom: 1px solid var(--prizm-v3-background-stroke);
 
  &-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
- padding: var(--prizm-column-settings-header-padding, 14px 16px);
+ padding: var(--prizm-column-settings-header-padding, 0px 16px);
+ margin-top: 16px;
+ color: var(--prizm-v3-text-icon-primary);
  }
 
  &-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
- padding: 14px 16px;
+ padding: 0px 16px 16px 16px;
+ margin-top: 16px;
  }
  }
 
  .footer {
- border-top: 1px solid var(--prizm-border-widget);
+ border-top: 1px solid var(--prizm-v3-background-stroke);
  padding: var(--prizm-column-settings-footer-padding, 14px 16px);
  max-width: 100%;
- color: var(--prizm-column-settings-footer-text, var(--prizm-text-main));
+ color: var(--prizm-column-settings-footer-text, var(--prizm-v3-text-icon-primary));
 
  .buttons {
  display: flex;
@@ -56,4 +59,15 @@
  }
  }
  }
+
+ .show-all {
+ cursor: pointer;
+ font-size: 12px;
+ font-weight: 600;
+ color: var(--prizm-v3-button-secondary-solid-default);
+
+ &:hover {
+ color: var(--prizm-v3-button-secondary-solid-hover);
+ }
+ }
 }
diff --git a/libs/components/src/lib/components/column-settings/column-settings.component.ts b/libs/components/src/lib/components/column-settings/column-settings.component.ts
@@ -23,13 +23,13 @@ import { PRIZM_COLUMN_SETTINGS } from '../../tokens';
 import { prizmI18nInitWithKey } from '../../services';
 import cloneDeep from 'lodash-es/cloneDeep';
 import { CommonModule } from '@angular/common';
-import { PrizmCardComponent, PrizmCardModule } from '../card';
-import { PrizmButtonComponent, PrizmButtonModule } from '../button';
-import { PrizmToggleComponent, PrizmToggleModule } from '../toggle';
-import { PrizmIconComponent, PrizmIconModule } from '../icon';
-import { PrizmScrollbarComponent, PrizmScrollbarModule } from '../scrollbar';
-import { PrizmLetDirective, PrizmLetModule, PrizmPluckPipe, PrizmPluckPipeModule } from '@prizm-ui/helpers';
-import { PrizmHintDirective, PrizmHintModule } from '../../directives';
+import { PrizmCardComponent } from '../card';
+import { PrizmButtonComponent } from '../button';
+import { PrizmToggleComponent } from '../toggle';
+import { PrizmIconComponent } from '../icon';
+import { PrizmScrollbarComponent } from '../scrollbar';
+import { PrizmLetDirective, PrizmPluckPipe } from '@prizm-ui/helpers';
+import { PrizmHintDirective } from '../../directives';
 import { FormsModule } from '@angular/forms';
 import { PrizmThemeModule } from '@prizm-ui/theme';
 import { PrizmColumnIconPipe } from './pipes/column-icon.pipe';