Skip to content

Commit

Permalink
Update design to material-3
Browse files Browse the repository at this point in the history
  • Loading branch information
anitnilay20 committed Feb 19, 2022
1 parent 31dc1c2 commit 78fd80c
Show file tree
Hide file tree
Showing 86 changed files with 1,309 additions and 1,007 deletions.
2 changes: 1 addition & 1 deletion .storybook/preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const globalTypes = {
const withThemeProvider=(Story,context)=>{
const theme = context.globals.theme;
return (
<ThemeProvider theme={theme}>
<ThemeProvider>
<div style={{ minWidth: '400px' }}><Story {...context} /></div>
</ThemeProvider>
)
Expand Down
4 changes: 2 additions & 2 deletions src/components/AutoComplete/AutoComplete.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -100,8 +100,8 @@ export const CustomAnchorElement: Story<SingleAutoComplete<string>> = () => {
displayValue={(e) => e as string}
onChange={(e: string) => update(e)}
>
<Button type="primary" displayBlock outline>
{value} <MdExpandMore />
<Button outlined primary displayBlock iconAfter={<MdExpandMore />}>
{value}
</Button>
</AutoComplete>
);
Expand Down
7 changes: 2 additions & 5 deletions src/components/AutoComplete/AutoComplete.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,6 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
...(value as T[]).map((v) => (
<Tag
color="#aaa"
textColor="light"
chips
elevation={0}
style={{ border: 'none', background: 'transparent', textTransform: 'none', fontWeight: 400 }}
Expand All @@ -147,8 +146,7 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
const afters = [
<Button
key="expand"
flat
shape="circle"
text
onClick={(e: React.MouseEvent) => {
e.preventDefault();
e.stopPropagation();
Expand All @@ -167,8 +165,7 @@ export class AutoComplete<T> extends React.Component<AutoCompleteProps<T>, State
this.onChange(null);
}}
key="clear"
flat
shape="circle"
text
icon={<MdClose />}
/>,
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Breadcrumb/Breadcrumb.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ WithMenu.args = {
<a key="1" href="#">
<MdHome />
</a>,
<Menu trigger="onHover" densed position="bottom" key="2" anchor={<Button flat>Options</Button>}>
<Menu trigger="onMouseOver" densed placement="bottom" key="2" anchor={<Button flat>Options</Button>}>
<MenuItem>Option 1</MenuItem>
</Menu>,
],
Expand Down
4 changes: 1 addition & 3 deletions src/components/Breadcrumb/Breadcrumb.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import * as React from 'react';
import { useTheme } from '../Theme/Theme';
import { style } from './style';
import { Row } from '../..';

export const Breadcrumb: React.FC<BreadcrumbProps> = (props) => {
const theme = useTheme();
const css = style(theme);
const css = style();

const children: React.ReactElement[] = Array.isArray(props.children)
? (props.children as React.ReactElement[])
Expand Down
14 changes: 6 additions & 8 deletions src/components/Breadcrumb/style.ts
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@
import { css } from '@emotion/css';
import { colorShades, lightText } from '../../helpers/color';
import { Theme } from '../Theme/Theme';
import { themeVar } from '../Theme/helper';

export const style = (theme: Theme) => {
const [, , primary3] = colorShades(theme.primary);
export const style = () => {
return css({
color: theme.textColor,
color: themeVar.neutral.neutralKeyColor.onSurface,
'& li': {
fontSize: '16px',
letterSpacing: '0.00938em',
listStyleType: 'none',
lineHeight: '1.5',
fontWeight: 400,
color: lightText(theme),
color: themeVar.neutral.neutralVariantKeyColor.onSurfaceVariant,
cursor: 'pointer',
'& *': {
color: lightText(theme),
color: themeVar.neutral.neutralVariantKeyColor.onSurfaceVariant,
},
'&:last-child': {
'& *': {
color: primary3,
color: themeVar.neutral.neutralKeyColor.onSurface,
},
},
'&.breadcrumb-seperator': {
Expand Down
166 changes: 166 additions & 0 deletions src/components/Button/Button--old.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
import * as React from 'react';
import { Loading } from '../Loading';
import { Text } from '../Text';
import { classes } from '../../helpers';
import { shapeTypes, sizeTypes, style } from './style--old';
import { PaddingClassNameInput, paddingCss } from '../../helpers/padding';

export const Button = React.forwardRef<HTMLButtonElement & HTMLAnchorElement, ButtonProps>((props, ref) => {
const {
size: __size,
shape: __shape,
displayBlock: __displayBlock,
icon,
flat: __flat,
className,
loading,
component,
onClick,
outline: __outline,
// primary,
// secondary,
// danger,
link,
padding,
type,
...rest
} = props;

const css = style(props);

const buttonProps = rest as NativeButtonProps;
const anchorProps = rest as AnchorButtonProps;

if (component) {
const Element = (p: Record<string, unknown>) => React.cloneElement(props.component, p);

if (link || props.href !== undefined) {
return (
<Element
className={classes(css.anchor, css.default, className, paddingCss(padding))}
onClick={(
e: React.MouseEvent<HTMLAnchorElement, MouseEvent> & React.MouseEvent<HTMLButtonElement, MouseEvent>,
) => !loading && onClick && onClick(e)}
{...anchorProps}
>
{icon}
<Loading
// color={buttonColor(props, theme, primary, secondary, danger, link)[1]}
isLoading={loading}
size="small"
render={() => <span>{props.children}</span>}
/>
</Element>
);
}

return (
<Element
className={classes(css.default, css.button, className, paddingCss(padding))}
onClick={(
e: React.MouseEvent<HTMLAnchorElement, MouseEvent> & React.MouseEvent<HTMLButtonElement, MouseEvent>,
) => !loading && onClick && onClick(e)}
ref={ref}
{...buttonProps}
>
{icon}
<Loading
style={{ margin: '0' }}
// color={buttonColor(props, theme, primary, secondary, danger, link)[1]}
isLoading={loading}
size="small"
render={() => <span>{props.children}</span>}
/>
{loading && <Text margin="0 10px">Loading</Text>}
</Element>
);
}

if (link) {
return (
<a
className={classes(css.anchor, css.default, className, paddingCss(padding))}
onClick={(
e: React.MouseEvent<HTMLAnchorElement, MouseEvent> & React.MouseEvent<HTMLButtonElement, MouseEvent>,
) => !loading && onClick && onClick(e)}
ref={ref}
{...anchorProps}
>
{icon}
<Loading
// color={buttonColor(props, theme, primary, secondary, danger, link)[1]}
isLoading={loading}
size="small"
render={() => <span>{props.children}</span>}
/>
</a>
);
}

return (
<button
className={classes(css.default, css.button, className, paddingCss(padding))}
onClick={(e: React.MouseEvent<HTMLAnchorElement, MouseEvent> & React.MouseEvent<HTMLButtonElement, MouseEvent>) =>
!loading && onClick && onClick(e)
}
ref={ref}
type={loading ? 'button' : (type as 'button')}
{...buttonProps}
>
{icon}
<Loading
style={{ margin: '0' }}
// color={buttonColor(props, theme, primary, secondary, danger, link)[1]}
isLoading={loading}
size="small"
render={() => <span>{props.children}</span>}
/>
{loading && <Text margin="0 10px">Loading</Text>}
</button>
);
});

Button.defaultProps = {
size: 'default',
shape: 'default',
type: 'button',
};

export interface BaseButtonProps {
primary?: boolean;
secondary?: boolean;
danger?: boolean;
link?: boolean;

size?: sizeTypes;
shape?: shapeTypes;
className?: string;
displayBlock?: boolean;
flat?: boolean;
outline?: boolean;
icon?: React.ReactNode;
loading?: boolean;
component?: React.ReactElement;

// For anchor tag
href?: string;
target?: string;
disabled?: boolean;

padding?: PaddingClassNameInput;
}

export type AnchorButtonProps = {
href?: string;
target?: string;
onClick?: React.MouseEventHandler<HTMLAnchorElement>;
} & BaseButtonProps &
React.AnchorHTMLAttributes<HTMLAnchorElement>;

export type NativeButtonProps = {
link?: false;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
} & BaseButtonProps &
React.ButtonHTMLAttributes<HTMLButtonElement>;

export type ButtonProps = AnchorButtonProps | NativeButtonProps;
Loading

0 comments on commit 78fd80c

Please sign in to comment.