Conversation
… feature/alert
… feature/alert
There was a problem hiding this comment.
In linea generale, questo file, non dovrebbe essere toccato.
Non è un problema, però: correggerò - io - durante il merge.
Byloth
left a comment
Byloth
left a comment
There was a problem hiding this comment.
Prova a correggere questi errori. 😉
src/assets/scss/_variables.scss
Outdated
|
|
||
| $primary-color-input-light:#fff; | ||
| $primary-color-input-dark:#262525; | ||
| $font-family: string.unquote("Baloo 2, Roboto, Helvetica, Arial, sans-serif"); |
There was a problem hiding this comment.
Siamo sicuri che queste righe vengano usate?
src/assets/scss/_variables.scss
Outdated
| */ | ||
|
|
||
| $ease-duration: 333ms; | ||
| $ease-duration-dark-theme-input: 222ms; |
There was a problem hiding this comment.
Questa va tolta; useremo sia per il tema light che per il tema dark la stessa durata.
src/assets/scss/main.scss
Outdated
| --clay-input-primary-color-light : #{variables.$primary-color-input-light}; | ||
| --clay-input-primary-color-dark : #{variables.$primary-color-input-dark}; | ||
| --clay-ease-duration: #{variables.$ease-duration}; | ||
| --clay-ease-duration-dark-theme-input: #{variables.$ease-duration-dark-theme-input}; |
src/components/ClayAlert.stories.ts
Outdated
| template: ` | ||
| <ClayAlert | ||
| :type="args.type" | ||
| :class="'clay-alert--' + args.size" |
There was a problem hiding this comment.
Di questo ne abbiamo già parlato.
Le classi si gestiscono dentro al componente; non fuori.
Prendi spunto da cos'è già stato fatto negli altri componenti.
src/components/ClayAlert.stories.ts
Outdated
| padding: 2rem 4rem;"> | ||
| <ClayAlert | ||
| :type="args.type" | ||
| :variant="args.variant" |
There was a problem hiding this comment.
La gestione di questa variante non va bene.
Guarda com'è stata gestita nel componente ClayCard.
src/components/ClayAlert.stories.ts
Outdated
|
|
||
| export const Glass: StoryObj<StoryArgs> = { | ||
| args: { | ||
| // @ts-expect-error: variant is not in StoryArgs but usato nel template |
There was a problem hiding this comment.
Se qualcosa dev'essere usato, allora dev'essere definito anche in StoryArgs.
Se è una proprietà che può esistere in maniera opzionale e può essere omessa, usa il ?:
interface StoryArgs
{
size: "small" | "default" | "large";
glass?: boolean;
}
src/components/ClayAlert.vue
Outdated
| @@ -0,0 +1,406 @@ | |||
| <template> | |||
| <ClayCard v-if="visible" | |||
| :class="['clay-alert', { 'clay-card--glass': props.variant === 'glass' }]" | |||
There was a problem hiding this comment.
Ci può stare, la classe definita in linea...
Non mi fa impazzire come sintassi ma è corretta.
Però rimaniamo coerenti a tutti gli altri componenti: usiamo il computed.
5 participants
No description provided.