Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Performance issues in development environment #89

Merged
merged 12 commits into from
Nov 5, 2019
+1,066 −2,934
Merged

fix: Performance issues in development environment #89

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
20c4207
Rewrite InputControl styles
tassoevan Oct 31, 2019
b8263e2
Rewrite InputBox styles
tassoevan Nov 1, 2019
f9e6a0d
Rewrite Box styles
tassoevan Nov 1, 2019
46144fa
Add small styling fixes
tassoevan Nov 1, 2019
8fb9630
Optimize BEM modifiers
tassoevan Nov 1, 2019
7ffca58
Fix CheckBox focus
tassoevan Nov 1, 2019
d5799cd
Remove extended styles
tassoevan Nov 1, 2019
caaa615
Drop the modifiers prop
tassoevan Nov 4, 2019
eeadf65
Use SCSS styles
tassoevan Nov 4, 2019
40b0190
Refactor props remapping
tassoevan Nov 4, 2019
e6cc1ab
Remove styled-components
tassoevan Nov 4, 2019
2921b99
Merge branch 'develop' into fix/perf
tassoevan Nov 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix CheckBox focus
@tassoevan
tassoevan committed Nov 1, 2019

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode
commit 7ffca58bdfd35f8505bc5ed446da446134d3d8e6
Binary file modified packages/fuselage/.loki/reference/chrome_iphone7_Buttons_CheckBox_States.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified packages/fuselage/.loki/reference/chrome_laptop_Buttons_CheckBox_States.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/fuselage/src/components/CheckBox/index.js
View file
Original file line number Diff line number Diff line change
@@ -24,12 +24,12 @@ export const CheckBox = React.forwardRef(function CheckBox({

useLayoutEffect(() => {
innerRef.current.indeterminate = indeterminate;
}, [indeterminate]);
}, [innerRef, indeterminate]);

const handleChange = useCallback((event) => {
innerRef.current.indeterminate = indeterminate;
onChange && onChange.call(innerRef.current, event);
}, [indeterminate, onChange]);
}, [innerRef, indeterminate, onChange]);

return <Container className={className} hidden={hidden} invisible={invisible} style={style}>
<Input ref={mergedRef} type='checkbox' onChange={handleChange} {...props} />
6 changes: 3 additions & 3 deletions packages/fuselage/src/components/CheckBox/styles.js
View file
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ const uncheckedDefaultState = css`
const uncheckedFocusState = css`
border-color: ${ ({ theme }) => theme.buttonColors.empty.focusBorderColor };
background-color: ${ ({ theme }) => theme.buttonColors.empty.focusBackgroundColor };
box-shadow: 0 0 0 to-rem(6) ${ ({ theme }) => theme.buttonColors.empty.focusShadowColor };
box-shadow: 0 0 0 ${ toRem(6) } ${ ({ theme }) => theme.buttonColors.empty.focusShadowColor };
`;

const uncheckedHoverState = css`
@@ -110,7 +110,7 @@ const checkedDefaultState = css`
const checkedFocusState = css`
border-color: ${ ({ theme }) => theme.buttonColors.primary.focusBorderColor };
background-color: ${ ({ theme }) => theme.buttonColors.primary.focusBackgroundColor };
box-shadow: 0 0 0 to-rem(6) ${ ({ theme }) => theme.buttonColors.primary.focusShadowColor };
box-shadow: 0 0 0 ${ toRem(6) } ${ ({ theme }) => theme.buttonColors.primary.focusShadowColor };
`;

const checkedHoverState = css`
@@ -155,7 +155,7 @@ const indeterminateDefaultState = css`
const indeterminateFocusState = css`
border-color: ${ ({ theme }) => theme.buttonColors.primary.focusBorderColor };
background-color: ${ ({ theme }) => theme.buttonColors.primary.focusBackgroundColor };
box-shadow: 0 0 0 to-rem(6) ${ ({ theme }) => theme.buttonColors.primary.focusShadowColor };
box-shadow: 0 0 0 ${ toRem(6) } ${ ({ theme }) => theme.buttonColors.primary.focusShadowColor };
`;

const indeterminateHoverState = css`