Skip to content

Borders: Add new BorderControl component #37769

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 31 commits into from
Mar 24, 2022
Merged

Borders: Add new BorderControl component #37769

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
ad80204
Add BorderControl component
aaronrobertshaw Jan 4, 2022
08a4aaf
Improve docs and comments for width prop
aaronrobertshaw Feb 18, 2022
45b2fd9
Target BackdropUI instead of div for removing border
aaronrobertshaw Feb 18, 2022
3c072f3
Add RTL styles
aaronrobertshaw Feb 18, 2022
a6be837
Switch BorderControlStylePicker to use inner Flex component
aaronrobertshaw Feb 18, 2022
95a74a7
Refactor label styles
aaronrobertshaw Feb 18, 2022
a7ecb60
Add cx to useMemo deps
aaronrobertshaw Feb 18, 2022
a3fd0e0
Use StyledField to target slider margin removal
aaronrobertshaw Feb 18, 2022
f6cbe7f
Fix type ignoring for color components
aaronrobertshaw Feb 18, 2022
8d1c5a1
Move color indicator wrapper styles to dynamic class
aaronrobertshaw Feb 18, 2022
51574d6
Use React.ForwardRef<any> for typing
aaronrobertshaw Feb 18, 2022
3e23b82
Use Root to target UnitControl wrapper
aaronrobertshaw Feb 18, 2022
757da54
Add default to docs for shouldSanitizeBorder
aaronrobertshaw Feb 18, 2022
c1f7f53
Add default to type docs for enableStyle
aaronrobertshaw Feb 18, 2022
81bfad0
Update width type to CSSProperties['width']
aaronrobertshaw Feb 18, 2022
cf87f11
Add default for enableStyle to dropdown js docs
aaronrobertshaw Feb 18, 2022
0b79b77
Remove extraneous width style
aaronrobertshaw Feb 18, 2022
57d87ef
Fix unit and value parsing after changes to UnitControl utils
aaronrobertshaw Mar 15, 2022
202800c
Make inner unit control fill available height
aaronrobertshaw Mar 15, 2022
dfe7470
Add tooltip for border style options
aaronrobertshaw Mar 16, 2022
9be938d
Improve typing for colors array
aaronrobertshaw Mar 16, 2022
1782b43
Improve aria labels for color and style popover toggle button
aaronrobertshaw Mar 16, 2022
b17da1a
Comment explaining color indicator styling choice
aaronrobertshaw Mar 16, 2022
b8da8d4
Only show border on indicator when style has been selected
aaronrobertshaw Mar 18, 2022
9829605
Fix RTL handling and style naming
aaronrobertshaw Mar 22, 2022
32e0120
Allow color and style picker to use flyout positioning
aaronrobertshaw Mar 22, 2022
4f538d6
Add multi origin colors to storybook example
aaronrobertshaw Mar 22, 2022
345b49a
Make dropdown header optional via new prop
aaronrobertshaw Mar 22, 2022
be99ab1
Update unit tests for optional color/style dropdown header
aaronrobertshaw Mar 22, 2022
02562bb
Use more concise CSS rule to remove whitespace
aaronrobertshaw Mar 23, 2022
535cd0d
Fix tooltips within color/style dropdown
aaronrobertshaw Mar 23, 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
Fix RTL handling and style naming
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Mar 22, 2022
commit 9829605f31836421273e4df985e7f475fd225219
14 changes: 7 additions & 7 deletions packages/components/src/border-control/border-control-dropdown/hook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,31 +52,31 @@ export function useBorderControlDropdown(
// Generate class names.
const cx = useCx();
const classes = useMemo( () => {
return cx( styles.BorderControlDropdown, className );
return cx( styles.borderControlDropdown(), className );
}, [ className, cx ] );

const indicatorClassName = useMemo( () => {
return cx( styles.BorderColorIndicator );
return cx( styles.borderColorIndicator );
}, [ cx ] );

const indicatorWrapperClassName = useMemo( () => {
return cx( styles.ColorIndicatorWrapper( border ) );
return cx( styles.colorIndicatorWrapper( border ) );
}, [ border, cx ] );

const popoverClassName = useMemo( () => {
return cx( styles.BorderControlPopover );
return cx( styles.borderControlPopover );
}, [ cx ] );

const popoverControlsClassName = useMemo( () => {
return cx( styles.BorderControlPopoverControls );
return cx( styles.borderControlPopoverControls );
}, [ cx ] );

const popoverContentClassName = useMemo( () => {
return cx( styles.BorderControlPopoverContent );
return cx( styles.borderControlPopoverContent );
}, [ cx ] );

const resetButtonClassName = useMemo( () => {
return cx( styles.ResetButton );
return cx( styles.resetButton );
}, [ cx ] );

return {
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/border-control/border-control-style-picker/hook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ export function useBorderControlStylePicker(
// Generate class names.
const cx = useCx();
const classes = useMemo( () => {
return cx( styles.BorderControlStylePicker, className );
return cx( styles.borderControlStylePicker, className );
}, [ className, cx ] );

const buttonClassName = useMemo( () => {
return cx( styles.BorderStyleButton );
return cx( styles.borderStyleButton );
}, [ cx ] );

return { ...otherProps, className: classes, buttonClassName };
Expand Down
10 changes: 5 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 @@ -109,23 +109,23 @@ export function useBorderControl(
// Generate class names.
const cx = useCx();
const classes = useMemo( () => {
return cx( styles.BorderControl, className );
return cx( styles.borderControl, className );
}, [ className, cx ] );

const innerWrapperClassName = useMemo( () => {
const wrapperWidth = isCompact ? '90px' : width;
const widthStyle =
!! wrapperWidth && styles.WrapperWidth( wrapperWidth );
!! wrapperWidth && styles.wrapperWidth( wrapperWidth );

return cx( styles.InnerWrapper, widthStyle );
return cx( styles.innerWrapper(), widthStyle );
}, [ isCompact, width, cx ] );

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

const sliderClassName = useMemo( () => {
return cx( styles.BorderSlider );
return cx( styles.borderSlider() );
}, [ cx ] );

return {
Expand Down
32 changes: 16 additions & 16 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 @@ -22,11 +22,11 @@ const labelStyles = css`
font-weight: 500;
`;

export const BorderControl = css`
export const borderControl = css`
position: relative;
`;

export const InnerWrapper = css`
export const innerWrapper = () => css`
border: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };
border-radius: 2px;
flex: 1 0 40%;
Expand All @@ -48,14 +48,14 @@ export const InnerWrapper = css`
}
`;

export const WrapperWidth = ( width: CSSProperties[ 'width' ] ) => {
export const wrapperWidth = ( width: CSSProperties[ 'width' ] ) => {
return css`
width: ${ width };
flex: 0 0 auto;
`;
};

export const BorderControlDropdown = css`
export const borderControlDropdown = () => css`
background: #fff;
${ rtl(
{
Expand All @@ -74,7 +74,7 @@ export const BorderControlDropdown = css`
}
`;

export const ColorIndicatorBorder = ( border?: Border ) => {
export const colorIndicatorBorder = ( border?: Border ) => {
const { color, style } = border || {};

const fallbackColor =
Expand All @@ -86,13 +86,13 @@ export const ColorIndicatorBorder = ( border?: Border ) => {
`;
};

export const ColorIndicatorWrapper = ( border?: Border ) => {
export const colorIndicatorWrapper = ( border?: Border ) => {
const { style } = border || {};

return css`
border-radius: 9999px;
border: 2px solid transparent;
${ style ? ColorIndicatorBorder( border ) : undefined }
${ style ? colorIndicatorBorder( border ) : undefined }
width: 28px;
height: 28px;
padding: 2px;
Expand All @@ -115,14 +115,14 @@ export const ColorIndicatorWrapper = ( border?: Border ) => {
`;
};

export const BorderControlPopover = css`
export const borderControlPopover = css`
/* Remove padding from content, this will be re-added via inner elements*/
&& > div > div {
padding: 0;
}
`;

export const BorderControlPopoverControls = css`
export const borderControlPopoverControls = css`
padding: ${ space( 4 ) };

> div:first-of-type > ${ StyledLabel } {
Expand All @@ -136,10 +136,10 @@ export const BorderControlPopoverControls = css`
}
`;

export const BorderControlPopoverContent = css``;
export const BorderColorIndicator = css``;
export const borderControlPopoverContent = css``;
export const borderColorIndicator = css``;

export const ResetButton = css`
export const resetButton = css`
justify-content: center;
width: 100%;

Expand All @@ -150,7 +150,7 @@ export const ResetButton = css`
}
`;

export const BorderWidthControl = css`
export const borderWidthControl = () => css`
/* Target the InputControl's backdrop */
&&& ${ BackdropUI } {
border: none;
Expand All @@ -163,13 +163,13 @@ export const BorderWidthControl = css`
}
`;

export const BorderControlStylePicker = css`
export const borderControlStylePicker = css`
${ StyledLabel } {
${ labelStyles }
}
`;

export const BorderStyleButton = css`
export const borderStyleButton = css`
&&&&& {
min-width: 30px;
width: 30px;
Expand All @@ -178,7 +178,7 @@ export const BorderStyleButton = css`
}
`;

export const BorderSlider = css`
export const borderSlider = () => css`
flex: 1 1 60%;
${ rtl( { marginRight: space( 3 ) } )() }

Expand Down