Skip to content

Commit

Permalink
Styles fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@atomiks
atomiks committed Sep 19, 2024
1 parent a4334d8 commit 28ffec5
Show file tree
Hide file tree
Showing 9 changed files with 62 additions and 23 deletions.
14 changes: 10 additions & 4 deletions docs/data/components/select/SelectEmpty.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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)`
Expand Down
14 changes: 10 additions & 4 deletions docs/data/components/select/SelectEmpty.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,12 +70,15 @@ const CheckIcon = styled(function CheckIcon(props: React.SVGProps<SVGSVGElement>
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;
Expand All @@ -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)`
Expand Down
13 changes: 10 additions & 3 deletions docs/data/components/select/SelectGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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)`
Expand Down
13 changes: 10 additions & 3 deletions docs/data/components/select/SelectGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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)`
Expand Down
13 changes: 10 additions & 3 deletions docs/data/components/select/SelectIntroduction/system/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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)`
Expand Down
13 changes: 10 additions & 3 deletions docs/data/components/select/SelectIntroduction/system/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,15 @@ const CheckIcon = styled(function CheckIcon(props: React.SVGProps<SVGSVGElement>
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;
Expand All @@ -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)`
Expand Down
2 changes: 1 addition & 1 deletion docs/next-env.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,4 @@
/// <reference types="next/image-types/global" />

// 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.
1 change: 0 additions & 1 deletion packages/mui-base/src/Select/Popup/useSelectPopup.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ export function useSelectPopup(): useSelectPopup.ReturnValue {
(externalProps = {}) => {
return mergeReactProps<'div'>(getRootPopupProps(externalProps), {
style: {
overflowY: 'auto',
...(pointerEvents === 'none' && { pointerEvents }),
...(alignMethod === 'item' &&
hasSelectedIndex &&
Expand Down
2 changes: 1 addition & 1 deletion packages/mui-base/src/utils/useAnchorPositioning.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export function useAnchorPositioning(

middleware.push(
...(!standardMode
? [innerMiddleware]
? [innerMiddleware, shiftMiddleware]
: [
innerOptions.touchModality
? shift({ crossAxis: true, ...commonCollisionProps })
Expand Down

0 comments on commit 28ffec5

Please sign in to comment.