Skip to content

Commit

Permalink
feat(dialog): new component (#611)
Browse files Browse the repository at this point in the history
  • Loading branch information
mgr34 authored and Matt Goo committed Jan 23, 2019
1 parent 796850b commit 555e61f
Show file tree
Hide file tree
Showing 27 changed files with 2,026 additions and 8 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ Component | Spec | MDC Web
[Card](./packages/card) | [Card Design Page](https://material.io/design/components/cards.html) | [MDC Card](https://github.com/material-components/material-components-web/tree/master/packages/mdc-card)
[Checkbox](./packages/checkbox) | [Checkbox Design Page](https://material.io/design/components/selection-controls.html#checkboxes) | [MDC Checkbox](https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox)
[Chips](./packages/chips) | [Chips Design Page](https://material.io/design/components/chips.html) | [MDC Chips](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips)
[Dialog](./packages/Dialog) | [Dialog Design Page](https://material.io/design/components/dialogs.html) | [MDC Dialog](https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog)
[Drawer](./packages/drawer) | [Drawer Design Page](https://material.io/design/components/navigation-drawer.html) | [MDC Drawer](https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer)
[Fab](./packages/fab) | [Fab Design Page](https://material.io/design/components/buttons-floating-action-button.html) | [MDC Fab](https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab)
[Floating Label](./packages/floating-label) | [Text Field Design Page](https://material.io/design/components/text-fields.html) | [MDC Floating Label](https://github.com/material-components/material-components-web/tree/master/packages/mdc-floating-label)
Expand Down
26 changes: 18 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"card",
"checkbox",
"chips",
"dialog",
"drawer",
"fab",
"floating-label",
Expand Down Expand Up @@ -63,6 +64,8 @@
"@material/card": "^0.41.0",
"@material/checkbox": "^0.41.0",
"@material/chips": "^0.41.0",
"@material/dialog": "^0.43.0",
"@material/dom": "^0.41.0",
"@material/drawer": "^0.41.0",
"@material/fab": "^0.41.0",
"@material/floating-label": "^0.41.0",
Expand Down
56 changes: 56 additions & 0 deletions packages/dialog/DialogButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
// The MIT License
//
// Copyright (c) 2019 Google, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import * as React from 'react';
import * as classnames from 'classnames';
import {cssClasses} from './constants';
import Button, {ButtonProps} from '@material/react-button';

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
type ButtonTypes = HTMLAnchorElement | HTMLButtonElement;
export interface DialogButtonProps<T extends ButtonTypes> extends Omit<ButtonProps<T>, 'initRipple'> {
action: string,
className?: string,
isDefault?: boolean,
};


const DialogButton: <T extends ButtonTypes>(props: DialogButtonProps<T>) =>
React.ReactElement<any> = ({
/* eslint-disable react/prop-types */
action,
className = '',
children,
isDefault = false,
...otherProps
/* eslint-enable react/prop-types */
}) => (
// @ts-ignore https://github.com/Microsoft/TypeScript/issues/28892
<Button
className={classnames(className, cssClasses.BUTTON, {
[cssClasses.DEFAULT_BUTTON]: isDefault})}
data-mdc-dialog-action={action}
{...otherProps}
>{children}</Button>
);

type DialogButton<T extends ButtonTypes> = React.ReactElement<DialogButtonProps<T>>;
export default DialogButton;
49 changes: 49 additions & 0 deletions packages/dialog/DialogContent.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// The MIT License
//
// Copyright (c) 2019 Google, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import * as React from 'react';
import * as classnames from 'classnames';
import {cssClasses} from './constants';


export interface DialogContentProps<T> extends React.HTMLProps<T> {
className?: string,
tag?: string,
id?: string,
};

const DialogContent: <T extends {} = HTMLDivElement>(props: DialogContentProps<T>) =>
React.ReactElement<T> = ({
/* eslint-disable react/prop-types */
className = '',
children,
tag: Tag = 'div',
...otherProps
/* eslint-enable react/prop-types */
}) => (
// @ts-ignore https://github.com/Microsoft/TypeScript/issues/28892
<Tag className={classnames(className, cssClasses.CONTENT)} {...otherProps}>
{children}
</Tag>
);

type DialogContent<T> = React.ReactElement<T>;
export default DialogContent;
49 changes: 49 additions & 0 deletions packages/dialog/DialogFooter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// The MIT License
//
// Copyright (c) 2019 Google, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import * as React from 'react';
import * as classnames from 'classnames';
import {cssClasses} from './constants';


export interface DialogFooterProps<T> extends React.HTMLProps<T> {
className?: string,
tag?: string,
};


const DialogFooter: <T extends {} = HTMLElement>(props: DialogFooterProps<T>) =>
React.ReactElement<T> = ({
/* eslint-disable react/prop-types */
className = '',
children,
tag: Tag = 'footer',
...otherProps
/* eslint-enable react/prop-types */
}) => (
// @ts-ignore https://github.com/Microsoft/TypeScript/issues/28892
<Tag className={classnames(className, cssClasses.ACTIONS)} {...otherProps}>
{children}
</Tag>
);

type DialogFooter<T> = React.ReactElement<T>;
export default DialogFooter;
49 changes: 49 additions & 0 deletions packages/dialog/DialogTitle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
// The MIT License
//
// Copyright (c) 2019 Google, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import * as React from 'react';
import * as classnames from 'classnames';
import {cssClasses} from './constants';


export interface DialogTitleProps<T> extends React.HTMLProps<T> {
className?: string,
tag?: string,
id?: string,
};

const DialogTitle: <T extends {} = HTMLHeadingElement>(props: DialogTitleProps<T>) =>
React.ReactElement<T> = ({
/* eslint-disable react/prop-types */
className = '',
children,
tag: Tag = 'h2',
...otherProps
/* eslint-enable react/prop-types */
}) => (
// @ts-ignore https://github.com/Microsoft/TypeScript/issues/28892
<Tag className={classnames(className, cssClasses.TITLE)} {...otherProps}>
{children}
</Tag>
);

type DialogTitle<T> = React.ReactElement<T>;
export default DialogTitle;
Loading

0 comments on commit 555e61f

Please sign in to comment.