From 28ffec5975c376b771a33d48ad46483b5c0409e1 Mon Sep 17 00:00:00 2001 From: atomiks Date: Thu, 19 Sep 2024 14:59:06 +1000 Subject: [PATCH] Styles fixes --- docs/data/components/select/SelectEmpty.js | 14 ++++++++++---- docs/data/components/select/SelectEmpty.tsx | 14 ++++++++++---- docs/data/components/select/SelectGroup.js | 13 ++++++++++--- docs/data/components/select/SelectGroup.tsx | 13 ++++++++++--- .../select/SelectIntroduction/system/index.js | 13 ++++++++++--- .../select/SelectIntroduction/system/index.tsx | 13 ++++++++++--- docs/next-env.d.ts | 2 +- .../mui-base/src/Select/Popup/useSelectPopup.ts | 1 - .../mui-base/src/utils/useAnchorPositioning.ts | 2 +- 9 files changed, 62 insertions(+), 23 deletions(-) diff --git a/docs/data/components/select/SelectEmpty.js b/docs/data/components/select/SelectEmpty.js index 34db84ab94..cc3a018cf5 100644 --- a/docs/data/components/select/SelectEmpty.js +++ b/docs/data/components/select/SelectEmpty.js @@ -70,12 +70,15 @@ const CheckIcon = styled(function CheckIcon(props) { height: 100%; `; +const triggerPaddingX = 6; +const popupPadding = 4; + const SelectTrigger = styled(Select.Trigger)` font-family: 'IBM Plex Sans', sans-serif; display: flex; align-items: center; justify-content: space-between; - padding: 6px 12px; + padding: ${triggerPaddingX}px 12px; border-radius: 5px; background-color: black; color: white; @@ -99,16 +102,19 @@ const SelectDropdownArrow = styled(Select.Icon)` `; const SelectPopup = styled(Select.Popup)` + overflow-y: auto; background-color: white; - padding: 4px; + padding: ${popupPadding}px; border-radius: 5px; box-shadow: 0 2px 4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(0 0 0 / 0.1); max-height: var(--available-height); outline: 0; - min-width: calc(var(--anchor-width) + 20px); - max-width: var(--available-width); + min-width: min( + calc(var(--available-width) - ${popupPadding * 2}px), + calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + ); `; const SelectOption = styled(Select.Option)` diff --git a/docs/data/components/select/SelectEmpty.tsx b/docs/data/components/select/SelectEmpty.tsx index 53aea67d6e..a7c51747cb 100644 --- a/docs/data/components/select/SelectEmpty.tsx +++ b/docs/data/components/select/SelectEmpty.tsx @@ -70,12 +70,15 @@ const CheckIcon = styled(function CheckIcon(props: React.SVGProps height: 100%; `; +const triggerPaddingX = 6; +const popupPadding = 4; + const SelectTrigger = styled(Select.Trigger)` font-family: 'IBM Plex Sans', sans-serif; display: flex; align-items: center; justify-content: space-between; - padding: 6px 12px; + padding: ${triggerPaddingX}px 12px; border-radius: 5px; background-color: black; color: white; @@ -99,16 +102,19 @@ const SelectDropdownArrow = styled(Select.Icon)` `; const SelectPopup = styled(Select.Popup)` + overflow-y: auto; background-color: white; - padding: 4px; + padding: ${popupPadding}px; border-radius: 5px; box-shadow: 0 2px 4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(0 0 0 / 0.1); max-height: var(--available-height); outline: 0; - min-width: calc(var(--anchor-width) + 20px); - max-width: var(--available-width); + min-width: min( + calc(var(--available-width) - ${popupPadding * 2}px), + calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + ); `; const SelectOption = styled(Select.Option)` diff --git a/docs/data/components/select/SelectGroup.js b/docs/data/components/select/SelectGroup.js index 7c2b9e0562..d512baa006 100644 --- a/docs/data/components/select/SelectGroup.js +++ b/docs/data/components/select/SelectGroup.js @@ -101,12 +101,15 @@ const gray = { 300: '#e5e7eb', }; +const triggerPaddingX = 6; +const popupPadding = 4; + const SelectTrigger = styled(Select.Trigger)` font-family: 'IBM Plex Sans', sans-serif; display: flex; align-items: center; justify-content: space-between; - padding: 6px 12px; + padding: ${triggerPaddingX}px 12px; border-radius: 5px; background-color: black; color: white; @@ -130,15 +133,19 @@ const SelectDropdownArrow = styled(Select.Icon)` `; const SelectPopup = styled(Select.Popup)` + overflow-y: auto; background-color: white; - padding: 4px; + padding: ${popupPadding}px; border-radius: 5px; box-shadow: 0 2px 4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(0 0 0 / 0.1); max-height: var(--available-height); outline: 0; - min-width: calc(var(--anchor-width) + 20px); + min-width: min( + calc(var(--available-width) - ${popupPadding * 2}px), + calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + ); `; const SelectOption = styled(Select.Option)` diff --git a/docs/data/components/select/SelectGroup.tsx b/docs/data/components/select/SelectGroup.tsx index a9117b43a1..405bfd1291 100644 --- a/docs/data/components/select/SelectGroup.tsx +++ b/docs/data/components/select/SelectGroup.tsx @@ -101,12 +101,15 @@ const gray = { 300: '#e5e7eb', }; +const triggerPaddingX = 6; +const popupPadding = 4; + const SelectTrigger = styled(Select.Trigger)` font-family: 'IBM Plex Sans', sans-serif; display: flex; align-items: center; justify-content: space-between; - padding: 6px 12px; + padding: ${triggerPaddingX}px 12px; border-radius: 5px; background-color: black; color: white; @@ -130,15 +133,19 @@ const SelectDropdownArrow = styled(Select.Icon)` `; const SelectPopup = styled(Select.Popup)` + overflow-y: auto; background-color: white; - padding: 4px; + padding: ${popupPadding}px; border-radius: 5px; box-shadow: 0 2px 4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(0 0 0 / 0.1); max-height: var(--available-height); outline: 0; - min-width: calc(var(--anchor-width) + 20px); + min-width: min( + calc(var(--available-width) - ${popupPadding * 2}px), + calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + ); `; const SelectOption = styled(Select.Option)` diff --git a/docs/data/components/select/SelectIntroduction/system/index.js b/docs/data/components/select/SelectIntroduction/system/index.js index 0853b1be5e..3b51d396da 100644 --- a/docs/data/components/select/SelectIntroduction/system/index.js +++ b/docs/data/components/select/SelectIntroduction/system/index.js @@ -66,12 +66,15 @@ const CheckIcon = styled(function CheckIcon(props) { height: 100%; `; +const triggerPaddingX = 6; +const popupPadding = 4; + const SelectTrigger = styled(Select.Trigger)` font-family: 'IBM Plex Sans', sans-serif; display: flex; align-items: center; justify-content: space-between; - padding: 6px 12px; + padding: ${triggerPaddingX}px 12px; border-radius: 5px; background-color: black; color: white; @@ -95,15 +98,19 @@ const SelectDropdownArrow = styled(Select.Icon)` `; const SelectPopup = styled(Select.Popup)` + overflow-y: auto; background-color: white; - padding: 4px; + padding: ${popupPadding}px; border-radius: 5px; box-shadow: 0 2px 4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(0 0 0 / 0.1); max-height: var(--available-height); outline: 0; - min-width: calc(var(--anchor-width) + 20px); + min-width: min( + calc(var(--available-width) - ${popupPadding * 2}px), + calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + ); `; const SelectOption = styled(Select.Option)` diff --git a/docs/data/components/select/SelectIntroduction/system/index.tsx b/docs/data/components/select/SelectIntroduction/system/index.tsx index 733688938d..4710badada 100644 --- a/docs/data/components/select/SelectIntroduction/system/index.tsx +++ b/docs/data/components/select/SelectIntroduction/system/index.tsx @@ -66,12 +66,15 @@ const CheckIcon = styled(function CheckIcon(props: React.SVGProps height: 100%; `; +const triggerPaddingX = 6; +const popupPadding = 4; + const SelectTrigger = styled(Select.Trigger)` font-family: 'IBM Plex Sans', sans-serif; display: flex; align-items: center; justify-content: space-between; - padding: 6px 12px; + padding: ${triggerPaddingX}px 12px; border-radius: 5px; background-color: black; color: white; @@ -95,15 +98,19 @@ const SelectDropdownArrow = styled(Select.Icon)` `; const SelectPopup = styled(Select.Popup)` + overflow-y: auto; background-color: white; - padding: 4px; + padding: ${popupPadding}px; border-radius: 5px; box-shadow: 0 2px 4px rgb(0 0 0 / 0.1), 0 0 0 1px rgb(0 0 0 / 0.1); max-height: var(--available-height); outline: 0; - min-width: calc(var(--anchor-width) + 20px); + min-width: min( + calc(var(--available-width) - ${popupPadding * 2}px), + calc(var(--anchor-width) + ${triggerPaddingX * 2 + popupPadding * 2}px) + ); `; const SelectOption = styled(Select.Option)` diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts index a4a7b3f5cf..4f11a03dc6 100644 --- a/docs/next-env.d.ts +++ b/docs/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information. +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/packages/mui-base/src/Select/Popup/useSelectPopup.ts b/packages/mui-base/src/Select/Popup/useSelectPopup.ts index 2da7a929cc..62c2f0d855 100644 --- a/packages/mui-base/src/Select/Popup/useSelectPopup.ts +++ b/packages/mui-base/src/Select/Popup/useSelectPopup.ts @@ -29,7 +29,6 @@ export function useSelectPopup(): useSelectPopup.ReturnValue { (externalProps = {}) => { return mergeReactProps<'div'>(getRootPopupProps(externalProps), { style: { - overflowY: 'auto', ...(pointerEvents === 'none' && { pointerEvents }), ...(alignMethod === 'item' && hasSelectedIndex && diff --git a/packages/mui-base/src/utils/useAnchorPositioning.ts b/packages/mui-base/src/utils/useAnchorPositioning.ts index 39ee87c080..c528db4f48 100644 --- a/packages/mui-base/src/utils/useAnchorPositioning.ts +++ b/packages/mui-base/src/utils/useAnchorPositioning.ts @@ -154,7 +154,7 @@ export function useAnchorPositioning( middleware.push( ...(!standardMode - ? [innerMiddleware] + ? [innerMiddleware, shiftMiddleware] : [ innerOptions.touchModality ? shift({ crossAxis: true, ...commonCollisionProps })