Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

fix(Dropdown): colliding toggle button and scroll #2006

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix(Dropdown): colliding toggle button and scroll #2006

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
32290c0
fix colliding toggle button and scroll in dropdown
Oct 3, 2019
cf35594
changelog
Oct 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Updating `Button` styles for Teams dark & high contrast themes to match design @notandrew ([#1933](https://github.com/stardust-ui/react/pull/1933))
- Update Office brand icons in Teams theme with latest version @notandrew ([#1954](https://github.com/stardust-ui/react/pull/1954))
- Fix various component documentation issues @davezuko ([#1992](https://github.com/stardust-ui/react/pull/1992))
- Fix colliding toggle button and scrollbar in Dropdown multiselect @jurokapsiar ([#2006](https://github.com/stardust-ui/react/pull/2006))

### Features
- Add experimental runtime accessibility attributes validation (the initial step validates the Button component only) @mshoho ([#1911](https://github.com/stardust-ui/react/pull/1911))
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const dropdownStyles: ComponentSlotStylesPrepared<DropdownPropsAndState, Dropdow
overflowY: 'auto',
maxHeight: v.selectedItemsMaxHeight,
width: '100%',
...(p.toggleIndicator && { paddingRight: v.toggleIndicatorSize }),
...(p.toggleIndicator && { marginRight: v.toggleIndicatorSize }),
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this actually breaks IE in a strange way. Follwoing code added to the toggle indicator slot works better:

 root: {
   [`& .${Dropdown.slotClassNames.toggleIndicator}`]: {
     marginRight: "12px"
   }
  }

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jurokapsiar what is the strange behavior?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like the new styling moves the scrollbar for all browsers and not just IE11. I don't think that is what we will want, but i can't load in ie11 right nowso i don't understand the issue...

}),

triggerButton: ({ props: p, variables: v }): ICSSInJSStyle => {
Expand Down