Merge branch 'main' into renovate/react-monorepo

scaleway · Apr 4, 2024 · c13668d · c13668d
2 parents e0a8b98 + 823fcb0
commit c13668d
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 25 deletions.
diff --git a/.changeset/bright-clocks-compete.md b/.changeset/bright-clocks-compete.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Fix `<Expandable />` component to have correct `visibility` set in css
diff --git a/.changeset/good-crabs-marry.md b/.changeset/good-crabs-marry.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": patch
+---
+
+Fix `<Navigation />` to have correct color for `<Navigation.Item />` that has sub items
diff --git a/.changeset/tiny-cows-smile.md b/.changeset/tiny-cows-smile.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/form": minor
+---
+
+Refactor `<KeyValueField />` component to have correct spacing and use `<TextInputFieldV2 />`
diff --git a/packages/form/src/components/KeyValueField/__stories__/Environnement.stories.tsx b/packages/form/src/components/KeyValueField/__stories__/Environnement.stories.tsx
@@ -25,7 +25,7 @@ Environnement.args = {
   },
   inputValue: {
     label: 'value',
-    type: 'toggleable-password',
+    type: 'password',
     placeholder: HIDDEN_SECRET_VALUE,
     regex: [alphanumDashUnderscoreDots],
     required: true,

diff --git a/packages/form/src/components/KeyValueField/__stories__/Playground.stories.tsx b/packages/form/src/components/KeyValueField/__stories__/Playground.stories.tsx
@@ -5,11 +5,11 @@ export const Playground = Template.bind({})
 Playground.args = {
   name: 'keyValues',
   inputKey: {
-    label: 'key',
+    label: 'Key',
     required: true,
   },
   inputValue: {
-    label: 'value',
+    label: 'Value',
     required: false,
   },
   addButton: {

diff --git a/packages/form/src/components/KeyValueField/__tests__/__snapshots__/index.spec.tsx.snap b/packages/form/src/components/KeyValueField/__tests__/__snapshots__/index.spec.tsx.snap
@@ -134,8 +134,8 @@ exports[`KeyValueField should render with default props & max size 1`] = `
         class="cache-1g4uved ehpbis70"
       >
         <div
-          aria-controls=":r2:"
-          aria-describedby=":r2:"
+          aria-controls=":r8:"
+          aria-describedby=":r8:"
           class="cache-jhu4ja e4h1g860"
           data-container-full-width="false"
           tabindex="0"
@@ -452,8 +452,8 @@ exports[`KeyValueField should render with default props in readonly mode 1`] = `
         class="cache-1g4uved ehpbis70"
       >
         <div
-          aria-controls=":r3:"
-          aria-describedby=":r3:"
+          aria-controls=":r9:"
+          aria-describedby=":r9:"
           class="cache-jhu4ja e4h1g860"
           data-container-full-width="false"
           tabindex="0"

diff --git a/packages/form/src/components/KeyValueField/index.tsx b/packages/form/src/components/KeyValueField/index.tsx
@@ -2,17 +2,17 @@ import { Button, Row, Stack } from '@ultraviolet/ui'
 import type { ComponentProps } from 'react'
 import { useFieldArray } from 'react-hook-form'
 import type { Control, FieldArrayPath, FieldValues } from 'react-hook-form'
-import { TextInputField } from '../TextInputField'
+import { TextInputField as TextInputFieldV2 } from '../TextInputFieldV2'
 
 type InputKeyProps = {
-  label: ComponentProps<typeof TextInputField>['label']
-  required?: ComponentProps<typeof TextInputField>['required']
-  regex?: ComponentProps<typeof TextInputField>['regex']
+  label: ComponentProps<typeof TextInputFieldV2>['label']
+  required?: ComponentProps<typeof TextInputFieldV2>['required']
+  regex?: ComponentProps<typeof TextInputFieldV2>['regex']
 }
 
 type InputValueProps = {
-  type?: ComponentProps<typeof TextInputField>['type']
-  placeholder?: ComponentProps<typeof TextInputField>['placeholder']
+  type?: ComponentProps<typeof TextInputFieldV2>['type']
+  placeholder?: ComponentProps<typeof TextInputFieldV2>['placeholder']
 } & InputKeyProps
 
 type AddButtonProps = {
@@ -64,17 +64,22 @@ export const KeyValueField = <
   return (
     <Stack gap={3}>
       {fields.length ? (
-        <Stack gap={2}>
+        <Stack gap={3}>
           {fields.map((field, index) => (
-            <Row key={field.id} templateColumns="1fr 1fr auto" gap={2}>
-              <TextInputField
+            <Row
+              key={field.id}
+              templateColumns="1fr 1fr auto"
+              gap={2}
+              alignItems="end"
+            >
+              <TextInputFieldV2
                 readOnly={readonly}
                 required={inputKey.required}
                 name={`${name}.${index}.key`}
                 label={inputKey.label}
                 regex={inputKey.regex}
               />
-              <TextInputField
+              <TextInputFieldV2
                 readOnly={readonly}
                 required={inputValue.required}
                 name={`${name}.${index}.value`}

diff --git a/packages/plus/src/components/Navigation/components/Item.tsx b/packages/plus/src/components/Navigation/components/Item.tsx
@@ -139,10 +139,6 @@ const StyledContainer = styled(Stack)`
         opacity: 0;
       }
     }
-
-    ${WrapText} {
-      color: ${({ theme }) => theme.colors.neutral.textWeakHover};
-    }
   }
 
   &:active[data-has-no-expand='false']:not([disabled]):not(
@@ -452,7 +448,7 @@ export const Item = ({
                 as="span"
                 variant="bodySmallStrong"
                 sentiment={active ? 'primary' : 'neutral'}
-                prominence={categoryIcon || !hasParents ? undefined : 'weak'}
+                prominence={categoryIcon || !hasParents ? 'strong' : 'weak'}
                 animation={animation}
                 disabled={disabled}
               >

diff --git a/packages/ui/src/components/Expandable/index.tsx b/packages/ui/src/components/Expandable/index.tsx
@@ -70,13 +70,12 @@ export const Expandable = ({
   useEffect(() => {
     if (opened && ref.current && height) {
       ref.current.style.maxHeight = `${height}px`
-      if (!minHeight) {
-        ref.current.style.visibility = ''
-      }
+      ref.current.style.visibility = ''
       transitionTimer.current = setTimeout(() => {
         if (ref.current) {
           ref.current.style.maxHeight = 'initial'
           ref.current.style.overflow = 'visible'
+          ref.current.style.visibility = ''
         }
       }, ANIMATION_DURATION)
     } else {