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

components: Use updated range styles #33824

Merged
merged 8 commits into from
Aug 6, 2021
Merged

components: Use updated range styles #33824

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9cc3962
Use updated range styles
sarayourfriend Aug 2, 2021
cd092e7
Add CHANGELOG entry
sarayourfriend Aug 2, 2021
5415704
Fix focus styles for Chrome and Safari
sarayourfriend Aug 4, 2021
3dbfc89
Fix tooltip offset
sarayourfriend Aug 4, 2021
763313b
Remove default rail color value
sarayourfriend Aug 4, 2021
0646a8a
Remove margin and fix border radius
sarayourfriend Aug 4, 2021
ca952f7
Fix disabled styles
sarayourfriend Aug 5, 2021
1060532
Fix marks and simplify tooltip positioning
sarayourfriend Aug 5, 2021
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
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@

- Listen to `resize` events correctly in `useBreakpointIndex`. This hook is used in `useResponsiveValue` and consequently in the `Flex` and `Grid` components ([#33902](https://github.com/WordPress/gutenberg/pull/33902))

### Breaking Change

- Updated the visual styles of the RangeControl component ([#33824](https://github.com/WordPress/gutenberg/pull/33824))

## 15.0.0 (2021-07-29)

### Breaking Change
Expand Down
3 changes: 2 additions & 1 deletion packages/components/src/range-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,10 +245,11 @@ function RangeControl(
style={ { width: fillValueOffset } }
trackColor={ trackColor }
/>
<ThumbWrapper style={ offsetStyle }>
<ThumbWrapper style={ offsetStyle } disabled={ disabled }>
<Thumb
aria-hidden={ true }
isFocused={ isThumbFocused }
disabled={ disabled }
/>
</ThumbWrapper>
{ enableTooltip && (
Expand Down
53 changes: 34 additions & 19 deletions packages/components/src/range-control/styles/range-control-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { COLORS, reduceMotion, rtl } from '../../utils';
import { space } from '../../ui/utils/space';

const rangeHeight = () => css( { height: 30, minHeight: 30 } );
const thumbSize = 20;
const thumbSize = 12;

export const Root = styled.div`
-webkit-tap-highlight-color: transparent;
Expand All @@ -37,15 +37,13 @@ export const Wrapper = styled.div`
color: ${ COLORS.blue.medium.focus };
display: block;
flex: 1;
padding-top: 15px;
padding-top: 18px;
position: relative;
width: 100%;

${ wrapperColor };
${ rangeHeight };
${ wrapperMargin };

${ rtl( { marginLeft: 10 } ) }
`;

export const BeforeIconWrapper = styled.span`
Expand Down Expand Up @@ -83,6 +81,7 @@ export const Rail = styled.span`
position: absolute;
margin-top: 14px;
top: 0;
border-radius: 9999px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for doing that!

As it turns out, there appears to be a browser error here, which I will codepen and report to the Chrome team. Spot the odd-one out (open in new tab to see at 1x):

whaaa


${ railBackgroundColor };
`;
Expand All @@ -101,7 +100,7 @@ const trackBackgroundColor = ( { disabled, trackColor } ) => {

export const Track = styled.span`
background-color: currentColor;
border-radius: 1px;
border-radius: 9999px;
box-sizing: border-box;
height: 3px;
pointer-events: none;
Expand Down Expand Up @@ -164,48 +163,64 @@ export const MarkLabel = styled.span`
${ markLabelFill };
`;

const thumbColor = ( { disabled } ) =>
disabled
? css`
background-color: ${ COLORS.lightGray[ 800 ] };
`
: css`
background-color: var( --wp-admin-theme-color );
`;

export const ThumbWrapper = styled.span`
align-items: center;
box-sizing: border-box;
display: flex;
height: ${ thumbSize }px;
justify-content: center;
margin-top: 5px;
margin-top: 9px;
outline: 0;
pointer-events: none;
position: absolute;
top: 0;
user-select: none;
width: ${ thumbSize }px;
border-radius: 50%;
transform: translateX( 4.5px );

${ rtl( { marginLeft: -10 } ) }
${ thumbColor };
${ rtl( { marginLeft: -10 } ) };
`;

const thumbFocus = ( { isFocused } ) => {
return css( {
borderColor: isFocused ? COLORS.ui.borderFocus : COLORS.darkGray[ 200 ],
boxShadow: isFocused
? `
0 0 0 1px ${ COLORS.ui.borderFocus }
`
: `
0 0 0 rgba(0, 0, 0, 0)
`,
} );
return isFocused
? css`
&::before {
content: ' ';
position: absolute;
background-color: transparent;
box-shadow: 0 0 0 1.5px var( --wp-admin-theme-color );
border-radius: 50%;
height: ${ thumbSize + 4 }px;
width: ${ thumbSize + 4 }px;
top: -2px;
left: -2px;
}
`
: '';
};

export const Thumb = styled.span`
align-items: center;
background-color: white;
border-radius: 50%;
border: 1px solid ${ COLORS.darkGray[ 200 ] };
box-sizing: border-box;
height: 100%;
outline: 0;
position: absolute;
user-select: none;
width: 100%;

${ thumbColor };
${ thumbFocus };
`;

Expand Down