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;
}
}