Skip to content

fix: align elements on the create collection modal COMPASS-5921 #3212

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 8 commits into from
Jun 29, 2022
Merged

fix: align elements on the create collection modal COMPASS-5921 #3212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
01a633a
fix: align elements on the create collection modal COMPASS-5921
alenakhineika Jun 27, 2022
5e2dead
Merge remote-tracking branch 'origin/main' into COMPASS-5921-create-c…
alenakhineika Jun 28, 2022
3630de8
fix: align text to the baseline
alenakhineika Jun 28, 2022
a751fa2
refactor: reverse npm run reformat
alenakhineika Jun 28, 2022
c17f9d6
fix: fix paddings again
alenakhineika Jun 28, 2022
2f5e962
refactor: set padding for fieldset child of fieldset
alenakhineika Jun 28, 2022
c661b00
fix: remove spacing from create db and collection modal
alenakhineika Jun 28, 2022
6e56a8f
refactor: remove container
alenakhineika Jun 28, 2022
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
50 changes: 25 additions & 25 deletions packages/compass-components/src/components/accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,13 +32,13 @@ const buttonLightThemeStyles = css({
const buttonDarkThemeStyles = css({
color: uiColors.white,
});
const containerStyles = css({
display: 'flex',
alignItems: 'center',
});
const buttonIconStyles = css({
marginRight: spacing[1],
});
const buttonTextStyles = css({
alignItems: 'baseline',
display: 'flex',
});
const buttonHintStyles = css({
margin: 0,
marginLeft: spacing[1],
Expand All @@ -61,31 +61,31 @@ function UnthemedAccordion({
const labelId = useId('label-');
return (
<>
<div className={containerStyles}>
<button
data-testid={props['data-testid']}
className={cx(
darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
buttonStyles
)}
id={labelId}
type="button"
aria-expanded={open ? 'true' : 'false'}
aria-controls={regionId}
onClick={() => {
setOpen((currentOpen) => !currentOpen);
}}
>
<Icon
className={buttonIconStyles}
glyph={open ? 'ChevronDown' : 'ChevronRight'}
/>
<button
data-testid={props['data-testid']}
className={cx(
darkMode ? buttonDarkThemeStyles : buttonLightThemeStyles,
buttonStyles
)}
id={labelId}
type="button"
aria-expanded={open ? 'true' : 'false'}
aria-controls={regionId}
onClick={() => {
setOpen((currentOpen) => !currentOpen);
}}
>
<Icon
className={buttonIconStyles}
glyph={open ? 'ChevronDown' : 'ChevronRight'}
/>
<div className={buttonTextStyles}>
{text}
{hintText && (
<Description className={buttonHintStyles}>{hintText}</Description>
)}
</button>
</div>
</div>
</button>

{open && (
<div role="region" aria-labelledby={labelId} id={regionId}>
Expand Down
14 changes: 10 additions & 4 deletions packages/databases-collections/src/components/collation-fields/collation-fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { Select, Option, SelectSize } from '@mongodb-js/compass-components';
import _ from 'lodash';
import { css } from '@mongodb-js/compass-components';

const optionsSelectDropdownStyles = css({
zIndex: 1,
'button:focus, button:focus-within': {
zIndex: 20
}
Comment on lines +9 to +11
Copy link
Collaborator

Choose a reason for hiding this comment

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

I'm guessing this is some leafygreen select issue workaround? Might be worth adding a comment here

Copy link
Contributor Author

@alenakhineika alenakhineika Jun 29, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

It was just moved here from the deleted collation-fields.module.less file.

});

import COLLATION_OPTIONS from '../../constants/collation';
import FieldSet from '../field-set/field-set';

import styles from './collation-fields.module.less';

function CollationOptions(values) {
const unifiedValues = values.map((elem) => ({
value: (typeof elem === 'object') ? elem.value : elem,
Expand Down Expand Up @@ -57,7 +63,7 @@ function CollationFields({
<FieldSet key={element.field}>
<Select
id={`collation-field-${element.field}`}
className={styles['options-select-dropdown']}
className={optionsSelectDropdownStyles}
label={element.field}
name={element.field}
placeholder={`Select a value${
Expand Down
7 changes: 0 additions & 7 deletions packages/databases-collections/src/components/collation-fields/collation-fields.module.less
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions packages/databases-collections/src/components/collection-fields/capped-collection-fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { TextInput } from '@mongodb-js/compass-components';
import { spacing, css } from '@mongodb-js/compass-components';

import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';
import FieldSet from '../field-set/field-set';
Expand Down
10 changes: 8 additions & 2 deletions packages/databases-collections/src/components/collection-fields/time-series-fields.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { Select, Option, TextInput } from '@mongodb-js/compass-components';
import { spacing, css } from '@mongodb-js/compass-components';

import FieldSet from '../field-set/field-set';
import CollapsibleFieldSet from '../collapsible-field-set/collapsible-field-set';

import styles from './time-series-fields.module.less';
const optionsSelectDropdownStyles = css({
zIndex: 1,
'button:focus, button:focus-within': {
zIndex: 20
}
});

const TIME_FIELD_INPUT_DESCRIPTION = 'Specify which field should be used ' +
'as timeField for the time-series collection. ' +
Expand Down Expand Up @@ -90,7 +96,7 @@ function TimeSeriesFields({
<FieldSet>
<Select
id="timeSeries-granularity"
className={styles['options-select-dropdown']}
className={optionsSelectDropdownStyles}
label="granularity"
name="timeSeries.granularity"
placeholder="Select a value [optional]"
Expand Down
7 changes: 0 additions & 7 deletions ...ges/databases-collections/src/components/collection-fields/time-series-fields.module.less
View file
Open in desktop

This file was deleted.

4 changes: 4 additions & 0 deletions packages/databases-collections/src/components/field-set/field-set.module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.field-set {
margin: 16px 0px;

fieldset {
padding-left: 24px;
}
}