Skip to content

Commit b62cbfc

Browse files
tassoevantassoevan
authored
fix: Add missing ref support (#43)
* Update code snippets * Fix eslint dependency error * Add ref support to Button and ButtonGroup * Add ref support for CheckBox, Icon, RadioButton, and ToggleSwitch * Update jest-results * Fix dependencies * Add empty CHANGELOG
1 parent 42e123b commit b62cbfc

File tree

17 files changed

+296
-1766
lines changed

17 files changed

+296
-1766
lines changed

‎.vscode/fuselage.code-snippets

+19-14
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,8 @@
1313
" className,",
1414
" ...props",
1515
"}) {",
16-
" return (",
17-
" <div",
18-
" className={useStyle(styles, '$1', {}, className)}",
19-
" {...props}",
20-
" />",
21-
" );",
16+
" const $3ClassName = useStyle(styles, '$2', {}, className);",
17+
" return <div className={$3ClassName} {...props} />;",
2218
"}"
2319
],
2420
},
@@ -48,31 +44,40 @@
4844
"import { storiesOf } from '@storybook/react';",
4945
"import React from 'react';",
5046
"",
47+
"import { createPropsFromKnobs } from '../../helpers/storybook';",
5148
"import { $1 } from './index';",
5249
"",
5350
"",
54-
"const props = () => ({});",
51+
"const props = createPropsFromKnobs({",
52+
" ",
53+
"});",
5554
"",
5655
"storiesOf('$2|$1', module)",
5756
" .addDecorator(withKnobs)",
5857
" .addDecorator(centered)",
5958
" .addParameters({ jest: ['spec'] })",
60-
" .add('default', () => (",
59+
" .add('default', () =>",
6160
" <$1 {...props()} />",
62-
" ));"
61+
" );"
6362
],
6463
},
6564
"New component styles.scss": {
6665
"scope": "scss",
6766
"prefix": "fuselage-styles",
6867
"body": [
69-
":root {",
70-
" --rcx-$2-color: var(--color-dark-900);",
71-
"}",
68+
"@import '../../helpers/mixins.scss';",
69+
"@import '../../helpers/theme-var.scss';",
70+
"@import '../../styles/color-palette.scss';",
71+
"@import '../../styles/dimensions.scss';",
72+
"@import '../../styles/typography.scss';",
73+
"",
74+
"\\$name: '$1';",
75+
"",
76+
"\\$default-theme: ();",
7277
"",
7378
".$1 {",
74-
" color: var(--rcx-$2-color);",
75-
"}"
79+
" @include reset;",
80+
"}",
7681
],
7782
},
7883
}

‎.vscode/settings.json

-16
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,4 @@
11
{
2-
"workbench.colorCustomizations": {
3-
"editorWarning.foreground": "#00ff0030",
4-
"editorError.foreground": "#ff0000ff",
5-
"activityBar.background": "#65c89b",
6-
"activityBar.foreground": "#15202b",
7-
"activityBar.inactiveForeground": "#15202b99",
8-
"activityBarBadge.background": "#945bc4",
9-
"activityBarBadge.foreground": "#e7e7e7",
10-
"titleBar.activeBackground": "#42b883",
11-
"titleBar.inactiveBackground": "#42b88399",
12-
"titleBar.activeForeground": "#15202b",
13-
"titleBar.inactiveForeground": "#15202b99",
14-
"statusBar.background": "#42b883",
15-
"statusBarItem.hoverBackground": "#359268",
16-
"statusBar.foreground": "#15202b"
17-
},
182
"eslint.workingDirectories": [
193
{
204
"directory": "packages/fuselage",

‎CHANGELOG.md

Whitespace-only changes.

‎package.json

-2
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,8 @@
99
"@babel/core": "^7.4.5",
1010
"@babel/preset-env": "^7.4.5",
1111
"@babel/preset-react": "^7.0.0",
12-
"@rocket.chat/eslint-config": "^0.3.0",
1312
"babel-loader": "^8.0.6",
1413
"cross-env": "^5.2.0",
15-
"eslint-plugin-react": "^7.13.0",
1614
"fs-extra": "^8.0.1",
1715
"gh-pages": "^2.0.1",
1816
"husky": "^2.3.0",

‎packages/fuselage/.storybook/jest-results.json

+1-1
Large diffs are not rendered by default.

‎packages/fuselage/package.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
},
4040
"devDependencies": {
4141
"@babel/plugin-transform-runtime": "^7.5.0",
42+
"@rocket.chat/eslint-config": "^0.4.0",
4243
"@storybook/addon-a11y": "^5.0.11",
4344
"@storybook/addon-actions": "^5.0.11",
4445
"@storybook/addon-backgrounds": "^5.0.11",
@@ -57,8 +58,9 @@
5758
"babel-loader": "^8.0.6",
5859
"css-vars-ponyfill": "^2.0.2",
5960
"cssnano": "^4.1.10",
60-
"eslint": "^6.0.1",
61-
"eslint-plugin-react": "^7.13.0",
61+
"eslint": "^6.1.0",
62+
"eslint-plugin-import": "^2.18.2",
63+
"eslint-plugin-react": "^7.14.3",
6264
"final-form": "^4.16.1",
6365
"husky": "^2.3.0",
6466
"identity-obj-proxy": "^3.0.0",

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { useStyle } from '../../hooks/styles';
44
import styles from './styles.scss';
55

66

7-
export function Button({
7+
export const Button = React.forwardRef(function Button({
88
as: Component = 'button',
99
className,
1010
danger,
@@ -14,7 +14,7 @@ export function Button({
1414
small,
1515
square,
1616
...props
17-
}) {
17+
}, ref) {
1818
const buttonClassName = useStyle(styles, 'rcx-button', {
1919
danger,
2020
ghost,
@@ -24,5 +24,5 @@ export function Button({
2424
primary,
2525
}, className);
2626

27-
return <Component className={buttonClassName} {...props} />;
28-
}
27+
return <Component className={buttonClassName} ref={ref} {...props} />;
28+
});

‎packages/fuselage/src/components/ButtonGroup/index.js

+6-4
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,22 @@ import { useStyle } from '../../hooks/styles';
44
import styles from './styles.scss';
55

66

7-
export function ButtonGroup({
7+
export const ButtonGroup = React.forwardRef(function ButtonGroup({
8+
align,
89
className,
910
invisible,
1011
stretch,
1112
vertical,
1213
wrap,
1314
...props
14-
}) {
15+
}, ref) {
1516
const buttonGroupClassName = useStyle(styles, 'rcx-button-group', {
17+
align,
1618
invisible,
1719
stretch,
1820
vertical,
1921
wrap,
2022
}, className);
2123

22-
return <div className={buttonGroupClassName} role='group' {...props}/>;
23-
}
24+
return <div className={buttonGroupClassName} role='group' ref={ref} {...props}/>;
25+
});

‎packages/fuselage/src/components/ButtonGroup/stories.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,15 @@ storiesOf('Collections|ButtonGroup', module)
2727
</Document>);
2828

2929
const props = createPropsFromKnobs({
30-
blockStretch: false,
3130
hidden: false,
3231
invisible: false,
3332
stretch: false,
3433
vertical: false,
3534
wrap: false,
35+
align: [null, {
36+
start: 'start',
37+
end: 'end',
38+
}],
3639
});
3740

3841
const Buttons = ({ count }) => new Array(count).fill(undefined).map((_, i) =>

‎packages/fuselage/src/components/ButtonGroup/styles.scss

+8
Original file line numberDiff line numberDiff line change
@@ -46,4 +46,12 @@ $default-theme: (
4646
align-items: stretch;
4747
}
4848
}
49+
50+
&--align-start {
51+
justify-content: flex-start;
52+
}
53+
54+
&--align-end {
55+
justify-content: flex-end;
56+
}
4957
}

‎packages/fuselage/src/components/CheckBox/index.js

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1-
import React, { useEffect, useRef } from 'react';
1+
import React, { forwardRef, useEffect, useRef } from 'react';
22

33
import { useStyle } from '../../hooks/styles';
44
import styles from './styles.scss';
5+
import { useMergedRefs } from '../../hooks/useMergedRefs';
56

67

7-
export function CheckBox({
8+
export const CheckBox = forwardRef(function CheckBox({
89
className,
910
indeterminate,
1011
invisible,
1112
label,
1213
...props
13-
}) {
14-
const ref = useRef();
14+
}, ref) {
15+
const innerRef = useRef();
16+
const mergedRef = useMergedRefs(ref, innerRef);
17+
1518
const checkBoxWrapperClassName = useStyle(styles, 'rcx-check-box__wrapper', {
1619
disabled: props.disabled,
1720
invisible,
@@ -21,14 +24,14 @@ export function CheckBox({
2124
const checkBoxLabelClassName = useStyle(styles, 'rcx-check-box__label');
2225

2326
useEffect(() => {
24-
ref.current.indeterminate = indeterminate;
27+
innerRef.current.indeterminate = indeterminate;
2528
}, [indeterminate]);
2629

2730
return <label className={checkBoxWrapperClassName} hidden={props.hidden}>
28-
<input type='checkbox' className={checkBoxInputClassName} ref={ref} {...props} />
31+
<input type='checkbox' className={checkBoxInputClassName} ref={mergedRef} {...props} />
2932
<span className={checkBoxFakeClassName} />
3033
{label && <span className={checkBoxLabelClassName}>
3134
{label}
3235
</span>}
3336
</label>;
34-
}
37+
});

‎packages/fuselage/src/components/Icon/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ import styles from './styles.scss';
99

1010
const mapNames = Object.entries(names).reduce((map, [symbol, name]) => Object.assign(map, { [name]: symbol }), {});
1111

12-
export function Icon({
12+
export const Icon = React.forwardRef(function Icon({
1313
name,
1414
className,
1515
...props
16-
}) {
16+
}, ref) {
1717
const iconClassName = useStyle(styles, 'rcx-icon');
1818

19-
return <i className={iconClassName} data-char={characters[mapNames[name]]} {...props} />;
20-
}
19+
return <i className={iconClassName} data-char={characters[mapNames[name]]} ref={ref} {...props} />;
20+
});

‎packages/fuselage/src/components/RadioButton/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import { useStyle } from '../../hooks/styles';
44
import styles from './styles.scss';
55

66

7-
export function RadioButton({
7+
export const RadioButton = React.forwardRef(function RadioButton({
88
className,
99
invisible,
1010
label,
1111
...props
12-
}) {
12+
}, ref) {
1313
const radioButtonWrapperClassName = useStyle(styles, 'rcx-radio-button__wrapper', {
1414
disabled: props.disabled,
1515
invisible,
@@ -19,10 +19,10 @@ export function RadioButton({
1919
const radioButtonLabelClassName = useStyle(styles, 'rcx-radio-button__label');
2020

2121
return <label className={radioButtonWrapperClassName} hidden={props.hidden}>
22-
<input type='radio' className={radioButtonInputClassName} {...props} />
22+
<input type='radio' className={radioButtonInputClassName} ref={ref} {...props} />
2323
<span className={radioButtonFakeClassName} />
2424
{label && <span className={radioButtonLabelClassName}>
2525
{label}
2626
</span>}
2727
</label>;
28-
}
28+
});

‎packages/fuselage/src/components/ToggleSwitch/index.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import { useStyle } from '../../hooks/styles';
44
import styles from './styles.scss';
55

66

7-
export function ToggleSwitch({
7+
export const ToggleSwitch = React.forwardRef(function ToggleSwitch({
88
className,
99
invisible,
1010
...props
11-
}) {
11+
}, ref) {
1212
const toggleSwitchWrapperClassName = useStyle(styles, 'rcx-toggle-switch__wrapper', {
1313
disabled: props.disabled,
1414
invisible,
@@ -17,7 +17,7 @@ export function ToggleSwitch({
1717
const toggleSwitchFakeClassName = useStyle(styles, 'rcx-toggle-switch__fake');
1818

1919
return <label className={toggleSwitchWrapperClassName} hidden={props.hidden}>
20-
<input type='checkbox' className={toggleSwitchInputClassName} {...props} />
20+
<input type='checkbox' className={toggleSwitchInputClassName} ref={ref} {...props} />
2121
<span className={toggleSwitchFakeClassName} />
2222
</label>;
23-
}
23+
});

‎packages/fuselage/src/hooks/useMergedRefs.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export const useMergedRefs = (...refs) => (refValue) => {
2+
refs.filter(Boolean).forEach((ref) => {
3+
if (typeof ref === 'function') {
4+
ref(refValue);
5+
return;
6+
}
7+
8+
ref.current = refValue;
9+
});
10+
};

‎packages/icons/package.json

+3
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@
2222
"lint": "eslint ."
2323
},
2424
"devDependencies": {
25+
"@rocket.chat/eslint-config": "^0.4.0",
26+
"eslint": "^6.1.0",
27+
"eslint-plugin-import": "^2.18.2",
2528
"glob": "^7.1.4",
2629
"is-valid-identifier": "^2.0.2",
2730
"rimraf": "^2.6.3",

0 commit comments

Comments
 (0)