From 244f3687e1f0b70dd8de077d29a01b8a87449bc8 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Mon, 13 Nov 2023 15:44:53 +0300 Subject: [PATCH] feat(kit): round corners of progress can be toggled off in new version of `ProgressBar` (#5912) --- .../progress-bar/examples/7/index.html | 6 ++++++ .../progress-bar/examples/7/index.less | 8 +++++++ .../progress-bar/examples/7/index.ts | 12 +++++++++++ .../progress-bar/progress-bar.component.html | 20 ++++++++++++++++++ .../progress-bar/progress-bar.component.ts | 6 ++++++ .../progress-bar/progress-bar.module.ts | 2 ++ .../progress-bar/progress-bar.component.less | 21 ++++++++++++------- 7 files changed, 68 insertions(+), 7 deletions(-) create mode 100644 projects/demo/src/modules/components/progress-bar/examples/7/index.html create mode 100644 projects/demo/src/modules/components/progress-bar/examples/7/index.less create mode 100644 projects/demo/src/modules/components/progress-bar/examples/7/index.ts diff --git a/projects/demo/src/modules/components/progress-bar/examples/7/index.html b/projects/demo/src/modules/components/progress-bar/examples/7/index.html new file mode 100644 index 000000000000..44659bbe5365 --- /dev/null +++ b/projects/demo/src/modules/components/progress-bar/examples/7/index.html @@ -0,0 +1,6 @@ + diff --git a/projects/demo/src/modules/components/progress-bar/examples/7/index.less b/projects/demo/src/modules/components/progress-bar/examples/7/index.less new file mode 100644 index 000000000000..edba70be234a --- /dev/null +++ b/projects/demo/src/modules/components/progress-bar/examples/7/index.less @@ -0,0 +1,8 @@ +/* +This duplication is artificial way to increase selector specificity. +In Taiga UI 4.0 you can delete it. +TODO: remove in v4.0 + */ +[tuiProgressBar][tuiProgressBar] { + border-radius: 0; +} diff --git a/projects/demo/src/modules/components/progress-bar/examples/7/index.ts b/projects/demo/src/modules/components/progress-bar/examples/7/index.ts new file mode 100644 index 000000000000..5038b2dd8819 --- /dev/null +++ b/projects/demo/src/modules/components/progress-bar/examples/7/index.ts @@ -0,0 +1,12 @@ +import {Component} from '@angular/core'; +import {changeDetection} from '@demo/emulate/change-detection'; +import {encapsulation} from '@demo/emulate/encapsulation'; + +@Component({ + selector: 'tui-progress-bar-example-7', + templateUrl: './index.html', + styleUrls: ['./index.less'], + encapsulation, + changeDetection, +}) +export class TuiProgressBarExample7 {} diff --git a/projects/demo/src/modules/components/progress-bar/progress-bar.component.html b/projects/demo/src/modules/components/progress-bar/progress-bar.component.html index 3ff0d67518d7..853149a21457 100644 --- a/projects/demo/src/modules/components/progress-bar/progress-bar.component.html +++ b/projects/demo/src/modules/components/progress-bar/progress-bar.component.html @@ -81,6 +81,26 @@ + + + + You can toggle off round corners of the progress bar by setting + border-radius: 0 + . + + This customization properly works only for "new"-mode. + + + + diff --git a/projects/demo/src/modules/components/progress-bar/progress-bar.component.ts b/projects/demo/src/modules/components/progress-bar/progress-bar.component.ts index 7b5b6b3a6aba..bbca79161848 100644 --- a/projects/demo/src/modules/components/progress-bar/progress-bar.component.ts +++ b/projects/demo/src/modules/components/progress-bar/progress-bar.component.ts @@ -68,6 +68,12 @@ export class ExampleProgressBarComponent { TypeScript: import('./examples/6/index.ts?raw'), }; + readonly customizableCornersExample: TuiDocExample = { + HTML: import('./examples/7/index.html?raw'), + LESS: import('./examples/7/index.less?raw'), + TypeScript: import('./examples/7/index.ts?raw'), + }; + readonly exampleModule = import('./examples/import/import-module.md?raw'); readonly exampleHtml = import('./examples/import/insert-template.md?raw'); } diff --git a/projects/demo/src/modules/components/progress-bar/progress-bar.module.ts b/projects/demo/src/modules/components/progress-bar/progress-bar.module.ts index f7e259a24318..96358c4fd249 100644 --- a/projects/demo/src/modules/components/progress-bar/progress-bar.module.ts +++ b/projects/demo/src/modules/components/progress-bar/progress-bar.module.ts @@ -15,6 +15,7 @@ import {TuiProgressBarExample3} from './examples/3'; import {TuiProgressBarExample4} from './examples/4'; import {TuiProgressBarExample5} from './examples/5'; import {TuiProgressBarExample6} from './examples/6'; +import {TuiProgressBarExample7} from './examples/7'; import {ExampleProgressBarComponent} from './progress-bar.component'; @NgModule({ @@ -35,6 +36,7 @@ import {ExampleProgressBarComponent} from './progress-bar.component'; TuiProgressBarExample4, TuiProgressBarExample5, TuiProgressBarExample6, + TuiProgressBarExample7, ], exports: [ExampleProgressBarComponent], }) diff --git a/projects/kit/components/progress/progress-bar/progress-bar.component.less b/projects/kit/components/progress/progress-bar/progress-bar.component.less index 75583f844182..9432d199f5e7 100644 --- a/projects/kit/components/progress/progress-bar/progress-bar.component.less +++ b/projects/kit/components/progress/progress-bar/progress-bar.component.less @@ -47,7 +47,7 @@ height: var(--t-height); color: var(--tui-primary); background: @track-color; - border-radius: var(--tui-radius-xs); + clip-path: inset(0 round var(--tui-radius-xs)); overflow: hidden; &[data-mode='onDark'] { @@ -64,13 +64,15 @@ --t-height: 0.5rem; } - // TODO: drop new attribute in v4.0 + // TODO: drop new attribute in v4.0 and make all these styles as default ones &[new] { - &[data-size='xs'], - &[data-size='s'], - &[data-size='m'] { - .progressValue({ border-radius: var(--tui-radius-xs) }); - } + /* stylelint-disable meowtec/no-px */ + clip-path: inset( + 0 0.5px round var(--tui-radius-m) + ); // 0.5px is a hack to prevent jagged edges on low dpi screens + /* stylelint-enable meowtec/no-px */ + border-radius: 1rem; + .progressValue({ border-radius: inherit }); &[data-size='xs'] { --t-height: 0.25rem; @@ -104,8 +106,13 @@ animation: tuiIndeterminateAnimation 3s infinite ease-in-out; } + &::-webkit-progress-inner-element { + border-radius: inherit; + } + &::-webkit-progress-bar { background: transparent; + border-radius: inherit; } }