Merge pull request #461 from dnum-mi/develop

Develop

Author: laruiss

src/components/DsfrButton/DsfrButton.stories.js

@@ -26,6 +26,15 @@ export default {
       control: 'boolean',
       description: 'Permet de basculer sur la variante de style "tertiary"',
     },
+    noOutline: {
+      control: 'boolean',
+      description: 'Permet de basculer sur la variante de style "tertiary-nooutline"',
+    },
+    size: {
+      control: 'radio',
+      options: ['small', 'medium', 'large'],
+      description: 'Indique la taille du groupe de bouton',
+    },
     disabled: {
       control: 'boolean',
       description: 'Indique si le bouton est **inactivé**',
@@ -56,6 +65,8 @@ export const BoutonPrimaire = (args) => ({
       :tertiary="tertiary"
       :disabled="disabled"
       :icon="icon"
+      :size="size"
+      :no-outline="noOutline"
       :icon-only="iconOnly"
       :icon-right="iconRight"
       @click="onClick"
@@ -89,6 +100,8 @@ export const BoutonPrimaireAvecIcone = (args) => ({
       :label="label"
       :disabled="disabled"
       :icon="icon"
+      :size="size"
+      :no-outline="noOutline"
       :icon-right="iconRight"
       @click="onClick"
     />
@@ -118,6 +131,8 @@ export const BoutonSecondaire = (args) => ({
       :label="label"
       :disabled="disabled"
       :secondary="secondary"
+      :no-outline="noOutline"
+      :size="size"
       @click="onClick"
     />
   `,
@@ -145,6 +160,8 @@ export const BoutonTertiaire = (args) => ({
       :label="label"
       :disabled="disabled"
       :tertiary="tertiary"
+      :no-outline="noOutline"
+      :size="size"
       @click="onClick"
     />
   `,
@@ -160,6 +177,36 @@ BoutonTertiaire.args = {
   tertiary: true,
 }
 
+export const BoutonTertiaireSansBordure = (args) => ({
+  components: { DsfrButton },
+  data () {
+    return {
+      ...args,
+    }
+  },
+  template: `
+    <DsfrButton
+      :label="label"
+      :disabled="disabled"
+      :tertiary="tertiary"
+      :no-outline="noOutline"
+      :size="size"
+      @click="onClick"
+    />
+  `,
+
+  mounted () {
+    document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
+  },
+})
+BoutonTertiaireSansBordure.args = {
+  label: 'Label bouton secondaire',
+  disabled: false,
+  dark: false,
+  tertiary: true,
+  noOutline: true,
+}
+
 export const SuiteDeBoutons = (args) => ({
   components: {
     DsfrButton,
@@ -177,6 +224,8 @@ export const SuiteDeBoutons = (args) => ({
         :secondary="btn.secondary"
         :label="btn.label"
         :icon="btn.icon"
+        :no-outline="btn.noOutline"
+        :size="btn.size"
         :iconRight="btn.iconRight"
         @click="onClick"
       />

src/components/DsfrButton/DsfrButton.vue

@@ -19,14 +19,41 @@ export default defineComponent({
     },
     secondary: Boolean,
     tertiary: Boolean,
+    noOutline: {
+      type: Boolean,
+      default: false,
+    },
     icon: {
       type: String,
       default: undefined,
     },
+    size: {
+      type: String,
+      validator: (val) => ['sm', 'small', 'lg', 'large', 'md', 'medium', '', undefined].includes(val),
+      default: undefined,
+    },
     iconRight: Boolean,
     iconOnly: Boolean,
   },
 
+  computed: {
+    sm () {
+      return ['sm', 'small'].includes(this.size)
+    },
+    md () {
+      return ['md', 'medium'].includes(this.size)
+    },
+    lg () {
+      return ['lg', 'large'].includes(this.size)
+    },
+    center () {
+      return this.align === 'center'
+    },
+    right () {
+      return this.align === 'right'
+    },
+  },
+
   methods: {
     focus () {
       this.$refs.btn.focus()
@@ -41,7 +68,11 @@ export default defineComponent({
     :class="{
       'fr-btn': true,
       'fr-btn--secondary': secondary && !tertiary,
-      'fr-btn--tertiary': tertiary && !secondary,
+      'fr-btn--tertiary': tertiary && !secondary && !noOutline,
+      'fr-btn--tertiary-no-outline': tertiary && !secondary && noOutline,
+      'fr-btn--sm': sm,
+      'fr-btn--md': md,
+      'fr-btn--lg': lg,
       'inline-flex': true,
       'reverse': iconRight,
       'justify-center': iconOnly,

src/components/DsfrButton/DsfrButtonGroup.spec.js

@@ -51,7 +51,7 @@ describe('DsfrButtonGroup', () => {
     expect(secondButtonSpan.parentNode).toHaveClass('fr-btn--secondary')
     expect(wrapper).toHaveClass('extra-class')
     expect(wrapper).not.toHaveClass('fr-btns-group--right')
-    expect(wrapper).not.toHaveClass('fr-btns-group--inline-sm')
+    expect(wrapper).not.toHaveClass('fr-btns-group--sm')
     expect(onClickFirst.callCount).toBe(1)
     expect(onClickSecond.callCount).toBe(1)
   })
@@ -80,6 +80,6 @@ describe('DsfrButtonGroup', () => {
     // Then
     expect(wrapper).toHaveClass('extra-class')
     expect(wrapper).toHaveClass('fr-btns-group--right')
-    expect(wrapper).toHaveClass('fr-btns-group--inline-sm')
+    expect(wrapper).toHaveClass('fr-btns-group--sm')
   })
 })

src/components/DsfrButton/DsfrButtonGroup.stories.js

@@ -20,15 +20,25 @@ export default {
     },
     inline: {
       control: 'boolean',
-      description: 'Indique si le groupe de boutons doit apparaître en empilement horizontal',
+      deprecated: true,
+      description: '**Déprécié:** Indique si le groupe de boutons doit toujours apparaître en empilement horizontal. *Utiliser `inlineLayoutWhen` à la place.*',
+    },
+    inlineLayoutWhen: {
+      control: 'radio',
+      options: ['never', 'always', 'small', 'medium', 'large'],
+      description: 'Indique si le groupe de boutons doit apparaître en empilement horizontal (toujours, ou seulement sur les tailles de vue spécifiées)',
     },
     reverse: {
       control: 'boolean',
       description: 'Indique si l’ordre des boutons doit être inversé par rapport au DOM.\n\n *N.B. : Ne fonctionne que si `align` est à `right`*',
     },
+    iconRight: {
+      control: 'boolean',
+      description: 'Inverse la position des icônes par rapport au texte.\n\n *N.B. : Ne fonctionne que si la prop n\'est pas définie sur chaque bouton*',
+    },
     size: {
       control: 'radio',
-      options: ['default', 'small', 'medium', 'large'],
+      options: ['small', 'medium', 'large'],
       description: 'Indique la taille du groupe de bouton',
     },
     align: {
@@ -57,6 +67,8 @@ export const GroupeDeBoutons = (args) => ({
       :size="size"
       :align="align"
       :inline="inline"
+      :inline-layout-when="inlineLayoutWhen"
+      :icon-right="iconRight"
       :reverse="reverse"
     />
   `,
@@ -69,9 +81,9 @@ export const GroupeDeBoutons = (args) => ({
 GroupeDeBoutons.args = {
   dark: false,
   align: 'center',
-  inline: false,
+  inlineLayoutWhen: false,
   reverse: false,
-  size: undefined,
+  iconRight: false,
   buttons: [
     {
       label: 'Label 1',
@@ -85,13 +97,11 @@ GroupeDeBoutons.args = {
     {
       label: 'Label 3',
       icon: 'ri-checkbox-circle-line',
-      iconRight: true,
     },
     {
       label: 'Label 4',
       secondary: true,
       icon: 'ri-checkbox-circle-line',
-      iconRight: true,
     },
   ],
 }

src/components/DsfrButton/DsfrButtonGroup.vue

@@ -14,13 +14,26 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
-    inline: Boolean,
+    /**
+     * @deprecated Use inlineLayoutWhen instead
+     */
+    inline: {
+      type: Boolean,
+      default: false,
+      deprecated: 'Use "inlineLayoutWhen" prop instead',
+    },
+    inlineLayoutWhen: {
+      type: String,
+      validator: (val) => ['always', 'never', 'sm', 'small', 'lg', 'large', 'md', 'medium', '', undefined, true, false].includes(val),
+      default: 'never',
+    },
     size: {
       type: String,
       validator: (val) => ['sm', 'small', 'lg', 'large', 'md', 'medium', '', undefined].includes(val),
       default: undefined,
     },
     reverse: Boolean,
+    iconRight: Boolean,
     align: {
       type: String,
       validator: (val) => ['right', 'center', '', undefined].includes(val),
@@ -38,6 +51,18 @@ export default defineComponent({
     lg () {
       return ['lg', 'large'].includes(this.size)
     },
+    inlineAlways () {
+      return this.inline || ['always', true].includes(this.inlineLayoutWhen)
+    },
+    inlineSm () {
+      return ['sm', 'small'].includes(this.inlineLayoutWhen)
+    },
+    inlineMd () {
+      return ['md', 'medium'].includes(this.inlineLayoutWhen)
+    },
+    inlineLg () {
+      return ['lg', 'large'].includes(this.inlineLayoutWhen)
+    },
     center () {
       return this.align === 'center'
     },
@@ -52,12 +77,16 @@ export default defineComponent({
   <ul
     class="fr-btns-group"
     :class="{
-      'fr-btns-group--inline': inline,
-      'fr-btns-group--inline-sm': sm,
-      'fr-btns-group--inline-md': md,
-      'fr-btns-group--inline-lg': lg,
+      'fr-btns-group--inline': inlineAlways,
+      'fr-btns-group--sm': sm,
+      'fr-btns-group--md': md,
+      'fr-btns-group--lg': lg,
+      'fr-btns-group--inline-sm': inlineSm,
+      'fr-btns-group--inline-md': inlineMd,
+      'fr-btns-group--inline-lg': inlineLg,
       'fr-btns-group--center': center,
       'fr-btns-group--right': right,
+      'fr-btns-group--icon-right': iconRight,
       'fr-btns-group--inline-reverse': reverse,
     }"
     data-testid="fr-btns"

src/components/DsfrCheckbox/DsfrCheckbox.e2e.js

@@ -143,7 +143,7 @@ describe('DsfrCheckboxSet', () => {
       .should('be.visible')
       .should('contain', legend)
       .get('.fr-fieldset')
-      .find('.fr-fieldset__element')
+      .find('.fr-fieldset__content')
       .should('be.visible')
       .get('.fr-fieldset')
       .find('fr-message--info')
@@ -238,7 +238,7 @@ describe('DsfrCheckboxSet', () => {
       .should('be.visible')
       .should('contain', legend)
       .get('.fr-fieldset')
-      .find('.fr-fieldset__element')
+      .find('.fr-fieldset__content')
       .should('be.visible')
       .get('.fr-fieldset')
       .find('.fr-message--info')
@@ -334,7 +334,7 @@ describe('DsfrCheckboxSet', () => {
       .should('be.visible')
       .should('contain', legend)
       .get('.fr-fieldset')
-      .find('.fr-fieldset__element')
+      .find('.fr-fieldset__content')
       .should('be.visible')
       .get('.fr-fieldset')
       .find('.fr-message--info')

src/components/DsfrCheckbox/DsfrCheckbox.vue

@@ -42,7 +42,7 @@ export default defineComponent({
       return this.errorMessage || this.validMessage
     },
     additionalMessageClass () {
-      return this.errorMessage ? 'fr-message--error' : 'fr-message--valid'
+      return this.errorMessage ? 'fr-error-text' : 'fr-valid-text'
     },
   },
 })

src/components/DsfrCheckbox/DsfrCheckboxSet.spec.js

@@ -128,7 +128,7 @@ describe('DsfrCheckboxSet', () => {
       props: {
       },
     })
-    const checkboxes = container.querySelector('.fr-fieldset__element')
+    const checkboxes = container.querySelector('.fr-fieldset__content')
 
     // Then
     expect(checkboxes.firstElementChild).toBe(null)

src/components/DsfrCheckbox/DsfrCheckboxSet.vue

@@ -50,7 +50,7 @@ export default defineComponent({
       return this.errorMessage || this.validMessage
     },
     additionalMessageClass () {
-      return this.errorMessage ? 'fr-message--error' : 'fr-message--valid'
+      return this.errorMessage ? 'fr-error-text' : 'fr-valid-text'
     },
   },
 
@@ -93,7 +93,7 @@ export default defineComponent({
         </slot>
       </legend>
       <div
-        class="fr-fieldset__element"
+        class="fr-fieldset__content"
         role="group"
         :aria-labelledby="titleId"
       >