Skip to content

Commit 5e0a60d

Browse files
sidmohanty11sidmohanty11
authored
Merge pull request #223 from abhinavkrin/ui-refactoring/button
[NEW] Button replacement for fuselage
2 parents e4a27c2 + 63c28a7 commit 5e0a60d

File tree

11 files changed

+177
-26
lines changed

11 files changed

+177
-26
lines changed

‎packages/react/src/components/Button/Button.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/* eslint-disable react/button-has-type */
2+
import React from 'react';
3+
import { css, useTheme } from '@emotion/react';
4+
import PropTypes from 'prop-types';
5+
import useComponentOverrides from '../../theme/useComponentOverrides';
6+
7+
const Button = ({
8+
children,
9+
color = 'primary',
10+
className = '',
11+
style = {},
12+
size = 'medium',
13+
...props
14+
}) => {
15+
const { classNames, styleOverrides } = useComponentOverrides('Button');
16+
const theme = useTheme();
17+
const classNameButton = css`
18+
cursor: pointer;
19+
display: inline-block;
20+
background-color: ${theme.palette[color].main};
21+
color: ${theme.palette[color].contrastText || 'currentColor'};
22+
border-color: ${theme.palette[color].main || 'currentColor'};
23+
border-style: solid;
24+
border-width: 1px;
25+
font-size: 0.875rem;
26+
font-weight: 500;
27+
letter-spacing: 0;
28+
line-height: 1.25rem;
29+
min-width: 80px;
30+
outline: none;
31+
overflow: hidden;
32+
padding-block: calc(18px - 0.625rem);
33+
padding: calc(18px - 0.625rem) 14px;
34+
padding-inline: 14px;
35+
text-align: center;
36+
text-decoration: none;
37+
text-overflow: ellipsis;
38+
white-space: nowrap;
39+
border-radius: 0.25rem;
40+
&.ec-button--small {
41+
font-size: 0.75rem;
42+
font-weight: 700;
43+
letter-spacing: 0;
44+
line-height: 1rem;
45+
min-width: 56px;
46+
padding-block: calc(12px - 0.5rem);
47+
padding: calc(12px - 0.5rem) 6px;
48+
padding-inline: 6px;
49+
border-radius: 0.25rem;
50+
}
51+
&.ec-button--large {
52+
font-size: 1rem;
53+
font-weight: 400;
54+
letter-spacing: 0;
55+
line-height: 1.5rem;
56+
min-width: 96px;
57+
padding-block: calc(22px - 0.75rem);
58+
padding: calc(22px - 0.75rem) 22px;
59+
padding-inline: 22px;
60+
border-radius: 0.36rem;
61+
}
62+
&:hover {
63+
filter: brightness(90%);
64+
}
65+
`;
66+
return (
67+
<button
68+
type="button"
69+
css={classNameButton}
70+
className={`ec-button ec-button--${size} ${className} ${classNames}`}
71+
style={{ ...styleOverrides, ...style }}
72+
{...props}
73+
>
74+
{children}
75+
</button>
76+
);
77+
};
78+
79+
Button.propTypes = {
80+
children: PropTypes.oneOfType([
81+
PropTypes.arrayOf(PropTypes.node),
82+
PropTypes.node,
83+
]),
84+
color: PropTypes.string,
85+
size: PropTypes.oneOf(['small', 'medium', 'large']),
86+
className: PropTypes.string,
87+
style: PropTypes.object,
88+
};
89+
90+
export default Button;

‎packages/react/src/components/Button/Button.stories.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import { ThemeProvider } from '@emotion/react';
3+
import { Button } from '.';
4+
import DefaultTheme from '../../theme/DefaultTheme';
5+
6+
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
7+
export default {
8+
title: 'Button',
9+
component: Button,
10+
};
11+
12+
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
13+
export const Primary = {
14+
args: {
15+
color: 'primary',
16+
},
17+
render: (args) => (
18+
<ThemeProvider theme={DefaultTheme}>
19+
<Button {...args}>Click Me</Button>
20+
</ThemeProvider>
21+
),
22+
};
23+
24+
export const Secondary = {
25+
args: {
26+
color: 'secondary',
27+
},
28+
render: (args) => (
29+
<ThemeProvider theme={DefaultTheme}>
30+
<Button {...args}>Click Me</Button>
31+
</ThemeProvider>
32+
),
33+
};
34+
35+
export const Large = {
36+
args: {
37+
color: 'primary',
38+
size: 'large',
39+
},
40+
render: (args) => (
41+
<ThemeProvider theme={DefaultTheme}>
42+
<Button {...args}>Click Me</Button>
43+
</ThemeProvider>
44+
),
45+
};
46+
47+
export const Small = {
48+
args: {
49+
color: 'primary',
50+
size: 'small',
51+
},
52+
render: (args) => (
53+
<ThemeProvider theme={DefaultTheme}>
54+
<Button {...args}>Click Me</Button>
55+
</ThemeProvider>
56+
),
57+
};

‎packages/react/src/components/Button/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Button } from './Button';

‎packages/react/src/components/ChatInput/ChatInput.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Box, Button, Icon, ActionButton } from '@rocket.chat/fuselage';
1+
import { Box, Icon, ActionButton } from '@rocket.chat/fuselage';
22
import React, { useState, useContext, useRef, useEffect } from 'react';
33
import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
44
import styles from './ChatInput.module.css';
@@ -17,6 +17,7 @@ import { searchToMentionUser } from '../../lib/searchToMentionUser';
1717
import TypingUsers from '../TypingUsers';
1818
import createPendingMessage from '../../lib/createPendingMessage';
1919
import { parseEmoji } from '../../lib/emoji';
20+
import { Button } from '../Button';
2021

2122
const ChatInput = () => {
2223
const { RCInstance, ECOptions } = useContext(RCContext);
@@ -322,7 +323,7 @@ const ChatInput = () => {
322323
) : (
323324
<Button
324325
onClick={openLoginModal}
325-
primary
326+
color="primary"
326327
style={{ overflow: 'visible' }}
327328
>
328329
JOIN

‎packages/react/src/components/MessageList/MessageList.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { isSameDay } from 'date-fns';
4-
import { Box, Button, Icon } from '@rocket.chat/fuselage';
4+
import { Box, Icon } from '@rocket.chat/fuselage';
55
import {
66
useMessageStore,
77
useMemberStore,
@@ -15,6 +15,7 @@ import isMessageSequential from '../../lib/isMessageSequential';
1515
import SearchMessage from '../SearchMessage/SearchMessage';
1616
import Roominfo from '../RoomInformation/RoomInformation';
1717
import { Message } from '../Message';
18+
import { Button } from '../Button';
1819

1920
const MessageList = ({ messages, handleGoBack }) => {
2021
const showSearch = useSearchMessageStore((state) => state.showSearch);
@@ -51,7 +52,7 @@ const MessageList = ({ messages, handleGoBack }) => {
5152
})}
5253
{filtered && (
5354
<Box>
54-
<Button small onClick={handleGoBack}>
55+
<Button size="small" onClick={handleGoBack}>
5556
<Icon mie="x4" name="back" size="x20" color="danger" />
5657
<p style={{ display: 'inline' }}>Go Back</p>
5758
</Button>

‎packages/react/src/components/ReportMessage/ReportWindowButtons.js‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { Button, Modal, Box, Icon, ActionButton } from '@rocket.chat/fuselage';
1+
import { Modal, Box, Icon, ActionButton } from '@rocket.chat/fuselage';
22
import React, { useContext } from 'react';
33
import { useToastBarDispatch } from '@rocket.chat/fuselage-toastbar';
44
import PropTypes from 'prop-types';
55
import classes from './MessageReporter.module.css';
66
import { useMessageStore, useToastStore } from '../../store';
77
import RCContext from '../../context/RCInstance';
8+
import { Button } from '../Button';
89

910
const ReportWindowButtons = ({ children, reportDescription, messageId }) => {
1011
const [toggleReportMessage, setMessageToReport] = useMessageStore((state) => [
@@ -59,14 +60,10 @@ const ReportWindowButtons = ({ children, reportDescription, messageId }) => {
5960
<Modal.Content>{children}</Modal.Content>
6061
<Modal.Footer>
6162
<Box className={classes.reportWindowFooter}>
62-
<Button secondary onClick={handleOnClose}>
63+
<Button color="secondary" onClick={handleOnClose}>
6364
Cancel
6465
</Button>
65-
<Button
66-
onClick={handleReportMessage}
67-
backgroundColor="danger"
68-
color="white"
69-
>
66+
<Button onClick={handleReportMessage} color="error">
7067
Report message
7168
</Button>
7269
</Box>

‎packages/react/src/components/RoomMembers/RoomMember.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React, { useContext, useState } from 'react';
22
import PropTypes from 'prop-types';
3-
import { Box, Icon, ActionButton, Button } from '@rocket.chat/fuselage';
3+
import { Box, Icon, ActionButton } from '@rocket.chat/fuselage';
44
import RoomMemberItem from './RoomMemberItem';
55
import classes from './RoomMember.module.css';
66
import { useMemberStore } from '../../store';
77
import RCContext from '../../context/RCInstance';
88
import useInviteStore from '../../store/inviteStore';
99
import InviteMembers from './inviteMembers/InviteMembers';
10+
import { Button } from '../Button';
1011

1112
const RoomMembers = ({ members }) => {
1213
const { RCInstance } = useContext(RCContext);

‎packages/react/src/components/SearchMessage/SearchMessage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ import {
77
Message,
88
MessageReactions,
99
MessageDivider,
10-
Button,
1110
} from '@rocket.chat/fuselage';
1211
import RCContext from '../../context/RCInstance';
1312
import classes from './SearchMessage.module.css';
1413
import { Markdown } from '../Markdown/index';
1514
import { useUserStore, useSearchMessageStore } from '../../store';
1615
import { isSameUser, serializeReactions } from '../../lib/reaction';
16+
import { Button } from '../Button';
1717

1818
const Search = () => {
1919
const { RCInstance } = useContext(RCContext);
@@ -64,7 +64,7 @@ const Search = () => {
6464
}}
6565
className={classes.textInput}
6666
/>
67-
<Button small onClick={searchMessages}>
67+
<Button size="small" onClick={searchMessages}>
6868
Enter
6969
</Button>
7070
</Box>

‎packages/react/src/components/TotpModal/TwoFactorTotpModal.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import { PasswordInput, Box, Modal, Button } from '@rocket.chat/fuselage';
1+
import { PasswordInput, Box, Modal } from '@rocket.chat/fuselage';
22
import React, { useState } from 'react';
33
import PropTypes from 'prop-types';
44
import { totpModalStore, useUserStore } from '../../store';
55
import { GenericModal } from '../GenericModal';
66
import classes from './TwoFactorTotpModal.module.css';
7+
import { Button } from '../Button';
78

89
export default function TotpModal({ handleGoogleLogin, handleLogin }) {
910
const [accessCode, setAccessCode] = useState(null);
@@ -48,10 +49,10 @@ export default function TotpModal({ handleGoogleLogin, handleLogin }) {
4849
</Box>
4950
<Modal.Footer>
5051
<Box className={classes.Footer}>
51-
<Button secondary onClick={handleClose}>
52+
<Button color="secondary" onClick={handleClose}>
5253
Cancel
5354
</Button>
54-
<Button primary onClick={handleSubmit}>
55+
<Button color="primary" onClick={handleSubmit}>
5556
Submit
5657
</Button>
5758
</Box>

‎packages/react/src/components/auth/LoginForm.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {
22
PasswordInput,
3-
Button,
43
Modal,
54
Field,
65
TextInput,
@@ -13,6 +12,7 @@ import { loginModalStore } from '../../store';
1312
import { useRCAuth } from '../../hooks/useRCAuth';
1413
import { useRCAuth4Google } from '../../hooks/useRCAuth4Google';
1514
import classes from './Login.module.css';
15+
import { Button } from '../Button';
1616

1717
export default function LoginForm() {
1818
const [userOrEmail, setuserOrEmail] = useState(null);
@@ -70,9 +70,11 @@ export default function LoginForm() {
7070
<Modal.Footer alignItems="center">
7171
<Box className={classes.Footer}>
7272
<Button
73-
primary
73+
color="primary"
7474
onClick={handleSubmit}
75-
margin="10px 10px 10px 10px"
75+
style={{
76+
margin: '10px',
77+
}}
7678
>
7779
Login
7880
</Button>
@@ -82,9 +84,9 @@ export default function LoginForm() {
8284
<hr className={classes.darkLine} />
8385
</Box>
8486
<Button
85-
secondary
87+
color="secondary"
8688
onClick={handleGooglewithLogin}
87-
margin="10px 10px 10px 10px"
89+
style={{ margin: '10px' }}
8890
>
8991
<Icon name="google" /> Login with Google
9092
</Button>

0 commit comments

Comments
 (0)