Skip to content

Making progress bar styleable with scss variables #359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: next
Choose a base branch
from
Open

Making progress bar styleable with scss variables #359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"sideEffects": true,
"dependencies": {},
"devDependencies": {
"@babel/helper-string-parser": "^7.19.4",
"@types/jest": "^27.4.0",
"@types/lodash.merge": "^4.6.6",
"@typescript-eslint/eslint-plugin": "^5.10.1",
Expand Down
12 changes: 10 additions & 2 deletions src/components/VtProgressBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,25 @@
<script lang="ts" setup>
import { computed, ref, watch, nextTick, onMounted, onBeforeUnmount } from "vue"

import { VT_NAMESPACE } from "../ts/constants"
import { TYPE, VT_NAMESPACE } from "../ts/constants"
import { TOAST_DEFAULTS } from "../ts/propValidators"
import { ToastOptionsAndContent } from "../types/toast"

import type { BaseToastOptions } from "../types/toast"

interface ProgressBarProps {
timeout?: BaseToastOptions["timeout"]
hideProgressBar?: BaseToastOptions["hideProgressBar"]
isRunning?: boolean
type?: ToastOptionsAndContent["type"]
}

const emit = defineEmits(["close-toast"])
const props = withDefaults(defineProps<ProgressBarProps>(), {
hideProgressBar: TOAST_DEFAULTS.hideProgressBar,
isRunning: false,
timeout: TOAST_DEFAULTS.timeout,
type: TYPE.DEFAULT,
})

const el = ref<HTMLElement>()
Expand All @@ -35,7 +38,12 @@ const style = computed(() => {
})

const cpClass = computed(() =>
hasClass.value ? `${VT_NAMESPACE}__progress-bar` : ""
hasClass.value
? [
`${VT_NAMESPACE}__progress-bar`,
`${VT_NAMESPACE}__progress-bar--${props.type}`,
]
: ""
)

watch(
Expand Down
1 change: 1 addition & 0 deletions src/components/VtToast.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
:is-running="isRunning"
:hide-progress-bar="hideProgressBar"
:timeout="timeout"
:type="props.type"
@close-toast="closeToast"
/>
</div>
Expand Down
22 changes: 21 additions & 1 deletion src/scss/_progressBar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,32 @@
width: 100%;
height: 5px;
z-index: ($vt-z-index + 1);
background-color: rgba(255, 255, 255, 0.7);
transform-origin: left;
animation: scale-x-frames linear 1 forwards;

.#{$vt-namespace}__toast--rtl & {
right: 0;
left: unset;
transform-origin: right;
}

&--default {
background-color: $vt-progress-bar-color-default;
}

&--info {
background-color: $vt-progress-bar-color-info;
}

&--success {
background-color: $vt-progress-bar-color-success;
}

&--error {
background-color: $vt-progress-bar-color-error;
}

&--warning {
background-color: $vt-progress-bar-color-warning;
}
}
5 changes: 5 additions & 0 deletions src/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,19 @@ $vt-toast-max-height: 800px !default;

$vt-color-default: #1976d2 !default;
$vt-text-color-default: #fff !default;
$vt-progress-bar-color-default: rgba(255, 255, 255, 0.7) !default;
$vt-color-info: #2196f3 !default;
$vt-text-color-info: #fff !default;
$vt-progress-bar-color-info: rgba(255, 255, 255, 0.7) !default;
$vt-color-success: #4caf50 !default;
$vt-text-color-success: #fff !default;
$vt-progress-bar-color-success: rgba(255, 255, 255, 0.7) !default;
$vt-color-warning: #ffc107 !default;
$vt-text-color-warning: #fff !default;
$vt-progress-bar-color-warning: rgba(255, 255, 255, 0.7) !default;
$vt-color-error: #ff5252 !default;
$vt-text-color-error: #fff !default;
$vt-progress-bar-color-error: rgba(255, 255, 255, 0.7) !default;

$vt-color-progress-default: linear-gradient(
to right,
Expand Down
10 changes: 5 additions & 5 deletions tests/unit/components/__snapshots__/VtProgressBar.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,28 @@

exports[`VtProgressBar matches snapshot 1`] = `
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: paused; opacity: 1;"
/>
`;

exports[`VtProgressBar sets opacity to 0 from from hideProgressBar 1`] = `
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: paused; opacity: 0;"
/>
`;

exports[`VtProgressBar sets playstate from isRunning 1`] = `
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
`;

exports[`VtProgressBar sets style duration from timeout 1`] = `
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 1000ms; animation-play-state: paused; opacity: 1;"
/>
`;
Expand All @@ -37,7 +37,7 @@ exports[`VtProgressBar triggers class reset on timeout change 1`] = `

exports[`VtProgressBar triggers class reset on timeout change 2`] = `
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 1000ms; animation-play-state: paused; opacity: 1;"
/>
`;
18 changes: 9 additions & 9 deletions tests/unit/components/__snapshots__/VtToast.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ exports[`VtToast snapshots renders 1`] = `
×
</button>
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
</div>
Expand Down Expand Up @@ -65,7 +65,7 @@ exports[`VtToast ui closeButton = false removes it 1`] = `
</div>
<!--v-if-->
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
</div>
Expand Down Expand Up @@ -103,7 +103,7 @@ exports[`VtToast ui has all default sub components 1`] = `
×
</button>
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
</div>
Expand All @@ -129,7 +129,7 @@ exports[`VtToast ui icon = false removes it 1`] = `
×
</button>
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
</div>
Expand Down Expand Up @@ -167,7 +167,7 @@ exports[`VtToast ui renders custom aria role and button aria label 1`] = `
×
</button>
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
</div>
Expand Down Expand Up @@ -207,7 +207,7 @@ exports[`VtToast ui renders custom component 1`] = `
×
</button>
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
</div>
Expand Down Expand Up @@ -245,7 +245,7 @@ exports[`VtToast ui renders default aria role and button aria label 1`] = `
×
</button>
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
</div>
Expand Down Expand Up @@ -283,7 +283,7 @@ exports[`VtToast ui renders ltr by default 1`] = `
×
</button>
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
</div>
Expand Down Expand Up @@ -321,7 +321,7 @@ exports[`VtToast ui renders rtl if set 1`] = `
×
</button>
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
</div>
Expand Down
6 changes: 3 additions & 3 deletions tests/unit/components/__snapshots__/VtToastContainer.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ exports[`VtToastContainer snapshots with toasts 1`] = `
×
</button>
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--info"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
</div>
Expand Down Expand Up @@ -203,7 +203,7 @@ exports[`VtToastContainer snapshots with toasts 1`] = `
×
</button>
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--default"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
</div>
Expand Down Expand Up @@ -265,7 +265,7 @@ exports[`VtToastContainer snapshots with toasts 1`] = `
×
</button>
<div
class="Vue-Toastification__progress-bar"
class="Vue-Toastification__progress-bar Vue-Toastification__progress-bar--error"
style="animation-duration: 5000ms; animation-play-state: running; opacity: 1;"
/>
</div>
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,6 +263,11 @@
dependencies:
"@babel/types" "^7.16.7"

"@babel/helper-string-parser@^7.19.4":
version "7.19.4"
resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz#38d3acb654b4701a9b77fb0615a96f775c3a9e63"
integrity sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==

"@babel/helper-validator-identifier@^7.14.5", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7":
version "7.15.7"
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
Expand Down