diff --git a/package-lock.json b/package-lock.json index c2ecda406c5..ef909b0200d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -96498,6 +96498,7 @@ "version": "0.20.0", "license": "SSPL", "dependencies": { + "@react-aria/utils": "^3.11.0", "lodash": "^4.17.15" }, "devDependencies": { @@ -115264,6 +115265,7 @@ "@mongodb-js/compass-logging": "^0.8.0", "@mongodb-js/databases-collections-list": "^0.4.0", "@mongodb-js/mocha-config-compass": "^0.9.0", + "@react-aria/utils": "^3.11.0", "autoprefixer": "^9.7.4", "babel-loader": "^8.2.2", "chai": "^4.2.0", diff --git a/packages/compass-components/src/compass-font-sizes.ts b/packages/compass-components/src/compass-font-sizes.ts new file mode 100644 index 00000000000..2545505b43a --- /dev/null +++ b/packages/compass-components/src/compass-font-sizes.ts @@ -0,0 +1 @@ +export const defaultFontSize = '14px'; diff --git a/packages/compass-components/src/compass-ui-colors.tsx b/packages/compass-components/src/compass-ui-colors.ts similarity index 100% rename from packages/compass-components/src/compass-ui-colors.tsx rename to packages/compass-components/src/compass-ui-colors.ts diff --git a/packages/compass-components/src/components/accordion.spec.tsx b/packages/compass-components/src/components/accordion.spec.tsx index 3d4fb18b08f..a2adb3e3641 100644 --- a/packages/compass-components/src/components/accordion.spec.tsx +++ b/packages/compass-components/src/components/accordion.spec.tsx @@ -26,4 +26,15 @@ describe('Accordion Component', function () { fireEvent.click(button); expect(screen.getByText('Hello World')).to.be.visible; }); + + it('should close the accordion after clicking to open then close', function () { + renderAccordion(); + + expect(screen.getByTestId('my-test-id')).to.exist; + const button = screen.getByText('Accordion Test'); + fireEvent.click(button); + expect(screen.getByText('Hello World')).to.be.visible; + fireEvent.click(button); + expect(screen.queryByText('Hello World')).to.not.exist; + }); }); diff --git a/packages/compass-components/src/components/accordion.tsx b/packages/compass-components/src/components/accordion.tsx index 78f9399e5b2..d0ea0b8508a 100644 --- a/packages/compass-components/src/components/accordion.tsx +++ b/packages/compass-components/src/components/accordion.tsx @@ -5,13 +5,11 @@ import Icon from '@leafygreen-ui/icon'; import { uiColors } from '@leafygreen-ui/palette'; import { useId } from '@react-aria/utils'; -const labelStyles = css({ - padding: 0, - margin: 0, - fontWeight: 'bold', -}); +import { defaultFontSize } from '../compass-font-sizes'; const buttonStyles = css({ + fontWeight: 'bold', + fontSize: defaultFontSize, display: 'flex', alignItems: 'center', border: 'none', @@ -46,26 +44,25 @@ function Accordion( const regionId = useId('region-'); const labelId = useId('label-'); return ( -
+ <>
-

- -

+
{open && ( @@ -73,7 +70,7 @@ function Accordion( {props.children}
)} - + ); } diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts index 280dedcc739..d581a5d1199 100644 --- a/packages/compass-components/src/index.ts +++ b/packages/compass-components/src/index.ts @@ -46,6 +46,7 @@ export { } from '@leafygreen-ui/logo'; export { Menu, MenuSeparator, MenuItem } from '@leafygreen-ui/menu'; export { uiColors } from '@leafygreen-ui/palette'; +export * as compassFontSizes from './compass-font-sizes'; export * as compassUIColors from './compass-ui-colors'; export { default as Portal } from '@leafygreen-ui/portal'; export { RadioBox, Size as RadioBoxSize } from '@leafygreen-ui/radio-box-group'; diff --git a/packages/compass-connections/src/components/connection-list/connection-list.tsx b/packages/compass-connections/src/components/connection-list/connection-list.tsx index 22a3372a498..dbcb610f9c6 100644 --- a/packages/compass-connections/src/components/connection-list/connection-list.tsx +++ b/packages/compass-connections/src/components/connection-list/connection-list.tsx @@ -23,27 +23,17 @@ const newConnectionButtonContainerStyles = css({ const newConnectionButtonStyles = css({ border: 'none', - height: 'inherit', + fontWeight: 'bold', borderRadius: 0, + svg: { + color: uiColors.white, + }, ':hover': { border: 'none', boxShadow: 'none', }, }); -const newConnectionButtonIcon = css({ - fill: uiColors.white, - marginLeft: spacing[3], -}); - -const newConnectionButtonContent = css({ - fontWeight: 'bold', - height: spacing[6], - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', -}); - const sectionHeaderStyles = css({ marginTop: spacing[4], marginBottom: spacing[3], @@ -165,11 +155,9 @@ function ConnectionList({ onClick={createNewConnection} size="large" data-testid="new-connection-button" + rightGlyph={} > -
- New Connection - -
+ New Connection
diff --git a/packages/compass-connections/src/components/connection-list/connection.tsx b/packages/compass-connections/src/components/connection-list/connection.tsx index ab245c3b6a5..83472f4f4ee 100644 --- a/packages/compass-connections/src/components/connection-list/connection.tsx +++ b/packages/compass-connections/src/components/connection-list/connection.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { H3, Description, + compassFontSizes, spacing, uiColors, css, @@ -76,8 +77,7 @@ const connectionButtonStyles = css({ const connectionTitleStyles = css({ color: uiColors.white, - fontWeight: 'bold', - fontSize: '14px', + fontSize: compassFontSizes.defaultFontSize, lineHeight: '20px', margin: 0, flexGrow: 1, diff --git a/packages/compass-connections/src/components/connections.tsx b/packages/compass-connections/src/components/connections.tsx index a5c71c6ee57..d3a3e534c3d 100644 --- a/packages/compass-connections/src/components/connections.tsx +++ b/packages/compass-connections/src/components/connections.tsx @@ -48,6 +48,7 @@ const formContainerStyles = css({ flexGrow: 1, display: 'flex', padding: spacing[4], + margin: 0, paddingBottom: spacing[3], flexDirection: 'row', flexWrap: 'wrap', diff --git a/packages/compass-connections/src/components/form-help/form-help.tsx b/packages/compass-connections/src/components/form-help/form-help.tsx index a243323c6aa..aa6f6061ff7 100644 --- a/packages/compass-connections/src/components/form-help/form-help.tsx +++ b/packages/compass-connections/src/components/form-help/form-help.tsx @@ -4,8 +4,9 @@ import { ButtonSize, ButtonVariant, Subtitle, - Description, + Body, Link, + compassFontSizes, spacing, uiColors, css, @@ -35,13 +36,11 @@ const sectionContainerStyles = css({ }); const titleStyles = css({ - fontWeight: 'bold', - fontSize: 14, + fontSize: compassFontSizes.defaultFontSize, }); const descriptionStyles = css({ marginTop: spacing[2], - fontSize: 14, }); const createClusterContainerStyles = css({ @@ -66,13 +65,13 @@ function FormHelp(): React.ReactElement { New to Compass and don't have a cluster? - + If you don't already have a cluster, you can create one for free using{' '} MongoDB Atlas - +