Skip to content

chore(compass-components): less document whitespace #6439

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 5, 2024
Merged

chore(compass-components): less document whitespace #6439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
58898df
Decreasing padding around icon in expand button
kraenhansen Sep 19, 2024
275db19
Decrease padding of actions group container
kraenhansen Nov 4, 2024
8732753
Remove 10px from left side of trash icon
kraenhansen Nov 4, 2024
9588014
Shave 4px off between + and ▶
kraenhansen Nov 4, 2024
3bc5471
Update "show more" offset
kraenhansen Nov 4, 2024
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
17 changes: 12 additions & 5 deletions packages/compass-components/src/components/document-list/document-actions-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ const actionsGroupContainer = css({
position: 'absolute',
display: 'flex',
alignItems: 'center',
gap: spacing[2],
gap: spacing[200],
width: '100%',
top: spacing[2] + spacing[1],
paddingLeft: spacing[3],
paddingRight: spacing[3],
top: spacing[300],
paddingLeft: spacing[300],
paddingRight: spacing[300],
pointerEvents: 'none',
});

Expand Down Expand Up @@ -44,6 +44,13 @@ const actionsGroupSignalPopover = css({
display: 'block !important',
});

const expandButton = css({
'& > div:has(svg)': {
Copy link
Member

@Anemy Anemy Nov 4, 2024

Choose a reason for hiding this comment

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

This does feel brittle, if something changes in how leafygreen orientates their buttons internally this could start looking different. Not sure if there's a better way to do this though, looking at the docs I don't think this is exposed for folks. Looks fine, mostly calling it out in case there's a way anyone else knows of, and also something we can watch out for when updating leafygreen deps.

Copy link
Contributor Author

@kraenhansen kraenhansen Nov 5, 2024

Choose a reason for hiding this comment

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

Yeah - I agree this is brittle. I should have made that more obvious in my PR: I've proposed a change to LG to upstream this mongodb/leafygreen-ui#2535.

paddingLeft: 3,
paddingRight: 3,
},
});

function useElementParentHoverState<T extends HTMLElement>(
ref: React.RefObject<T>
): boolean {
Expand Down Expand Up @@ -159,7 +166,7 @@ const DocumentActionsGroup: React.FunctionComponent<
aria-pressed={expanded}
data-testid="expand-document-button"
onClick={onExpand}
className={actionsGroupItem}
className={cx(actionsGroupItem, expandButton)}
tooltipText={expanded ? 'Collapse all' : 'Expand all'}
/>
)}
Expand Down
12 changes: 6 additions & 6 deletions packages/compass-components/src/components/document-list/element.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,8 +192,8 @@ const expandButton = css({

const hadronElement = css({
display: 'flex',
paddingLeft: spacing[2],
paddingRight: spacing[2],
paddingLeft: spacing[50],
paddingRight: spacing[50],
marginTop: 1,
});

Expand Down Expand Up @@ -239,7 +239,7 @@ const elementRemovedDarkMode = css({

const elementActions = css({
flex: 'none',
width: spacing[3],
width: spacing[300],
position: 'relative',
});

Expand Down Expand Up @@ -364,7 +364,7 @@ const elementKeyDarkMode = css({
});

const calculateElementSpacerWidth = (editable: boolean, level: number) => {
return (editable ? spacing[200] : 0) + spacing[400] * level;
return (editable ? spacing[100] : 0) + spacing[400] * level;
};

export const calculateShowMoreToggleOffset = ({
Expand All @@ -377,10 +377,10 @@ export const calculateShowMoreToggleOffset = ({
alignWithNestedExpandIcon: boolean;
}) => {
// the base padding that we have on all elements rendered in the document
const BASE_PADDING_LEFT = spacing[200];
const BASE_PADDING_LEFT = spacing[50];
const OFFSET_WHEN_EDITABLE = editable
? // space taken by element actions
spacing[400] +
spacing[300] +
// space and margin taken by line number element
spacing[400] +
spacing[100] +
Expand Down
Loading