Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-06-20 09:35:22 +02:00
Code Issues Projects Releases Wiki Activity

[AC-1423] Add minWidth input to bit-progress component

Browse Source
This commit is contained in:
Shane Melton 2023-06-12 09:57:35 -07:00
parent a7f9984ddd
commit 95b2223a30
No known key found for this signature in database
3 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/src/progress/progress.component.html
View File

@ -5,7 +5,7 @@
aria-valuemin="0"
aria-valuemax="100"
attr.aria-valuenow="{{ barWidth }}"
[ngStyle]="{ width: barWidth + '%' }"
[ngStyle]="{ width: barWidthPercentage + '%' }"
>
<div
*ngIf="displayText"

5
libs/components/src/progress/progress.component.ts
View File

@ -26,11 +26,16 @@ export class ProgressComponent {
@Input() showText = true;
@Input() size: SizeTypes = "default";
@Input() text?: string;
@Input() minWidth = 0;
get displayText() {
return this.showText && this.size !== "small";
}
protected get barWidthPercentage() {
return this.barWidth > this.minWidth ? this.barWidth : this.minWidth;
}
get outerBarStyles() {
return ["tw-overflow-hidden", "tw-rounded", "tw-bg-secondary-100"].concat(
SizeClasses[this.size]

8
libs/components/src/progress/progress.stories.ts
View File

@ -15,6 +15,7 @@ export default {
showText: true,
size: "default",
bgColor: "primary",
minWidth: 0,
},
} as Meta;
@ -38,3 +39,10 @@ export const CustomText: Story = {
text: "Loading...",
},
};
export const MinWidth: Story = {
args: {
barWidth: 0,
minWidth: 5,
},
};