diff --git a/CHANGELOG.md b/CHANGELOG.md index 3391c70..6b6191a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ Liste des évolutions de la librairie Malio layer UI * [#MUI-14] Création d'un composant bouton icône * [#MUI-11] Création d'un composant navigation par onglets * [#MUI-20] Création d'un composant sidebar +* [#MUI-23] Revoir la config couleur tailwind ### Changed diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css index 8895355..6aa38c7 100644 --- a/app/assets/css/malio.css +++ b/app/assets/css/malio.css @@ -12,7 +12,7 @@ --m-muted: 100 116 139; /* #64748B */ --m-border: 203 213 225; /* #CBD5E1 */ --m-disabled: 204 204 223; /* #CCCCDF - Partagé entre toutes les familles bouton */ - --m-error: 155 17 30; /* #9B111E */ + --m-danger: 242 105 107; /* #F2696B - Erreurs et boutons danger */ --m-success: 15 149 70; /* #0F9546 */ /* ── Boutons Primary ── */ diff --git a/app/components/malio/checkbox/Checkbox.test.ts b/app/components/malio/checkbox/Checkbox.test.ts index 6fccf55..9915c01 100644 --- a/app/components/malio/checkbox/Checkbox.test.ts +++ b/app/components/malio/checkbox/Checkbox.test.ts @@ -114,7 +114,7 @@ describe('MalioCheckbox', () => { }) expect(wrapper.get('input').attributes('aria-invalid')).toBe('true') - expect(wrapper.get('label').classes()).toContain('text-m-error') + expect(wrapper.get('label').classes()).toContain('text-m-danger') expect(wrapper.get('p').text()).toBe('You must accept') }) @@ -125,7 +125,7 @@ describe('MalioCheckbox', () => { }) expect(wrapper.get('p').text()).toBe('Invalid') - expect(wrapper.get('p').classes()).toContain('text-m-error') + expect(wrapper.get('p').classes()).toContain('text-m-danger') }) it('shows success styles and message when there is no error', () => { diff --git a/app/components/malio/input/Input.test.ts b/app/components/malio/input/Input.test.ts index aea71f9..8accb92 100644 --- a/app/components/malio/input/Input.test.ts +++ b/app/components/malio/input/Input.test.ts @@ -161,19 +161,19 @@ describe('MalioInputText', () => { it('shows error message without label and icon', () => { const wrapper = mountInput({error: 'Error message test'}) - expect(wrapper.get('p.text-m-error').text()).toBe('Error message test') - expect(wrapper.get('input').classes()).toContain('border-m-error') + expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test') + expect(wrapper.get('input').classes()).toContain('border-m-danger') expect(wrapper.get('input').attributes('aria-invalid')).toBe('true') - expect(wrapper.get('p').classes()).toContain('text-m-error') + expect(wrapper.get('p').classes()).toContain('text-m-danger') }) it('shows error message with label and without icon', () => { const wrapper = mountInput({error: 'Error message test', label: 'Error message'}) - expect(wrapper.get('p.text-m-error').text()).toBe('Error message test') - expect(wrapper.get('input').classes()).toContain('border-m-error') - expect(wrapper.get('label').classes()).toContain('text-m-error') - expect(wrapper.get('p').classes()).toContain('text-m-error') + expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test') + expect(wrapper.get('input').classes()).toContain('border-m-danger') + expect(wrapper.get('label').classes()).toContain('text-m-danger') + expect(wrapper.get('p').classes()).toContain('text-m-danger') }) it('shows error message with label and icon', () => { @@ -183,19 +183,19 @@ describe('MalioInputText', () => { iconName: 'mdi:key-outline', }) - expect(wrapper.get('p.text-m-error').text()).toBe('Error message test') - expect(wrapper.get('input').classes()).toContain('border-m-error') - expect(wrapper.get('label').classes()).toContain('text-m-error') - expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error') - expect(wrapper.get('p').classes()).toContain('text-m-error') + expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test') + expect(wrapper.get('input').classes()).toContain('border-m-danger') + expect(wrapper.get('label').classes()).toContain('text-m-danger') + expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger') + expect(wrapper.get('p').classes()).toContain('text-m-danger') }) it('shows error message with icon and without label', () => { const wrapper = mountInput({error: 'Error message test', iconName: 'mdi:key-outline'}) - expect(wrapper.get('p.text-m-error').text()).toBe('Error message test') - expect(wrapper.get('input').classes()).toContain('border-m-error') - expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error') + expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test') + expect(wrapper.get('input').classes()).toContain('border-m-danger') + expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger') }) it('shows success message without label and icon', () => { @@ -240,10 +240,10 @@ describe('MalioInputText', () => { success: 'Success message test', }) - expect(wrapper.find('p.text-m-error').exists()).toBe(true) - expect(wrapper.get('p.text-m-error').text()).toBe('Error message test') + expect(wrapper.find('p.text-m-danger').exists()).toBe(true) + expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test') expect(wrapper.find('p.text-m-success').exists()).toBe(false) - expect(wrapper.get('input').classes()).toContain('border-m-error') + expect(wrapper.get('input').classes()).toContain('border-m-danger') expect(wrapper.get('input').classes()).not.toContain('border-m-success') }) diff --git a/app/components/malio/input/InputAmount.test.ts b/app/components/malio/input/InputAmount.test.ts index afaa4ee..6a57f54 100644 --- a/app/components/malio/input/InputAmount.test.ts +++ b/app/components/malio/input/InputAmount.test.ts @@ -87,7 +87,7 @@ describe('MalioInputAmount', () => { expect(wrapper.get('input').attributes('aria-invalid')).toBe('true') expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`) - expect(wrapper.get('p.text-m-error').text()).toBe('Montant invalide') + expect(wrapper.get('p.text-m-danger').text()).toBe('Montant invalide') }) it('keeps dots as the decimal separator on input', async () => { diff --git a/app/components/malio/input/InputPassword.test.ts b/app/components/malio/input/InputPassword.test.ts index e8f98fa..48eed58 100644 --- a/app/components/malio/input/InputPassword.test.ts +++ b/app/components/malio/input/InputPassword.test.ts @@ -126,15 +126,15 @@ describe('MalioInputPassword', () => { it('shows error message and styles', () => { const wrapper = mountComponent({error: 'Mot de passe requis'}) - expect(wrapper.get('p.text-m-error').text()).toBe('Mot de passe requis') - expect(wrapper.get('input').classes()).toContain('border-m-error') + expect(wrapper.get('p.text-m-danger').text()).toBe('Mot de passe requis') + expect(wrapper.get('input').classes()).toContain('border-m-danger') expect(wrapper.get('input').attributes('aria-invalid')).toBe('true') }) it('shows error style on icon', () => { const wrapper = mountComponent({error: 'Error'}) - expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error') + expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger') }) it('shows success message and styles', () => { diff --git a/app/components/malio/input/InputText.vue b/app/components/malio/input/InputText.vue index 132aa82..b514638 100644 --- a/app/components/malio/input/InputText.vue +++ b/app/components/malio/input/InputText.vue @@ -40,7 +40,7 @@ data-test="icon" :class="[ hasError - ? 'text-m-error' + ? 'text-m-danger' : hasSuccess ? 'text-m-success' : iconColor, iconPositionClass, @@ -53,7 +53,7 @@ :id="`${inputId}-describedby`" :class="[ hasError - ? 'text-m-error' + ? 'text-m-danger' : hasSuccess ? 'text-m-success' : 'text-m-muted', @@ -148,7 +148,7 @@ const mergedInputClass = computed(() => isFilled.value ? 'border-black' : 'border-m-muted', disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text', hasError.value - ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error' + ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger' : hasSuccess.value ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success' : 'focus:border-m-primary', @@ -164,7 +164,7 @@ const mergedLabelClass = computed(() => shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '', disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '', hasError.value - ? 'text-m-error' + ? 'text-m-danger' : hasSuccess.value ? 'text-m-success' : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary', diff --git a/app/components/malio/input/InputTextArea.test.ts b/app/components/malio/input/InputTextArea.test.ts index 5398e6c..e5819fd 100644 --- a/app/components/malio/input/InputTextArea.test.ts +++ b/app/components/malio/input/InputTextArea.test.ts @@ -118,9 +118,9 @@ describe('MalioInputTextArea', () => { }, }) - expect(wrapper.get('textarea').classes()).toContain('border-m-error') - expect(wrapper.get('label').classes()).toContain('text-m-error') - expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error') + expect(wrapper.get('textarea').classes()).toContain('border-m-danger') + expect(wrapper.get('label').classes()).toContain('text-m-danger') + expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error') expect(wrapper.get('textarea').attributes('aria-invalid')).toBe('true') }) @@ -145,8 +145,8 @@ describe('MalioInputTextArea', () => { }, }) - expect(wrapper.get('textarea').classes()).toContain('border-m-error') + expect(wrapper.get('textarea').classes()).toContain('border-m-danger') expect(wrapper.find('p.text-m-success').exists()).toBe(false) - expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error') + expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error') }) }) diff --git a/app/components/malio/input/InputUpload.test.ts b/app/components/malio/input/InputUpload.test.ts index b253531..fbd7c27 100644 --- a/app/components/malio/input/InputUpload.test.ts +++ b/app/components/malio/input/InputUpload.test.ts @@ -115,15 +115,15 @@ describe('MalioInputUpload', () => { it('shows error message and styles', () => { const wrapper = mountComponent({error: 'Fichier requis'}) - expect(wrapper.get('p.text-m-error').text()).toBe('Fichier requis') - expect(wrapper.get('input[type="text"]').classes()).toContain('border-m-error') + expect(wrapper.get('p.text-m-danger').text()).toBe('Fichier requis') + expect(wrapper.get('input[type="text"]').classes()).toContain('border-m-danger') expect(wrapper.get('input[type="text"]').attributes('aria-invalid')).toBe('true') }) it('shows error style on icon', () => { const wrapper = mountComponent({error: 'Error'}) - expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error') + expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger') }) it('shows success message and styles', () => { diff --git a/app/components/malio/radio/RadioButton.test.ts b/app/components/malio/radio/RadioButton.test.ts index 5a10947..acb93d1 100644 --- a/app/components/malio/radio/RadioButton.test.ts +++ b/app/components/malio/radio/RadioButton.test.ts @@ -112,8 +112,8 @@ describe('MalioRadioButton', () => { }) expect(wrapper.get('.radio-control').classes()).toContain('is-error') - expect(wrapper.get('.radio-text').classes()).toContain('text-m-error') - expect(wrapper.get('.radio-message').classes()).toContain('text-m-error') + expect(wrapper.get('.radio-text').classes()).toContain('text-m-danger') + expect(wrapper.get('.radio-message').classes()).toContain('text-m-danger') expect(wrapper.get('input').attributes('aria-invalid')).toBe('true') }) @@ -137,7 +137,7 @@ describe('MalioRadioButton', () => { expect(wrapper.get('.radio-control').classes()).toContain('is-error') expect(wrapper.get('.radio-control').classes()).not.toContain('is-success') expect(wrapper.get('.radio-message').text()).toBe('Selection required') - expect(wrapper.get('.radio-message').classes()).toContain('text-m-error') + expect(wrapper.get('.radio-message').classes()).toContain('text-m-danger') }) it('merges custom classes on group, input and label', () => { diff --git a/app/components/malio/select/Select.test.ts b/app/components/malio/select/Select.test.ts index b629c15..67deae8 100644 --- a/app/components/malio/select/Select.test.ts +++ b/app/components/malio/select/Select.test.ts @@ -139,9 +139,9 @@ describe('MalioSelect', () => { }, }) - expect(wrapper.get('button').classes()).toContain('border-m-error') - expect(wrapper.get('label').classes()).toContain('text-m-error') - expect(wrapper.get('p.text-m-error').text()).toBe('Selection error') + expect(wrapper.get('button').classes()).toContain('border-m-danger') + expect(wrapper.get('label').classes()).toContain('text-m-danger') + expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error') expect(wrapper.get('button').attributes('aria-invalid')).toBe('true') }) @@ -170,8 +170,8 @@ describe('MalioSelect', () => { }, }) - expect(wrapper.get('button').classes()).toContain('border-m-error') + expect(wrapper.get('button').classes()).toContain('border-m-danger') expect(wrapper.find('p.text-m-success').exists()).toBe(false) - expect(wrapper.get('p.text-m-error').text()).toBe('Selection error') + expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error') }) }) diff --git a/app/story/input/inputPassword.story.vue b/app/story/input/inputPassword.story.vue index 0bde0d1..94524fb 100644 --- a/app/story/input/inputPassword.story.vue +++ b/app/story/input/inputPassword.story.vue @@ -202,7 +202,7 @@ automatiquement. ### Couleur de l'icône - `text-m-muted` par défaut. -- `text-m-error` si la prop `error` est renseignée. +- `text-m-danger` si la prop `error` est renseignée. - `text-m-success` si la prop `success` est renseignée. ------------------------------------------------------------------------ diff --git a/tailwind.config.ts b/tailwind.config.ts index e390058..c812b6d 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -22,7 +22,7 @@ export default { muted: 'rgb(var(--m-muted) / )', bg: 'rgb(var(--m-bg) / )', disabled: 'rgb(var(--m-disabled) / )', - error: 'rgb(var(--m-error) / )', + danger: 'rgb(var(--m-danger) / )', success: 'rgb(var(--m-success) / )', 'btn-primary': 'rgb(var(--m-btn-primary) / )', 'btn-primary-hover': 'rgb(var(--m-btn-primary-hover) / )',