From 2fd24008916587deb53c52384487595b83924b56 Mon Sep 17 00:00:00 2001 From: Lena Rashkovan Date: Mon, 11 Nov 2024 11:15:23 +0100 Subject: [PATCH 1/4] feat(popover): move even-width-with-trigger styling to popover --- src/components/experimental/ComboBox/ComboBox.tsx | 2 -- src/components/experimental/Popover/Popover.tsx | 6 ++++++ src/components/experimental/Select/Select.tsx | 2 -- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/experimental/ComboBox/ComboBox.tsx b/src/components/experimental/ComboBox/ComboBox.tsx index 63a9cf6e..a6a97b54 100644 --- a/src/components/experimental/ComboBox/ComboBox.tsx +++ b/src/components/experimental/ComboBox/ComboBox.tsx @@ -27,9 +27,7 @@ const defaultAriaStrings = { }; const StyledPopover = styled(Popover)` - box-sizing: border-box; overflow: auto; - width: var(--trigger-width); `; interface ComboBoxFieldProps extends Pick { diff --git a/src/components/experimental/Popover/Popover.tsx b/src/components/experimental/Popover/Popover.tsx index e335124f..65488f2c 100644 --- a/src/components/experimental/Popover/Popover.tsx +++ b/src/components/experimental/Popover/Popover.tsx @@ -14,6 +14,12 @@ const StyledPopover = styled(BasePopover)` box-shadow: 0 2px 4px -1px hsla(0, 0%, 0%, 0.2), 0 1px 10px 0 hsla(0, 0%, 0%, 0.12), 0 4px 5px 0 hsla(0, 0%, 0%, 0.14); border-radius: ${get('radii.4')}; + + [data-trigger='Select'], + [data-trigger='ComboBox'] { + box-sizing: border-box; + width: var(--trigger-width); + } `; const FocusTrap = styled(Dialog)` diff --git a/src/components/experimental/Select/Select.tsx b/src/components/experimental/Select/Select.tsx index f7c61331..88592fd5 100644 --- a/src/components/experimental/Select/Select.tsx +++ b/src/components/experimental/Select/Select.tsx @@ -24,9 +24,7 @@ import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden'; import { fieldStyles, fieldTextStyles } from '../Field/Field'; const StyledPopover = styled(Popover)` - box-sizing: border-box; overflow: auto; - width: var(--trigger-width); `; const FakeButton = styled(FakeInput)` From 5959a01699e2be09a5dfab59bf2bbe6b313a906d Mon Sep 17 00:00:00 2001 From: Lena Rashkovan Date: Mon, 11 Nov 2024 11:17:10 +0100 Subject: [PATCH 2/4] fix(list-box): fix styling when listbox item is a link --- src/components/experimental/ListBox/ListBox.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/experimental/ListBox/ListBox.tsx b/src/components/experimental/ListBox/ListBox.tsx index ec177d72..8ce7d918 100644 --- a/src/components/experimental/ListBox/ListBox.tsx +++ b/src/components/experimental/ListBox/ListBox.tsx @@ -7,6 +7,7 @@ import { getSemanticValue } from '../../../essentials/experimental'; const StyledListBoxItem = styled(BaseListBoxItem)` position: relative; + display: block; padding: ${get('space.3')} ${get('space.4')}; border-radius: ${get('radii.4')}; color: ${getSemanticValue('on-surface')}; From 7edd3b7b3dc37de1bf6a17a8e8db6a59e80379d9 Mon Sep 17 00:00:00 2001 From: Lena Rashkovan Date: Mon, 11 Nov 2024 11:29:25 +0100 Subject: [PATCH 3/4] fix(icon-button): fix duplicate selector --- .../experimental/IconButton/IconButton.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/components/experimental/IconButton/IconButton.tsx b/src/components/experimental/IconButton/IconButton.tsx index d5b6a2ba..7b8d5ecb 100644 --- a/src/components/experimental/IconButton/IconButton.tsx +++ b/src/components/experimental/IconButton/IconButton.tsx @@ -25,6 +25,7 @@ const StandardIconContainer = styled(Button)>` &[data-disabled], &[data-pending] { cursor: not-allowed; + opacity: 0.38; } /* we create a before pseudo element to mess with the opacity (see the hovered state) */ @@ -50,11 +51,6 @@ const StandardIconContainer = styled(Button)>` &:not([data-disabled]) { color: ${props => (props.isActive ? getSemanticValue('interactive') : getSemanticValue('on-surface'))}; } - - &[data-disabled], - &[data-pending] { - opacity: 0.38; - } `; const TonalIconContainer = styled(Button)>` @@ -69,6 +65,7 @@ const TonalIconContainer = styled(Button)>` &[data-disabled], &[data-pending] { cursor: not-allowed; + opacity: 0.38; } /* we create a before pseudo element to mess with the opacity (see the hovered state) */ @@ -104,11 +101,6 @@ const TonalIconContainer = styled(Button)>` color: ${props => props.isActive ? getSemanticValue('on-interactive-container') : getSemanticValue('on-surface')}; } - - &[data-disabled], - &[data-pending] { - opacity: 0.38; - } `; export const IconButton = ({ From d0967001181fe68574a0c52d49db084f2a0be8ce Mon Sep 17 00:00:00 2001 From: Lena Rashkovan Date: Mon, 11 Nov 2024 11:32:08 +0100 Subject: [PATCH 4/4] fix(popover): fix syntax --- src/components/experimental/Popover/Popover.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/experimental/Popover/Popover.tsx b/src/components/experimental/Popover/Popover.tsx index 65488f2c..399eebbe 100644 --- a/src/components/experimental/Popover/Popover.tsx +++ b/src/components/experimental/Popover/Popover.tsx @@ -15,8 +15,8 @@ const StyledPopover = styled(BasePopover)` 0 4px 5px 0 hsla(0, 0%, 0%, 0.14); border-radius: ${get('radii.4')}; - [data-trigger='Select'], - [data-trigger='ComboBox'] { + &[data-trigger='Select'], + &[data-trigger='ComboBox'] { box-sizing: border-box; width: var(--trigger-width); }