Skip to content

Commit

Permalink
fix(modals): use auto width for responsive layout (#1306)
Browse files Browse the repository at this point in the history
* fix(modals): use auto width for responsive layout
  • Loading branch information
hzhu authored Mar 15, 2022
1 parent 028957b commit 1d5b1df
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 18 deletions.
18 changes: 9 additions & 9 deletions packages/modals/.size-snapshot.json
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
{
"index.cjs.js": {
"bundled": 52281,
"minified": 37678,
"gzipped": 7995
"bundled": 52127,
"minified": 37612,
"gzipped": 7989
},
"index.esm.js": {
"bundled": 48510,
"minified": 34486,
"gzipped": 7750,
"bundled": 48355,
"minified": 34418,
"gzipped": 7747,
"treeshaked": {
"rollup": {
"code": 27458,
"import_statements": 728
"code": 27389,
"import_statements": 744
},
"webpack": {
"code": 30766
"code": 30697
}
}
}
Expand Down
10 changes: 8 additions & 2 deletions packages/modals/src/styled/StyledModal.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,16 @@
import React from 'react';
import { render, renderRtl } from 'garden-test-utils';
import { StyledModal } from './StyledModal';
import { DEFAULT_THEME } from '@zendeskgarden/react-theming';

describe('StyledModal', () => {
it('renders default styling', () => {
const { container } = render(<StyledModal />);

expect(container.firstChild).toHaveStyleRule('width', '544px');
expect(container.firstChild).not.toHaveStyleRule('width');
expect(container.firstChild).toHaveStyleRule('width', DEFAULT_THEME.breakpoints.sm, {
media: `(min-width: ${DEFAULT_THEME.breakpoints.sm})`
});
expect(container.firstChild).toHaveStyleRule('margin', '48px');
expect(container.firstChild).not.toHaveStyleRule('direction');
expect(container.firstChild).not.toHaveStyleRule('animation-duration', '0.3s');
Expand All @@ -29,7 +33,9 @@ describe('StyledModal', () => {
it('renders large styling if provided', () => {
const { container } = render(<StyledModal isLarge />);

expect(container.firstChild).toHaveStyleRule('width', '800px');
expect(container.firstChild).toHaveStyleRule('width', DEFAULT_THEME.breakpoints.md, {
media: `(min-width: ${DEFAULT_THEME.breakpoints.md})`
});
});

it('renders centered styling if provided', () => {
Expand Down
15 changes: 8 additions & 7 deletions packages/modals/src/styled/StyledModal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,12 @@

import PropTypes from 'prop-types';
import styled, { css, keyframes, ThemeProps, DefaultTheme } from 'styled-components';
import { getColor, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
import {
getColor,
mediaQuery,
retrieveComponentStyles,
DEFAULT_THEME
} from '@zendeskgarden/react-theming';

const COMPONENT_ID = 'modals.modal';

Expand Down Expand Up @@ -43,13 +48,9 @@ const boxShadow = (props: ThemeProps<DefaultTheme>) => {
};

const sizeStyles = (props: IStyledModalProps & ThemeProps<DefaultTheme>) => {
const defaultWidth = 544;
const largeWidth = 800;

return css`
width: ${props.isLarge ? `${largeWidth}px` : `${defaultWidth}px`};
@media (max-width: ${props.isLarge ? `${largeWidth - 1}px` : props.theme.breakpoints.md}) {
${props.theme.rtl ? 'right' : 'left'}: ${props.theme.space.base * 6}px;
${mediaQuery('up', props.isLarge ? 'md' : 'sm', props.theme)} {
width: ${props.isLarge ? props.theme.breakpoints.md : props.theme.breakpoints.sm};
}
`;
};
Expand Down

0 comments on commit 1d5b1df

Please sign in to comment.