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

Update: Refactor ColorPalette by extracting its design #17154

Merged
merged 1 commit into from
Oct 2, 2019
Merged

Update: Refactor ColorPalette by extracting its design #17154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 5 additions & 1 deletion assets/stylesheets/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,11 @@ $z-layers: (
".components-resizable-box__corner-handle": 2,

// Make sure block manager sticky category titles appear above the options
".edit-post-manage-blocks-modal__category-title": 1
".edit-post-manage-blocks-modal__category-title": 1,

".components-circular-option-picker__option.is-active": 1,
// Needs to be higher than .components-circular-option-picker__option.is-active.
".components-circular-option-picker__option.is-active + .dashicons-saved": 2
);

@function z-index( $key ) {
Expand Down
110 changes: 110 additions & 0 deletions packages/components/src/circular-option-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* Internal dependencies
*/
import Button from '../button';
import Dropdown from '../dropdown';
import Tooltip from '../tooltip';
import Dashicon from '../dashicon';

function Option( {
className,
isSelected,
tooltipText,
...additionalProps
} ) {
const optionButton = (
<button
type="button"
aria-pressed={ isSelected }
className={ classnames(
className,
'components-circular-option-picker__option',
{ 'is-active': isSelected }
) }
{ ...additionalProps }
/>
);
return (
<div className="components-circular-option-picker__option-wrapper">
{ tooltipText ?
( <Tooltip text={ tooltipText }>{ optionButton }</Tooltip> ) :
optionButton
}
{ isSelected && <Dashicon icon="saved" /> }
</div>
);
}

function DropdownLinkAction( {
buttonProps,
className,
dropdownProps,
linkText,
} ) {
return (
<Dropdown
className={ classnames(
'components-circular-option-picker__dropdown-link-action',
className
) }
renderToggle={ ( { isOpen, onToggle } ) => (
<Button
aria-expanded={ isOpen }
onClick={ onToggle }
isLink
{ ...buttonProps }
>
{ linkText }
</Button>
) }
{ ...dropdownProps }
/>
);
}

function ButtonAction( {
className,
children,
...additionalProps
} ) {
return (
<Button
className={ classnames(
'components-circular-option-picker__clear',
className
) }
type="button"
isSmall
isDefault
{ ...additionalProps }
>
{ children }
</Button>
);
}

export default function CircularOptionPicker( {
actions,
className,
options,
} ) {
return (
<div className={ classnames( 'components-circular-option-picker', className ) }>
{ options }
{ actions && (
<div className="components-circular-option-picker__custom-clear-wrapper">
{ actions }
</div>
) }
</div>
);
}

CircularOptionPicker.Option = Option;
CircularOptionPicker.ButtonAction = ButtonAction;
CircularOptionPicker.DropdownLinkAction = DropdownLinkAction;
106 changes: 106 additions & 0 deletions packages/components/src/circular-option-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
$color-palette-circle-size: 28px;
$color-palette-circle-spacing: 14px;

.components-circular-option-picker {
margin-right: -14px;
width: calc(100% + 14px);

.components-circular-option-picker__custom-clear-wrapper {
width: calc(100% - 14px);
display: flex;
justify-content: flex-end;
}
}

.components-circular-option-picker__option-wrapper {
display: inline-block;
height: $color-palette-circle-size;
width: $color-palette-circle-size;
margin-right: $color-palette-circle-spacing;
margin-bottom: $color-palette-circle-spacing;
vertical-align: top;
transform: scale(1);
transition: 100ms transform ease;
@include reduce-motion("transition");
&:hover {
transform: scale(1.2);
}

// Ensure that the <div> that <Dropdown> wraps our toggle button with is full height
& > div {
height: 100%;
width: 100%;
}
}

.components-circular-option-picker__option {
display: inline-block;
vertical-align: top;
height: 100%;
width: 100%;
border: none;
border-radius: 50%;
background: transparent;
box-shadow: inset 0 0 0 ($color-palette-circle-size / 2);
transition: 100ms box-shadow ease;
@include reduce-motion("transition");
cursor: pointer;

&.is-active {
box-shadow: inset 0 0 0 4px;
position: relative;
z-index: z-index(".components-circular-option-picker__option.is-active");

& + .dashicons-saved {
position: absolute;
left: 4px;
top: 4px;
border-radius: 50%;
z-index: z-index(".components-circular-option-picker__option.is-active + .dashicons-saved");
background: $white;
pointer-events: none;
}
}

&::after {
content: "";
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
border-radius: $radius-round;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
// Show a thin circular outline in Windows high contrast mode, otherwise the button is invisible.
border: 1px solid transparent;
}

&:focus {
outline: none;
&::after {
content: "";
border: #{ $border-width * 2 } solid $dark-gray-400;
width: 32px;
height: 32px;
position: absolute;
top: -2px;
left: -2px;
border-radius: $radius-round;
box-shadow: inset 0 0 0 2px $white;
}
}
}

.components-circular-option-picker__button-action .components-circular-option-picker__option {
color: $white;
background: $white;
}


.components-circular-option-picker__dropdown-link-action {
margin-right: $grid-size-large;

.components-button {
line-height: 22px;
}
}
Loading