Skip to content

Commit b27708d

Browse files
sravan-ssravan-s
authored
feat: allow customers to use rem units for typography (#282)
Rem is better unit for accessibility support/mobile So, we are adding rem as unit for typography/font size We expect font-size 16px as base font-size, but to avoid breaking change, customers should pass `config.isREMUnitEnabled` prop to SendbirdProvider to use "rem" units
1 parent 85ab558 commit b27708d

File tree

8 files changed

+142
-18
lines changed

8 files changed

+142
-18
lines changed

‎scripts/index_d_ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ declare module "SendbirdUIKitGlobal" {
7777
maxMentionCount?: number,
7878
maxSuggestionCount?: number,
7979
};
80+
isREMUnitEnabled?: boolean;
8081
}
8182

8283
export interface ClientMessage {

‎src/lib/Sendbird.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import './index.scss';
2+
import './__experimental__typography.scss';
23

34
import React, { useEffect, useReducer, useState } from 'react';
45
import PropTypes from 'prop-types';
@@ -52,6 +53,7 @@ export default function Sendbird(props) {
5253
const {
5354
logLevel = '',
5455
userMention = {},
56+
isREMUnitEnabled = false,
5557
} = config;
5658
const [logger, setLogger] = useState(LoggerFactory(logLevel));
5759
const [pubSub, setPubSub] = useState();
@@ -101,6 +103,14 @@ export default function Sendbird(props) {
101103
useEffect(() => {
102104
setCurrenttheme(theme);
103105
}, [theme]);
106+
107+
useEffect(() => {
108+
const body = document.querySelector('body');
109+
body.classList.remove('sendbird-experimental__rem__units');
110+
if (isREMUnitEnabled) {
111+
body.classList.add('sendbird-experimental__rem__units');
112+
}
113+
}, [isREMUnitEnabled]);
104114
// add-remove theme from body
105115
useEffect(() => {
106116
logger.info('Setup theme', `Theme: ${currenttheme}`);
@@ -228,6 +238,7 @@ Sendbird.propTypes = {
228238
maxMentionCount: PropTypes.number,
229239
maxSuggestionCount: PropTypes.number,
230240
}),
241+
isREMUnitEnabled: PropTypes.bool,
231242
}),
232243
stringSet: PropTypes.objectOf(PropTypes.string),
233244
colorSet: PropTypes.objectOf(PropTypes.string),

‎src/lib/__experimental__typography.scss‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
// We are tyring to move font size into "rem" units for accesibility
2+
// todo: make this default in @sendbird/uikit@v4
3+
4+
// assuming <html>@fontsize = 16px
5+
// about rem https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/#rems
6+
.sendbird-experimental__rem__units {
7+
// typography
8+
.sendbird-label--h-1 {
9+
font-size: 1.25rem;
10+
}
11+
12+
.sendbird-label--h-2 {
13+
font-size: 1.125rem;
14+
}
15+
16+
.sendbird-label--subtitle-1 {
17+
font-size: 1rem;
18+
}
19+
20+
.sendbird-label--subtitle-2 {
21+
font-size: .875rem;
22+
}
23+
24+
.sendbird-label--body-1 {
25+
font-size: .875rem;
26+
}
27+
28+
.sendbird-label--body-2 {
29+
font-size: .75rem;
30+
}
31+
32+
.sendbird-label--button-1 {
33+
font-size: .875rem;
34+
}
35+
36+
.sendbird-label--button-2 {
37+
font-size: .875rem;
38+
}
39+
40+
.sendbird-label--caption-1 {
41+
font-size: .875rem;
42+
}
43+
44+
.sendbird-label--caption-2 {
45+
font-size: .75rem;
46+
}
47+
48+
.sendbird-label--caption-3 {
49+
font-size: .75rem;
50+
}
51+
52+
// message search
53+
.sendbird-message-search-pannel {
54+
.sendbird-message-search-pannel__input__container__input-area {
55+
font-size: .875rem;
56+
}
57+
}
58+
59+
// checkbox
60+
.sendbird-checkbox {
61+
font-size: 1.375rem;
62+
}
63+
64+
.sendbird-mention-user-label {
65+
font-size: .875rem;
66+
&.purple {
67+
font-size: 1.125rem;
68+
}
69+
}
70+
71+
// message input
72+
.sendbird-message-input {
73+
.sendbird-message-input--textarea,
74+
.sendbird-message-input--placeholder {
75+
font-size: .875rem;
76+
}
77+
}
78+
79+
// input
80+
.sendbird-input {
81+
.sendbird-input__input,
82+
.sendbird-input__placeholder {
83+
font-size: .875rem;
84+
}
85+
}
86+
87+
// tooltip
88+
.sendbird-tooltip {
89+
&__text {
90+
font-size: .75rem;
91+
}
92+
}
93+
94+
// quote-message
95+
.sendbird-quote-message {
96+
.sendbird-quote-message__replied-to {
97+
.sendbird-quote-message__replied-to__text {
98+
font-size: .75rem;
99+
}
100+
}
101+
.sendbird-quote-message__replied-message {
102+
.sendbird-quote-message__replied-message__text-message {
103+
font-size: .75rem;
104+
}
105+
}
106+
.sendbird-quote-message__replied-message__file-message {
107+
font-size: .75rem;
108+
}
109+
}
110+
}

‎src/smart-components/App/index.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,7 @@ App.propTypes = {
173173
PropTypes.string,
174174
PropTypes.arrayOf(PropTypes.string),
175175
]),
176+
isREMUnitEnabled: PropTypes.bool,
176177
}),
177178
isReactionEnabled: PropTypes.bool,
178179
replyType: PropTypes.oneOf(['NONE', 'QUOTE_REPLY', 'THREAD']),

‎src/smart-components/App/stories/index.stories.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const basicSDK = () => fitPageSize(
5353
isReactionEnabled
5454
isTypingIndicatorEnabledOnChannelList
5555
isMessageReceiptStatusEnabledOnChannelList
56-
/*config={{ logLevel: 'all' }}*/
56+
config={{ logLevel: 'all', isREMUnitEnabled: true }}
5757
/>
5858
);
5959

@@ -65,7 +65,7 @@ export const darkTheme = () => fitPageSize(
6565
theme="dark"
6666
showSearchIcon
6767
replyType="QUOTE_REPLY"
68-
config={{ logLevel: 'all' }}
68+
config={{ logLevel: 'all', isREMUnitEnabled: true }}
6969
isMentionEnabled
7070
isTypingIndicatorEnabledOnChannelList
7171
isMessageReceiptStatusEnabledOnChannelList

‎src/smart-components/MessageSearch/index.scss‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,22 @@
1111
background-color: t(bg-0);
1212
}
1313

14+
.sendbird-message-search-pannel__input__container__input-area {
15+
position: absolute;
16+
top: 14px;
17+
left: 48px;
18+
margin: 0px;
19+
padding: 0px;
20+
border: 0px;
21+
outline: none;
22+
font-size: 14px;
23+
width: calc(100% - 90px);
24+
@include themed() {
25+
color: t(on-bg-1);
26+
background-color: t(bg-0);
27+
}
28+
}
29+
1430
.sendbird-message-search-pannel__header {
1531
position: relative;
1632
display: flex;
@@ -59,21 +75,6 @@
5975
top: 10px;
6076
left: 16px;
6177
}
62-
.sendbird-message-search-pannel__input__container__input-area {
63-
position: absolute;
64-
top: 14px;
65-
left: 48px;
66-
margin: 0px;
67-
padding: 0px;
68-
border: 0px;
69-
outline: none;
70-
font-size: 14px;
71-
width: calc(100% - 90px);
72-
@include themed() {
73-
color: t(on-bg-1);
74-
background-color: t(bg-0);
75-
}
76-
}
7778
.sendbird-message-search-pannel__input__container__spinner {
7879
position: absolute;
7980
top: 12px;

‎src/types.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export interface SendBirdProviderConfig {
2525
maxMentionCount?: number,
2626
maxSuggestionCount?: number,
2727
};
28+
isREMUnitEnabled?: boolean;
2829
}
2930

3031
export interface ClientMessage {

‎src/ui/MessageInput/index.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ const MessageInput = React.forwardRef((props, ref) => {
7171
const [isInput, setIsInput] = useState(false);
7272
const [mentionedUserIds, setMentionedUserIds] = useState([]);
7373
const [targetStringInfo, setTargetStringInfo] = useState({ ...initialTargetStringInfo });
74-
7574
const setHeight = useMemo(() => (
7675
() => {
7776
try {

0 commit comments

Comments
 (0)