Skip to content

Commit 25d3fed

Browse files
lbogdanCompuIves
lbogdan
authored and
CompuIves
committed
Small fixes (codesandbox#434)
* Fixed "Received `true` for a non-boolean attribute `small`" warning. * Upgraded react-show to 2.0.0, fixes "React does not recognize the `maxHeight` prop on a DOM element" warning. * Fixed "Unknown event handler property `onDelete`" warning. * Fixed "Received `true` for a non-boolean attribute `border`" warning. * Button: updated test snapshots.
1 parent 5610037 commit 25d3fed

File tree

6 files changed

+83
-37
lines changed

6 files changed

+83
-37
lines changed

‎packages/app/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@
162162
"react-redux": "^5.0.5",
163163
"react-router-dom": "^4.2.2",
164164
"react-router-redux": "next",
165-
"react-show": "^1.1.2",
165+
"react-show": "^2.0.0",
166166
"react-split-pane": "^0.1.63",
167167
"react-stripe-elements": "^1.2.0",
168168
"react-tippy": "^0.14.0",

‎packages/app/src/app/components/buttons/Button.js‎

Lines changed: 29 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,7 @@ const styles = css`
5555
${props => !props.disabled && `box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);`};
5656
width: ${props => (props.block ? '100%' : 'inherit')};
5757
58-
${props => () => {
59-
if (props.small) {
60-
return `
61-
padding: 0.5rem 0.75rem;
62-
font-size: 0.875rem;
63-
`;
64-
}
65-
return 'padding: 0.65rem 2.25rem;';
66-
}} user-select: none;
58+
user-select: none;
6759
text-decoration: none;
6860
6961
${props =>
@@ -86,25 +78,46 @@ const styles = css`
8678
box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
8779
}`};
8880
`;
89-
const LinkButton = styled(Link)`${styles};`;
90-
const AButton = styled.a`${styles};`;
91-
const Button = styled.button`${styles};`;
81+
const LinkButton = styled(Link)`
82+
${styles};
83+
`;
84+
const AButton = styled.a`
85+
${styles};
86+
`;
87+
const Button = styled.button`
88+
${styles};
89+
`;
9290

9391
type Props = {
9492
[key: any]: any,
9593
to: ?string,
9694
href: ?string,
95+
small: ?boolean,
96+
style: ?any,
9797
};
9898

99-
export default (props: Props) => {
99+
export default ({ small = false, style = {}, ...props }: Props) => {
100100
// Link
101+
102+
const newStyle = {
103+
...style,
104+
...(small
105+
? {
106+
padding: '0.5rem 0.75rem',
107+
fontSize: '0.875rem',
108+
}
109+
: {
110+
padding: '0.65rem 2.25rem',
111+
}),
112+
};
113+
101114
if (props.to) {
102-
return <LinkButton {...props} />;
115+
return <LinkButton style={newStyle} {...props} />;
103116
}
104117

105118
if (props.href) {
106-
return <AButton {...props} />;
119+
return <AButton style={newStyle} {...props} />;
107120
}
108121

109-
return <Button {...props} />;
122+
return <Button style={newStyle} {...props} />;
110123
};

‎packages/app/src/app/components/buttons/__snapshots__/Button.test.js.snap‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ exports[`Button renders 1`] = `
2323
font-weight: 400;
2424
box-shadow: 0 3px 3px rgba(0,0,0,0.5);
2525
width: inherit;
26-
padding: 0.65rem 2.25rem;
2726
-webkit-user-select: none;
2827
-moz-user-select: none;
2928
-ms-user-select: none;
@@ -58,6 +57,11 @@ exports[`Button renders 1`] = `
5857
5958
<button
6059
className="c0"
60+
style={
61+
Object {
62+
"padding": "0.65rem 2.25rem",
63+
}
64+
}
6165
>
6266
Test
6367
</button>
@@ -85,7 +89,6 @@ exports[`Button renders disabled 1`] = `
8589
color: rgb(69,79,84);
8690
font-weight: 400;
8791
width: inherit;
88-
padding: 0.65rem 2.25rem;
8992
-webkit-user-select: none;
9093
-moz-user-select: none;
9194
-ms-user-select: none;
@@ -96,6 +99,11 @@ exports[`Button renders disabled 1`] = `
9699
<button
97100
className="c0"
98101
disabled={true}
102+
style={
103+
Object {
104+
"padding": "0.65rem 2.25rem",
105+
}
106+
}
99107
>
100108
Test
101109
</button>
@@ -124,7 +132,6 @@ exports[`Button renders href 1`] = `
124132
font-weight: 400;
125133
box-shadow: 0 3px 3px rgba(0,0,0,0.5);
126134
width: inherit;
127-
padding: 0.65rem 2.25rem;
128135
-webkit-user-select: none;
129136
-moz-user-select: none;
130137
-ms-user-select: none;
@@ -160,6 +167,11 @@ exports[`Button renders href 1`] = `
160167
<a
161168
className="c0"
162169
href="https://ivesvh.com"
170+
style={
171+
Object {
172+
"padding": "0.65rem 2.25rem",
173+
}
174+
}
163175
>
164176
Test
165177
</a>
@@ -188,7 +200,6 @@ exports[`Button renders onClick 1`] = `
188200
font-weight: 400;
189201
box-shadow: 0 3px 3px rgba(0,0,0,0.5);
190202
width: inherit;
191-
padding: 0.65rem 2.25rem;
192203
-webkit-user-select: none;
193204
-moz-user-select: none;
194205
-ms-user-select: none;
@@ -224,6 +235,11 @@ exports[`Button renders onClick 1`] = `
224235
<button
225236
className="c0"
226237
onClick={[Function]}
238+
style={
239+
Object {
240+
"padding": "0.65rem 2.25rem",
241+
}
242+
}
227243
>
228244
Test
229245
</button>
@@ -252,8 +268,6 @@ exports[`Button renders properties 1`] = `
252268
font-weight: 400;
253269
box-shadow: 0 3px 3px rgba(0,0,0,0.5);
254270
width: inherit;
255-
padding: 0.5rem 0.75rem;
256-
font-size: 0.875rem;
257271
-webkit-user-select: none;
258272
-moz-user-select: none;
259273
-ms-user-select: none;
@@ -288,6 +302,12 @@ exports[`Button renders properties 1`] = `
288302
289303
<button
290304
className="c0"
305+
style={
306+
Object {
307+
"fontSize": "0.875rem",
308+
"padding": "0.5rem 0.75rem",
309+
}
310+
}
291311
>
292312
Test
293313
</button>
@@ -316,7 +336,6 @@ exports[`Button renders secondary 1`] = `
316336
font-weight: 400;
317337
box-shadow: 0 3px 3px rgba(0,0,0,0.5);
318338
width: inherit;
319-
padding: 0.65rem 2.25rem;
320339
-webkit-user-select: none;
321340
-moz-user-select: none;
322341
-ms-user-select: none;
@@ -351,6 +370,11 @@ exports[`Button renders secondary 1`] = `
351370
352371
<button
353372
className="c0"
373+
style={
374+
Object {
375+
"padding": "0.65rem 2.25rem",
376+
}
377+
}
354378
>
355379
Test
356380
</button>
@@ -379,7 +403,6 @@ exports[`Button renders to 1`] = `
379403
font-weight: 400;
380404
box-shadow: 0 3px 3px rgba(0,0,0,0.5);
381405
width: inherit;
382-
padding: 0.65rem 2.25rem;
383406
-webkit-user-select: none;
384407
-moz-user-select: none;
385408
-ms-user-select: none;
@@ -416,6 +439,11 @@ exports[`Button renders to 1`] = `
416439
className="c0"
417440
href="https://ivesvh.com"
418441
onClick={[Function]}
442+
style={
443+
Object {
444+
"padding": "0.65rem 2.25rem",
445+
}
446+
}
419447
>
420448
Test
421449
</a>

‎packages/app/src/app/components/sandbox/DeleteSandboxButton.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export default class DeleteSandboxButtonContainer extends React.PureComponent<
3535
};
3636

3737
render() {
38-
return <DeleteSandboxButton {...this.props} onClick={this.deleteSandbox} />;
38+
const { onDelete, ...props } = this.props;
39+
return <DeleteSandboxButton {...props} onClick={this.deleteSandbox} />;
3940
}
4041
}

‎packages/app/src/app/pages/Profile/Navigation.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,17 @@ const NavigationLink = styled(NavLink)`
1818
color: rgba(255, 255, 255, 0.5);
1919
text-decoration: none;
2020
21-
${({ border }) =>
22-
border && `border-right: 1px solid rgba(255, 255, 255, 0.2)`};
23-
24-
${delayEffect(0.2)}; &:hover {
21+
${delayEffect(0.2)};
22+
&:hover {
2523
color: white;
2624
}
2725
`;
2826

29-
const CenteredRow = styled(Row)`width: 100%;`;
27+
const CenteredRow = styled(Row)`
28+
width: 100%;
29+
`;
30+
31+
const borderStyle = { borderRight: '1px solid rgba(255, 255, 255, 0.2)' };
3032

3133
export default ({
3234
username,
@@ -44,7 +46,7 @@ export default ({
4446
color: 'white',
4547
}}
4648
exact
47-
border
49+
style={borderStyle}
4850
>
4951
SHOWCASE
5052
</NavigationLink>
@@ -53,7 +55,7 @@ export default ({
5355
activeStyle={{
5456
color: 'white',
5557
}}
56-
border
58+
style={borderStyle}
5759
>
5860
SANDBOXES ({sandboxCount})
5961
</NavigationLink>

‎yarn.lock‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11695,7 +11695,7 @@ querystringify@~1.0.0:
1169511695
version "1.0.0"
1169611696
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-1.0.0.tgz#6286242112c5b712fa654e526652bf6a13ff05cb"
1169711697

11698-
raf@^3.1.0:
11698+
raf@^3.1.0, raf@^3.4.0:
1169911699
version "3.4.0"
1170011700
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
1170111701
dependencies:
@@ -12057,9 +12057,11 @@ react-router@^4.1.1, react-router@^4.2.0:
1205712057
prop-types "^15.5.4"
1205812058
warning "^3.0.0"
1205912059

12060-
react-show@^1.1.2:
12061-
version "1.1.2"
12062-
resolved "https://registry.yarnpkg.com/react-show/-/react-show-1.1.2.tgz#50f6c7c1f80e5303b254e429d4d33ba5721d1a10"
12060+
react-show@^2.0.0:
12061+
version "2.0.0"
12062+
resolved "https://registry.yarnpkg.com/react-show/-/react-show-2.0.0.tgz#3b33e7eea54a44233b50bf67d757fcfba2930de3"
12063+
dependencies:
12064+
raf "^3.4.0"
1206312065

1206412066
react-side-effect@^1.1.0:
1206512067
version "1.1.3"

0 commit comments

Comments
 (0)