fix: popover and listboxitem styling (#489)

* feat(popover): move even-width-with-trigger styling to popover

* fix(list-box): fix styling when listbox item is a link

* fix(icon-button): fix duplicate selector

* fix(popover): fix syntax

---------

Co-authored-by: Lena Rashkovan <[email protected]>

Author: Elena Rashkovan

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<FieldProps, 'label' | 'description' | 'errorMessage' | 'leadingIcon'> {

src/components/experimental/IconButton/IconButton.tsx

@@ -25,6 +25,7 @@ const StandardIconContainer = styled(Button)<Omit<IconButtonProps, 'Icon'>>`
     &[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)<Omit<IconButtonProps, 'Icon'>>`
     &:not([data-disabled]) {
         color: ${props => (props.isActive ? getSemanticValue('interactive') : getSemanticValue('on-surface'))};
     }
-
-    &[data-disabled],
-    &[data-pending] {
-        opacity: 0.38;
-    }
 `;
 
 const TonalIconContainer = styled(Button)<Omit<IconButtonProps, 'Icon'>>`
@@ -69,6 +65,7 @@ const TonalIconContainer = styled(Button)<Omit<IconButtonProps, 'Icon'>>`
     &[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)<Omit<IconButtonProps, 'Icon'>>`
         color: ${props =>
             props.isActive ? getSemanticValue('on-interactive-container') : getSemanticValue('on-surface')};
     }
-
-    &[data-disabled],
-    &[data-pending] {
-        opacity: 0.38;
-    }
 `;
 
 export const IconButton = ({

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')};

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)`

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)`