Skip to content

chore: use new spacing leafygreen numbers #6871

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 2 commits into from
Apr 18, 2025
Merged

chore: use new spacing leafygreen numbers #6871

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
45250d3
chore: use new spacing numbers with leafygreen
Anemy Apr 17, 2025
539c5b7
merge main
Anemy Apr 18, 2025
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
4 changes: 2 additions & 2 deletions packages/compass-aggregations/src/components/add-stage/add-stage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ import { PIPELINE_HELP_URI } from '../../constants';
const containerStyles = css({ textAlign: 'center' });

const linkContainerStyles = css({
marginTop: spacing[2],
marginBottom: spacing[5],
marginTop: spacing[200],
marginBottom: spacing[800],
position: 'relative',
});

Expand Down
6 changes: 3 additions & 3 deletions packages/compass-aggregations/src/components/aggregation-side-panel/feedback-link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import { css, Icon, Link, spacing } from '@mongodb-js/compass-components';
const FEEDBACK_URL = 'https://feedback.mongodb.com/forums/924283-compass';

const linkContainerStyles = css({
paddingTop: spacing[6],
paddingBottom: spacing[3],
paddingTop: spacing[1600],
paddingBottom: spacing[400],
textAlign: 'center',
});

const linkContentStyles = css({
display: 'flex',
alignItems: 'center',
gap: spacing[2],
gap: spacing[200],
});

export const FeedbackLink = () => {
Expand Down
18 changes: 9 additions & 9 deletions packages/compass-aggregations/src/components/aggregation-side-panel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,14 @@ import { useConnectionInfoRef } from '@mongodb-js/compass-connections/provider';
const containerStyles = css({
height: '100%',

paddingTop: spacing[1],
paddingTop: spacing[100],
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
borderBottom: 'none',
backgroundColor: palette.gray.light3,
display: 'flex',
flexDirection: 'column',
gap: spacing[2],
gap: spacing[200],
});

const darkModeContainerStyles = css({
Expand All @@ -55,19 +55,19 @@ const titleStylesLight = css({
});

const headerContainerStyles = css({
paddingLeft: spacing[2],
paddingRight: spacing[2],
paddingLeft: spacing[200],
paddingRight: spacing[200],
});

const contentStyles = css({
display: 'flex',
flexDirection: 'column',
gap: spacing[2],
gap: spacing[200],
overflow: 'auto',
paddingTop: spacing[1],
paddingLeft: spacing[2],
paddingRight: spacing[2],
paddingBottom: spacing[3],
paddingTop: spacing[100],
paddingLeft: spacing[200],
paddingRight: spacing[200],
paddingBottom: spacing[400],
});

type AggregationSidePanelProps = {
Expand Down
2 changes: 1 addition & 1 deletion ...ations/src/components/aggregation-side-panel/stage-wizard-use-cases/group/basic-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { FieldCombobox } from '../field-combobox';
const containerStyles = css({
display: 'flex',
alignItems: 'center',
gap: spacing[2],
gap: spacing[200],
});

const comboboxStyles = css({ width: '350px' });
Expand Down
4 changes: 2 additions & 2 deletions .../components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-statistics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,15 +45,15 @@ function isSupportedAccumulator(c: Completion): c is SupportedAccumulator {
const containerStyles = css({
display: 'flex',
flexDirection: 'column',
gap: spacing[2],
gap: spacing[200],
width: 'max-content',
maxWidth: '100%',
});

const groupRowStyles = css({
display: 'flex',
alignItems: 'center',
gap: spacing[2],
gap: spacing[200],
});

const groupLabelStyles = css({
Expand Down
4 changes: 2 additions & 2 deletions .../src/components/aggregation-side-panel/stage-wizard-use-cases/group/group-with-subset.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,14 @@ function isSupportedAccumulatorKey(
const containerStyles = css({
display: 'flex',
flexDirection: 'column',
gap: spacing[2],
gap: spacing[200],
});

const formGroupStyles = css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: spacing[2],
gap: spacing[200],
});

const groupLabelStyles = css({
Expand Down
4 changes: 2 additions & 2 deletions ...gregations/src/components/aggregation-side-panel/stage-wizard-use-cases/lookup/lookup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ type LookupFormState = {
const containerStyles = css({
display: 'flex',
flexDirection: 'column',
gap: spacing[2],
gap: spacing[200],
});

const titleStyles = css({
Expand All @@ -37,7 +37,7 @@ const titleStyles = css({

const formGroup = css({
display: 'flex',
gap: spacing[2],
gap: spacing[200],
alignItems: 'center',
});

Expand Down
2 changes: 1 addition & 1 deletion ...c/components/aggregation-side-panel/stage-wizard-use-cases/match/match-condition-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ const conditionContainerStyles = css({
display: 'flex',
width: '100%',
alignItems: 'center',
gap: spacing[2],
gap: spacing[200],
});
const fieldComboboxStyles = css({ flex: '1 1 50%' });
const operatorSelectStyles = css({ flex: '1 0 70px' });
Expand Down
14 changes: 7 additions & 7 deletions ...s/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match-group-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,18 +94,18 @@ export const createGroup = makeCreateGroup(createCondition);
// Components - Group
const baseGroupStyles = css({
display: 'flex',
gap: spacing[3],
gap: spacing[400],
flexDirection: 'column',
});

const nestedGroupBaseStyles = css({
padding: spacing[4],
paddingTop: spacing[4] / 2,
borderRadius: spacing[4] / 2,
padding: spacing[600],
paddingTop: spacing[600] / 2,
borderRadius: spacing[600] / 2,
});

const nestedGroupContainerStyles = css({
gap: spacing[3],
gap: spacing[400],
});

const oddNestedGroupStylesLight = css({
Expand All @@ -128,7 +128,7 @@ const groupHeaderStyles = css({
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: spacing[3],
gap: spacing[400],
});

const MatchGroupForm = ({
Expand All @@ -147,7 +147,7 @@ const MatchGroupForm = ({
// condition list in nested groups", we calculate the right padding
// dynamically using the nesting depth and current nesting level.
const conditionListStyles: CSSProperties = {
paddingRight: (nestingDepth - nestingLevel) * spacing[4],
paddingRight: (nestingDepth - nestingLevel) * spacing[600],
};

const handleOperatorChange = (operator: LogicalOperator) => {
Expand Down
2 changes: 1 addition & 1 deletion ...aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/match/match.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export function mapMatchFormStateToMatchStage(matchGroup: MatchGroup) {
const formContainerStyles = css({
display: 'flex',
flexDirection: 'column',
gap: spacing[4],
gap: spacing[600],
width: '100%',
maxWidth: '1000px',
});
Expand Down
4 changes: 2 additions & 2 deletions ...egations/src/components/aggregation-side-panel/stage-wizard-use-cases/project/project.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,14 @@ export const mapProjectFormStateToStageValue = ({
const containerStyles = css({
display: 'flex',
flexDirection: 'column',
gap: spacing[2],
gap: spacing[200],
});

const formGroupStyles = css({
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
gap: spacing[2],
gap: spacing[200],
});

const selectStyles = css({ minWidth: '120px' });
Expand Down
4 changes: 2 additions & 2 deletions ...tions/src/components/aggregation-side-panel/stage-wizard-use-cases/search/text-search.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ type TextSearchState = {
};

const containerStyles = css({
gap: spacing[2],
gap: spacing[200],
width: '100%',
maxWidth: '800px',
display: 'grid',
Expand All @@ -49,7 +49,7 @@ const rowStyles = css({
const inputWithLabelStyles = css({
display: 'flex',
alignItems: 'center',
gap: spacing[2],
gap: spacing[200],
});

const labelStyles = css({
Expand Down
4 changes: 2 additions & 2 deletions ...s-aggregations/src/components/aggregation-side-panel/stage-wizard-use-cases/sort/sort.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ type SortFieldState = {
const containerStyles = css({
display: 'flex',
flexDirection: 'column',
gap: spacing[2],
gap: spacing[200],
width: 'max-content',
maxWidth: '100%',
});
Expand All @@ -35,7 +35,7 @@ const formGroupStyles = css({
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
gap: spacing[2],
gap: spacing[200],
});

const labelStyles = css({
Expand Down
4 changes: 2 additions & 2 deletions ...gregations/src/components/aggregation-side-panel/stage-wizard-use-cases/use-case-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ type UseCaseCardProps = DraggedUseCase & {
};

const cardStyles = css({
padding: `${spacing[2]}px ${spacing[3]}px`,
padding: `${spacing[200]}px ${spacing[400]}px`,
textAlign: 'left',
width: '100%',
});
Expand All @@ -36,7 +36,7 @@ const cardStylesDropping = css({

const cardBodyStyles = css({
display: 'inline',
marginRight: spacing[2],
marginRight: spacing[200],
});

type UseCaseCardLayoutProps = DraggedUseCase & {
Expand Down
2 changes: 1 addition & 1 deletion packages/compass-aggregations/src/components/create-view-modal/create-view-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { useConnectionsListRef } from '@mongodb-js/compass-connections/provider'

const progressContainerStyles = css({
display: 'flex',
gap: spacing[2],
gap: spacing[200],
alignItems: 'center',
});

Expand Down
8 changes: 4 additions & 4 deletions packages/compass-aggregations/src/components/focus-mode/focus-mode-modal-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,13 @@ type FocusModeModalHeaderProps = {
const controlsContainerStyles = css({
display: 'flex',
alignItems: 'center',
gap: spacing[3],
gap: spacing[400],
});

const controlContainerStyles = css({
display: 'flex',
alignItems: 'center',
gap: spacing[2],
gap: spacing[200],
});

const fakeToggleLabelStyles = css({
Expand All @@ -73,7 +73,7 @@ const menuStyles = css({
const tooltipContentStyles = css({
display: 'flex',
alignItems: 'center',
gap: spacing[3],
gap: spacing[400],
});

const tooltipContentItemStyles = css({
Expand Down Expand Up @@ -167,7 +167,7 @@ export const FocusModeModalHeader: React.FunctionComponent<
return label.length;
})
)
)}ch + ${spacing[5]}px)`,
)}ch + ${spacing[800]}px)`,
};

return (
Expand Down
10 changes: 5 additions & 5 deletions packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,22 @@ const containerStyles = css({
height: '100%',
display: 'flex',
flexDirection: 'column',
gap: spacing[3],
gap: spacing[400],
});

const headerStyles = css({
display: 'flex',
justifyContent: 'flex-start',
gap: spacing[2],
marginLeft: spacing[2],
marginRight: spacing[2],
gap: spacing[200],
marginLeft: spacing[200],
marginRight: spacing[200],
flexWrap: 'wrap',
});

const editorStyles = css({
flex: 1,
overflowY: 'auto',
paddingBottom: spacing[3],
paddingBottom: spacing[400],
});

export const FocusModeStageEditor = ({
Expand Down
8 changes: 4 additions & 4 deletions packages/compass-aggregations/src/components/focus-mode/focus-mode-stage-preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,14 @@ const containerStyles = css({
display: 'flex',
flexDirection: 'column',
height: '100%',
gap: spacing[2],
gap: spacing[200],
});

const headerStyles = css({
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-start',
marginBottom: spacing[2],
marginBottom: spacing[200],
flexWrap: 'wrap',
});

Expand All @@ -57,7 +57,7 @@ const centerStyles = css({
textAlign: 'center',
});

const messageStyles = css({ marginTop: spacing[3] });
const messageStyles = css({ marginTop: spacing[400] });

const documentListStyles = css({
overflowY: 'auto',
Expand All @@ -73,7 +73,7 @@ const pipelineOutputMenuStyles = css({
const loaderStyles = css({
display: 'flex',
alignItems: 'center',
gap: spacing[2],
gap: spacing[200],
});

type FocusModePreviewProps = {
Expand Down
Loading