Skip to content

Commit 5060ba8

Browse files
mcasimirmcasimir
authored
chore: update all components except code to the latest version COMPASS-6317 (#3870)
* chore: update all components except code to new LG * use glyph from segmented control * use xsmall variant for textinput
1 parent 3d3d307 commit 5060ba8

File tree

13 files changed

+1768
-525
lines changed

13 files changed

+1768
-525
lines changed

‎package-lock.json‎

Lines changed: 1692 additions & 446 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/compass-aggregations/src/components/atlas-stage-preview.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
Button,
44
css,
55
spacing,
6-
AtlasLogo,
6+
AtlasNavGraphic,
77
Body,
88
} from '@mongodb-js/compass-components';
99
import createLoggerAndTelemetry from '@mongodb-js/compass-logging';
@@ -35,7 +35,7 @@ export const AtlastStagePreivew = ({
3535
className={atlasContainerStyles}
3636
data-testid="atlas-only-stage-preview"
3737
>
38-
<AtlasLogo />
38+
<AtlasNavGraphic />
3939
<Body
4040
data-testid="stage-preview-missing-search-support"
4141
className={atlasTextStyles}

‎packages/compass-aggregations/src/components/pipeline-results-workspace/pipeline-results-view-controls.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,8 @@ const PipelineResultsViewControls: React.FunctionComponent<{
4444
value={value}
4545
onChange={onChange as (newValue: string) => void}
4646
>
47-
<SegmentedControlOption aria-label="Document list" value="document">
48-
<Icon size="small" glyph="Menu"></Icon>
49-
</SegmentedControlOption>
50-
<SegmentedControlOption aria-label="JSON list" value="json">
51-
<Icon size="small" glyph="CurlyBraces"></Icon>
52-
</SegmentedControlOption>
47+
<SegmentedControlOption aria-label="Document list" value="document" glyph={<Icon glyph="Menu"></Icon>} />
48+
<SegmentedControlOption aria-label="JSON list" value="json" glyph={<Icon glyph="CurlyBraces"></Icon>} />
5349
</SegmentedControl>
5450
</div>
5551
);

‎packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-settings/pipeline-extra-settings.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,16 +92,16 @@ export const PipelineExtraSettings: React.FunctionComponent<
9292
disabled={isPipelineModeDisabled}
9393
data-testid="pipeline-builder-toggle-builder-ui"
9494
value="builder-ui"
95+
glyph={<Icon glyph="CurlyBraces"></Icon>}
9596
>
96-
<Icon size="small" glyph="CurlyBraces"></Icon>
9797
Stages
9898
</SegmentedControlOption>
9999
<SegmentedControlOption
100100
disabled={isPipelineModeDisabled}
101101
data-testid="pipeline-builder-toggle-as-text"
102102
value="as-text"
103+
glyph={<Icon glyph="Code"></Icon>}
103104
>
104-
<Icon size="small" glyph="Code"></Icon>
105105
Text
106106
</SegmentedControlOption>
107107
</SegmentedControl>

‎packages/compass-aggregations/src/components/stage-editor-toolbar/stage-operator-select.jsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,21 @@ const descriptionWidth = spacing[5] * 14;
1414
const stageNameWidth = spacing[4] * 8;
1515
const dropdownWidth = stageNameWidth + descriptionWidth;
1616

17+
const inputHeight = spacing[4] - 2; // match other xs controls
1718
const comboboxStyles = css({
1819
marginLeft: spacing[2],
20+
marginRight: spacing[2],
1921
width: inputWidth,
2022
'& [role="combobox"]': {
21-
height: spacing[4] - 2 // match other xs controls
23+
padding: 0,
24+
paddingLeft: spacing[1],
25+
height: inputHeight,
26+
'& > div': {
27+
minHeight: inputHeight,
28+
},
29+
'& input': {
30+
height: inputHeight - 2
31+
}
2232
}
2333
});
2434

‎packages/compass-components/package.json‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -31,39 +31,39 @@
3131
"reformat": "npm run prettier -- --write ."
3232
},
3333
"dependencies": {
34-
"@leafygreen-ui/badge": "^6.1.2",
35-
"@leafygreen-ui/banner": "^5.0.3",
36-
"@leafygreen-ui/button": "^16.1.1",
37-
"@leafygreen-ui/card": "^7.1.1",
38-
"@leafygreen-ui/checkbox": "^10.1.1",
34+
"@leafygreen-ui/badge": "^8.0.1",
35+
"@leafygreen-ui/banner": "^7.0.1",
36+
"@leafygreen-ui/button": "^19.0.1",
37+
"@leafygreen-ui/card": "^9.0.2",
38+
"@leafygreen-ui/checkbox": "^12.0.2",
3939
"@leafygreen-ui/code": "^12.1.1",
40-
"@leafygreen-ui/combobox": "^3.1.1",
41-
"@leafygreen-ui/confirmation-modal": "^3.1.1",
40+
"@leafygreen-ui/combobox": "^5.0.2",
41+
"@leafygreen-ui/confirmation-modal": "^3.1.4",
4242
"@leafygreen-ui/emotion": "^4.0.3",
43-
"@leafygreen-ui/icon": "^11.11.1",
44-
"@leafygreen-ui/icon-button": "^13.2.1",
45-
"@leafygreen-ui/leafygreen-provider": "^2.3.5",
46-
"@leafygreen-ui/logo": "^6.3.0",
47-
"@leafygreen-ui/marketing-modal": "^3.0.7",
48-
"@leafygreen-ui/menu": "^16.0.0",
49-
"@leafygreen-ui/modal": "^10.1.2",
43+
"@leafygreen-ui/icon": "^11.12.1",
44+
"@leafygreen-ui/icon-button": "^15.0.1",
45+
"@leafygreen-ui/leafygreen-provider": "^3.1.0",
46+
"@leafygreen-ui/logo": "^7.0.0",
47+
"@leafygreen-ui/marketing-modal": "^3.0.10",
48+
"@leafygreen-ui/menu": "^19.0.1",
49+
"@leafygreen-ui/modal": "^12.0.1",
5050
"@leafygreen-ui/palette": "^3.4.4",
51-
"@leafygreen-ui/pipeline": "^3.0.0",
52-
"@leafygreen-ui/popover": "^9.1.1",
53-
"@leafygreen-ui/portal": "^4.0.6",
54-
"@leafygreen-ui/radio-box-group": "^9.1.1",
55-
"@leafygreen-ui/radio-group": "^8.1.1",
56-
"@leafygreen-ui/segmented-control": "^3.1.1",
57-
"@leafygreen-ui/select": "^7.1.2",
58-
"@leafygreen-ui/table": "^6.1.1",
59-
"@leafygreen-ui/tabs": "^9.2.1",
60-
"@leafygreen-ui/text-area": "^6.2.1",
61-
"@leafygreen-ui/text-input": "^10.2.1",
62-
"@leafygreen-ui/toast": "^2.0.3",
63-
"@leafygreen-ui/toggle": "^8.0.5",
64-
"@leafygreen-ui/tokens": "^1.3.4",
65-
"@leafygreen-ui/tooltip": "^7.1.3",
66-
"@leafygreen-ui/typography": "^13.2.1",
51+
"@leafygreen-ui/pipeline": "^5.0.1",
52+
"@leafygreen-ui/popover": "^11.0.1",
53+
"@leafygreen-ui/portal": "^4.0.7",
54+
"@leafygreen-ui/radio-box-group": "^12.0.1",
55+
"@leafygreen-ui/radio-group": "^10.0.2",
56+
"@leafygreen-ui/segmented-control": "^7.0.0",
57+
"@leafygreen-ui/select": "^10.1.0",
58+
"@leafygreen-ui/table": "^9.0.1",
59+
"@leafygreen-ui/tabs": "^11.0.1",
60+
"@leafygreen-ui/text-area": "^8.0.1",
61+
"@leafygreen-ui/text-input": "^12.1.0",
62+
"@leafygreen-ui/toast": "^4.0.1",
63+
"@leafygreen-ui/toggle": "^10.0.2",
64+
"@leafygreen-ui/tokens": "^1.4.0",
65+
"@leafygreen-ui/tooltip": "^9.0.2",
66+
"@leafygreen-ui/typography": "^15.1.0",
6767
"@mongodb-js/compass-logging": "^1.1.1",
6868
"@react-aria/interactions": "^3.9.1",
6969
"@react-aria/tooltip": "^3.2.1",

‎packages/compass-components/src/components/leafygreen.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ import { default as LeafyGreenIcon } from '@leafygreen-ui/icon';
1919
import type { Size as LeafyGreenIconSize } from '@leafygreen-ui/icon';
2020
import IconButton from '@leafygreen-ui/icon-button';
2121
import {
22-
AtlasLogo,
23-
AtlasLogoMark,
22+
AtlasNavGraphic,
2423
MongoDBLogoMark,
2524
MongoDBLogo,
2625
} from '@leafygreen-ui/logo';
@@ -80,10 +79,11 @@ const Icon = ({
8079
return <LeafyGreenIcon size={size} {...rest} />;
8180
};
8281

82+
Icon.isGlyph = true;
83+
8384
// 3. Export the leafygreen components.
8485
export {
85-
AtlasLogo,
86-
AtlasLogoMark,
86+
AtlasNavGraphic,
8787
Badge,
8888
Banner,
8989
Button,

‎packages/compass-crud/src/components/crud-toolbar.tsx‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -244,23 +244,20 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
244244
data-testid="toolbar-view-list"
245245
aria-label="Document list"
246246
value="List"
247-
>
248-
<Icon glyph="Menu" />
249-
</SegmentedControlOption>
247+
glyph={<Icon glyph="Menu" />}
248+
></SegmentedControlOption>
250249
<SegmentedControlOption
251250
data-testid="toolbar-view-json"
252251
aria-label="E-JSON View"
253252
value="JSON"
254-
>
255-
<Icon glyph="CurlyBraces" />
256-
</SegmentedControlOption>
253+
glyph={<Icon glyph="CurlyBraces" />}
254+
></SegmentedControlOption>
257255
<SegmentedControlOption
258256
data-testid="toolbar-view-table"
259257
aria-label="Table View"
260258
value="Table"
261-
>
262-
<Icon glyph="Table" />
263-
</SegmentedControlOption>
259+
glyph={<Icon glyph="Table" />}
260+
></SegmentedControlOption>
264261
</SegmentedControl>
265262
</div>
266263
</div>

‎packages/compass-crud/src/components/insert-document-dialog.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -287,14 +287,13 @@ class InsertDocumentDialog extends React.PureComponent<
287287
data-testid="insert-document-dialog-view-json"
288288
aria-label="E-JSON View"
289289
value="JSON"
290+
glyph={<Icon glyph="CurlyBraces" />}
290291
onClick={(evt) => {
291292
// We override the `onClick` functionality to prevent form submission.
292293
// The value changing occurs in the `onChange` in the `SegmentedControl`.
293294
evt.preventDefault();
294295
}}
295-
>
296-
<Icon glyph="CurlyBraces" />
297-
</SegmentedControlOption>
296+
></SegmentedControlOption>
298297
<SegmentedControlOption
299298
disabled={this.hasErrors()}
300299
data-testid="insert-document-dialog-view-list"
@@ -305,9 +304,8 @@ class InsertDocumentDialog extends React.PureComponent<
305304
// The value changing occurs in the `onChange` in the `SegmentedControl`.
306305
evt.preventDefault();
307306
}}
308-
>
309-
<Icon glyph="Menu" />
310-
</SegmentedControlOption>
307+
glyph={<Icon glyph="Menu" />}
308+
></SegmentedControlOption>
311309
</SegmentedControl>
312310
</div>
313311
<div className={documentViewContainer} id={documentViewId}>

‎packages/compass-crud/src/components/table-view/cell-editor.tsx‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,9 @@ const BEM_BASE = 'table-view-cell-editor';
6666
*/
6767
const VALUE_CLASS = 'editable-element-value';
6868

69-
const textInputSizeHackStyle = css({
69+
const textInputStyle = css({
7070
width: spacing[6] * 2,
71-
'& input': {
72-
height: 22,
73-
},
71+
marginRight: spacing[1],
7472
});
7573

7674
const actionsStyle = css({
@@ -428,10 +426,8 @@ class CellEditor
428426
if (this.newField && this.element?.currentKey === '$new') {
429427
return (
430428
<TextInput
431-
className={cx(
432-
textInputSizeHackStyle,
433-
css({ marginRight: spacing[1] })
434-
)}
429+
className={textInputStyle}
430+
sizeVariant="xsmall"
435431
data-testid="table-view-cell-editor-fieldname-input"
436432
value={this.state.fieldName}
437433
placeholder="Field Name"
@@ -481,14 +477,14 @@ class CellEditor
481477
<div>
482478
<span className={this.wrapperStyle()}>
483479
<TextInput
484-
className={textInputSizeHackStyle}
480+
className={textInputStyle}
485481
data-testid="table-view-cell-editor-value-input"
486-
// @ts-expect-error TODO: size="small" is not an acceptable size
487-
size="xsmall"
482+
sizeVariant="xsmall"
488483
onChange={this.handleInputChange.bind(this)}
489484
onPaste={this.handlePaste.bind(this)}
490485
value={this.editor().value()}
491486
placeholder="Value"
487+
aria-labelledby=""
492488
></TextInput>
493489
</span>
494490
</div>

0 commit comments

Comments
 (0)