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/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 = ({ 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')}; diff --git a/src/components/experimental/Popover/Popover.tsx b/src/components/experimental/Popover/Popover.tsx index e335124f..399eebbe 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)`