fix: meter bar design in Chrome and improve tooltip button in card (#964)

Author: ThibaudDauce

datagouv-components/assets/main.css

@@ -188,34 +188,6 @@
   .code {
       @apply p-1! font-mono! bg-gray-lower! text-sm! text-gray-medium! rounded!;
   }
-  meter.quality-score {
-    background: none;
-    border: 1px solid var(--color-gray-default);
-    border-radius: 8px;
-    height: 10px;
-    vertical-align: baseline;
-  }
-  meter.quality-score::-webkit-meter-bar {
-    height: 10px;
-    background: whiteSmoke;
-    border-radius: 8px;
-  }
-  meter.quality-score::-moz-meter-bar {
-    background: whiteSmoke;
-    border-radius: 8px;
-  }
-  meter.quality-score::-webkit-meter-suboptimum-value {
-    background-color: var(--color-gray-low);
-  }
-  meter.quality-score:-moz-meter-sub-optimum::-moz-meter-bar {
-    background-color: var(--color-gray-low);
-  }
-  meter.quality-score::-webkit-meter-optimum-value {
-    background-color: #27A658;
-  }
-  meter.quality-score:-moz-meter-optimum::-moz-meter-bar {
-    background-color: #27A658;
-  }
 
   /* Vue Sonner Toast custom colors */
   [data-sonner-toast][data-type="success"] {

datagouv-components/src/components/DatasetCard.vue

@@ -60,7 +60,7 @@
       </div>
     </div>
     <div class="mx-0 -mb-1 flex flex-wrap items-center text-sm text-gray-medium">
-      <div class="hidden sm:flex text-gray-medium -ml-2.5">
+      <div class="hidden sm:flex text-gray-medium">
         <DatasetQualityInline :quality="dataset.quality" />
       </div>
       <RiSubtractLine

datagouv-components/src/components/DatasetQuality.vue

@@ -1,20 +1,26 @@
 <template>
-  <div class="flex items-center">
-    <Toggletip
-      :button-props="{ class: '-ml-2 mt-px', title: t('Qualité des métadonnées') }"
-    >
-      <template #toggletip>
-        <DatasetQualityTooltipContent :quality />
-      </template>
-    </Toggletip>
-    <div class="text-sm text-gray-plain font-bold">
-      {{ t('Qualité des métadonnées:') }}
-    </div>
-  </div>
-  <DatasetQualityScore
-    :score="quality.score"
-    class="w-full"
-  />
+  <Toggletip
+    :styled-button="false"
+    button-class="flex flex-col gap-1 rounded-sm p-1.5 -m-1.5 border-transparent -outline-offset-2 hover:bg-gray-some transition-colors w-full text-left"
+    :button-props="{ title: t('Qualité des métadonnées') }"
+  >
+    <span class="flex items-center gap-1">
+      <RiInformationLine
+        class="size-5 shrink-0"
+        aria-hidden="true"
+      />
+      <span class="text-sm text-gray-plain font-bold">
+        {{ t('Qualité des métadonnées:') }}
+      </span>
+    </span>
+    <DatasetQualityScore
+      :score="quality.score"
+      class="w-full"
+    />
+    <template #toggletip>
+      <DatasetQualityTooltipContent :quality />
+    </template>
+  </Toggletip>
   <template v-if="!hideWarnings">
     <ul class="list-none pl-0">
       <DatasetQualityItemWarning
@@ -54,6 +60,7 @@
 </template>
 
 <script setup lang="ts">
+import { RiInformationLine } from '@remixicon/vue'
 import type { Quality } from '../types/datasets'
 import DatasetQualityItemWarning from './DatasetQualityItemWarning.vue'
 import DatasetQualityScore from './DatasetQualityScore.vue'

datagouv-components/src/components/DatasetQualityInline.vue

@@ -1,21 +1,17 @@
 <template>
-  <div class="m-0 flex flex-wrap items-center text-sm text-gray-medium">
-    <div class="fr-grid-row fr-grid-row--middle">
-      <Toggletip
-        :button-props="{ class: 'relative z-2 ml-0.5', title: t('Qualité des métadonnées') }"
-      >
-        <RiInformationLine class="size-4" />
-        <template #toggletip>
-          <DatasetQualityTooltipContent :quality />
-        </template>
-      </Toggletip>
-      <p class="my-0 mr-1 text-gray-medium text-sm">
-        {{ t('Métadonnées :') }}
-      </p>
-      <div class="fr-grid-row fr-grid-row--middle fr-mr-1v">
-        <DatasetQualityScore :score="quality.score" />
-      </div>
-    </div>
+  <div class="m-0 text-sm text-gray-medium">
+    <Toggletip
+      :styled-button="false"
+      button-class="border-transparent -outline-offset-2 inline-flex items-center justify-center hover:bg-gray-lower transition-colors"
+      :button-props="{ class: 'relative z-2 gap-1 rounded-sm px-1 -mx-1 group/quality', title: t('Qualité des métadonnées') }"
+    >
+      <RiInformationLine class="size-3.5 shrink-0" />
+      <span class="text-gray-medium text-sm group-hover/quality:underline">{{ t('Métadonnées :') }}</span>
+      <DatasetQualityScore :score="quality.score" />
+      <template #toggletip>
+        <DatasetQualityTooltipContent :quality />
+      </template>
+    </Toggletip>
   </div>
 </template>
 

datagouv-components/src/components/DatasetQualityScore.vue

@@ -1,26 +1,23 @@
 <template>
-  <meter
-    class="quality-score"
-    :class="props.class"
-    min="0"
-    low="0"
-    :high="high"
-    :max="quality_max_score"
-    :optimum="quality_max_score"
+  <ProgressBar
     :value="score"
+    :max="quality_max_score"
+    :aria-label="score >= high ? t('Bon') : t('À améliorer')"
+    :bar-class="score >= high ? 'bg-success-dark' : 'bg-gray-low'"
+    :class="props.class"
   >
-    <template v-if="score >= high">
-      {{ t('Bon') }}
-    </template>
-    <template v-else>
-      {{ t('À améliorer') }}
-    </template>({{ calculatedScore }})
-  </meter>
+    <span class="sr-only">
+      <template v-if="score >= high">{{ t('Bon') }}</template>
+      <template v-else>{{ t('À améliorer') }}</template>
+      ({{ calculatedScore }})
+    </span>
+  </ProgressBar>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useTranslation } from '../composables/useTranslation'
+import ProgressBar from './ProgressBar.vue'
 
 const props = withDefaults(defineProps<{
   score: number

datagouv-components/src/components/ProgressBar.vue

@@ -0,0 +1,31 @@
+<template>
+  <div
+    role="meter"
+    :aria-valuenow="value"
+    aria-valuemin="0"
+    :aria-valuemax="max"
+    class="min-w-20 h-2.5 rounded-lg border border-gray-default bg-[#f5f5f5] overflow-hidden"
+  >
+    <div
+      class="h-full rounded-lg"
+      :class="barClass"
+      :style="{ width: percentage + '%' }"
+    />
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<{
+  value: number
+  max?: number
+  barClass?: string
+}>(), {
+  max: 1,
+  barClass: '',
+})
+
+const percentage = computed(() => Math.min(100, Math.max(0, (props.value / props.max) * 100)))
+</script>

datagouv-components/src/components/Toggletip.vue

@@ -13,8 +13,10 @@
     />
     <PopoverButton
       v-bind="buttonProps"
-      class="border-transparent -outline-offset-2 inline-flex items-center justify-center hover:bg-gray-some"
-      :class="{ 'w-8 h-8 rounded-full bg-transparent': styledButton }"
+      :class="[
+        buttonClass ?? 'border-transparent -outline-offset-2 inline-flex items-center justify-center hover:bg-gray-some',
+        { 'w-8 h-8 rounded-full bg-transparent': styledButton && !buttonClass },
+      ]"
     >
       <slot>
         <RiInformationLine
@@ -57,6 +59,7 @@ import ValueWatcher from './ValueWatcher.vue'
 
 withDefaults(defineProps<{
   buttonProps?: object
+  buttonClass?: string
   noMargin?: boolean
   styledButton?: boolean
 }>(), {

datagouv-components/src/main.ts

@@ -49,6 +49,7 @@ import DatasetQuality from './components/DatasetQuality.vue'
 import DatasetQualityInline from './components/DatasetQualityInline.vue'
 import DatasetQualityItem from './components/DatasetQualityItem.vue'
 import DatasetQualityScore from './components/DatasetQualityScore.vue'
+import ProgressBar from './components/ProgressBar.vue'
 import DatasetQualityTooltipContent from './components/DatasetQualityTooltipContent.vue'
 import ExtraAccordion from './components/ExtraAccordion.vue'
 import LabelTag from './components/DatasetLabelTag.vue'
@@ -285,6 +286,7 @@ export {
   PaddedContainer,
   Pagination,
   Placeholder,
+  ProgressBar,
   PostCard,
   RadioGroup,
   RadioInput,