From 946f924b29e10e59b5d3bc548a1298f5bc457a7f Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Thu, 4 Apr 2024 11:19:56 +0200 Subject: [PATCH 1/2] refactor(KeyValueField): new spacing and text input v2 usage (#3618) --- .changeset/tiny-cows-smile.md | 5 ++++ .../__stories__/Environnement.stories.tsx | 2 +- .../__stories__/Playground.stories.tsx | 4 +-- .../__snapshots__/index.spec.tsx.snap | 8 +++--- .../src/components/KeyValueField/index.tsx | 25 +++++++++++-------- 5 files changed, 27 insertions(+), 17 deletions(-) create mode 100644 .changeset/tiny-cows-smile.md diff --git a/.changeset/tiny-cows-smile.md b/.changeset/tiny-cows-smile.md new file mode 100644 index 0000000000..b66eab8196 --- /dev/null +++ b/.changeset/tiny-cows-smile.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/form": minor +--- + +Refactor `` component to have correct spacing and use `` diff --git a/packages/form/src/components/KeyValueField/__stories__/Environnement.stories.tsx b/packages/form/src/components/KeyValueField/__stories__/Environnement.stories.tsx index dfa3625dbe..b84e88b3cc 100644 --- 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 index 9a088a2b6a..59d1d0739a 100644 --- 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 index e3cf7d030e..00105e8709 100644 --- 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" >
['label'] - required?: ComponentProps['required'] - regex?: ComponentProps['regex'] + label: ComponentProps['label'] + required?: ComponentProps['required'] + regex?: ComponentProps['regex'] } type InputValueProps = { - type?: ComponentProps['type'] - placeholder?: ComponentProps['placeholder'] + type?: ComponentProps['type'] + placeholder?: ComponentProps['placeholder'] } & InputKeyProps type AddButtonProps = { @@ -64,17 +64,22 @@ export const KeyValueField = < return ( {fields.length ? ( - + {fields.map((field, index) => ( - - + - Date: Thu, 4 Apr 2024 14:05:39 +0200 Subject: [PATCH 2/2] fix(Navigation): some minor fixes (#3626) --- .changeset/bright-clocks-compete.md | 5 +++++ .changeset/good-crabs-marry.md | 5 +++++ packages/plus/src/components/Navigation/components/Item.tsx | 6 +----- packages/ui/src/components/Expandable/index.tsx | 5 ++--- 4 files changed, 13 insertions(+), 8 deletions(-) create mode 100644 .changeset/bright-clocks-compete.md create mode 100644 .changeset/good-crabs-marry.md diff --git a/.changeset/bright-clocks-compete.md b/.changeset/bright-clocks-compete.md new file mode 100644 index 0000000000..2feb930029 --- /dev/null +++ b/.changeset/bright-clocks-compete.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/ui": patch +--- + +Fix `` component to have correct `visibility` set in css diff --git a/.changeset/good-crabs-marry.md b/.changeset/good-crabs-marry.md new file mode 100644 index 0000000000..a900a7715e --- /dev/null +++ b/.changeset/good-crabs-marry.md @@ -0,0 +1,5 @@ +--- +"@ultraviolet/plus": patch +--- + +Fix `` to have correct color for `` that has sub items diff --git a/packages/plus/src/components/Navigation/components/Item.tsx b/packages/plus/src/components/Navigation/components/Item.tsx index 9f216d0d83..ce0f2a7ac0 100644 --- 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 index 0f97e9fec4..24226ac0d0 100644 --- 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 {