feat(kit): round corners of progress can be toggled off in new versio…

…n of `ProgressBar` (#5912)
taiga-family · Nov 13, 2023 · 244f368 · 244f368
1 parent d2c5e86
commit 244f368
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 7 deletions.
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
@@ -0,0 +1,6 @@
+<progress
+    new
+    tuiProgressBar
+    [max]="100"
+    [value]="50"
+></progress>
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
@@ -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
@@ -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
@@ -81,6 +81,26 @@
             </ng-template>
             <tui-progress-bar-example-6></tui-progress-bar-example-6>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="customizable-corners"
+            heading="Customizable corners"
+            [content]="customizableCornersExample"
+            [description]="customizableCornersDescription"
+        >
+            <ng-template #customizableCornersDescription>
+                You can toggle off round corners of the progress bar by setting
+                <code>border-radius: 0</code>
+                .
+                <tui-notification
+                    status="warning"
+                    class="tui-space_top-1"
+                >
+                    This customization properly works only for "new"-mode.
+                </tui-notification>
+            </ng-template>
+            <tui-progress-bar-example-7></tui-progress-bar-example-7>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

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