Skip to content

BorderControl: Render border color/style dropdown as UnitControl prefix #42212

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

Merged
aaronrobertshaw merged 4 commits into from
Jul 22, 2022
Merged

BorderControl: Render border color/style dropdown as UnitControl prefix #42212

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8a2f95e
Move border control dropdown to UnitControl Prefix
aaronrobertshaw Jul 7, 2022
fc71ace
Clean up BorderControls focus styles now UnitControl handles it
aaronrobertshaw Jul 13, 2022
ef4c90b
Move explicit width handling to UnitControl instead of styles
aaronrobertshaw Jul 13, 2022
498d1df
Add changelog
aaronrobertshaw Jul 7, 2022
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
Clean up BorderControls focus styles now UnitControl handles it
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Jul 22, 2022
commit fc71aced51229e94d444fff5a65b250812fb1d5a
2 changes: 0 additions & 2 deletions packages/components/src/border-control/border-control/component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ const UnconnectedBorderControl = (
showDropdownHeader,
sliderClassName,
value: border,
widthControlClassName,
widthUnit,
widthValue,
withSlider,
Expand Down Expand Up @@ -93,7 +92,6 @@ const UnconnectedBorderControl = (
}
label={ __( 'Border width' ) }
hideLabelFromVision
className={ widthControlClassName }
min={ 0 }
onChange={ onWidthChange }
value={ border?.width || '' }
Expand Down
5 changes: 0 additions & 5 deletions packages/components/src/border-control/border-control/hook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,10 +127,6 @@ export function useBorderControl(
return cx( styles.innerWrapper(), widthStyle, heightStyle );
}, [ isCompact, width, cx, __next36pxDefaultSize ] );

const widthControlClassName = useMemo( () => {
return cx( styles.borderWidthControl() );
}, [ cx ] );

const sliderClassName = useMemo( () => {
return cx( styles.borderSlider() );
}, [ cx ] );
Expand All @@ -145,7 +141,6 @@ export function useBorderControl(
previousStyleSelection: styleSelection,
sliderClassName,
value: border,
widthControlClassName,
widthUnit,
widthValue,
__next36pxDefaultSize,
Expand Down
19 changes: 0 additions & 19 deletions packages/components/src/border-control/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
StyledField,
StyledLabel,
} from '../base-control/styles/base-control-styles';
import { BackdropUI } from '../input-control/styles/input-control-styles';
import {
Root as UnitControlWrapper,
UnitSelect,
Expand All @@ -39,17 +38,6 @@ export const innerWrapper = () => css`
&& ${ UnitSelect } {
/* Prevent unit select forcing min height larger than its UnitControl */
min-height: 0;
${ rtl(
{ borderRadius: '0 2px 2px 0' },
{ borderRadius: '2px 0 0 2px' }
)() }
transition: box-shadow 0.1s linear, border 0.1s linear;

&:focus {
z-index: 1;
${ focusBoxShadow }
border: 1px solid ${ COLORS.ui.borderFocus };
}
}
`;

Expand Down Expand Up @@ -185,13 +173,6 @@ export const resetButton = css`
}
`;

export const borderWidthControl = () => css`
/* Target the InputControl's backdrop */
&&& ${ BackdropUI } {
transition: box-shadow 0.1s linear;
}
`;

export const borderControlStylePicker = css`
${ StyledLabel } {
${ labelStyles }
Expand Down