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.

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

Borders: Add BorderBoxControl component #38876

Merged
merged 12 commits into from
Mar 24, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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: 6 additions & 0 deletions docs/manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -611,6 +611,12 @@
"markdown_source": "../packages/components/src/base-field/README.md",
"parent": "components"
},
{
"title": "BorderBoxControl",
"slug": "border-box-control",
"markdown_source": "../packages/components/src/border-box-control/border-box-control/README.md",
"parent": "components"
},
{
"title": "BorderControl",
"slug": "border-control",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/**
* WordPress dependencies
*/
import { link, linkOff } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import Button from '../../button';
import Tooltip from '../../tooltip';
import { View } from '../../view';
import { contextConnect, WordPressComponentProps } from '../../ui/context';
import { useBorderBoxControlLinkedButton } from './hook';

import type { LinkedButtonProps } from '../types';

const BorderBoxControlLinkedButton = (
props: WordPressComponentProps< LinkedButtonProps, 'div' >,
forwardedRef: React.ForwardedRef< any >
) => {
const {
className,
isLinked,
...buttonProps
} = useBorderBoxControlLinkedButton( props );
const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );

return (
<Tooltip text={ label }>
<View className={ className }>
<Button
{ ...buttonProps }
variant={ isLinked ? 'primary' : 'secondary' }
isSmall
icon={ isLinked ? link : linkOff }
iconSize={ 16 }
aria-label={ label }
ref={ forwardedRef }
/>
</View>
</Tooltip>
);
};

const ConnectedBorderBoxControlLinkedButton = contextConnect(
BorderBoxControlLinkedButton,
'BorderBoxControlLinkedButton'
);
export default ConnectedBorderBoxControlLinkedButton;
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* WordPress dependencies
*/
import { useMemo } from '@wordpress/element';

/**
* Internal dependencies
*/
import * as styles from '../styles';
import { useContextSystem, WordPressComponentProps } from '../../ui/context';
import { useCx } from '../../utils/hooks/use-cx';

import type { LinkedButtonProps } from '../types';

export function useBorderBoxControlLinkedButton(
props: WordPressComponentProps< LinkedButtonProps, 'div' >
) {
const { className, ...otherProps } = useContextSystem(
props,
'BorderBoxControlLinkedButton'
);

// Generate class names.
const cx = useCx();
const classes = useMemo( () => {
return cx( styles.BorderBoxControlLinkedButton, className );
}, [ className ] );

return { ...otherProps, className: classes };
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './component';
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import BorderBoxControlVisualizer from '../border-box-control-visualizer';
import { BorderControl } from '../../border-control';
import { Grid } from '../../grid';
import { contextConnect, WordPressComponentProps } from '../../ui/context';
import { useBorderBoxControlSplitControls } from './hook';

import type { SplitControlsProps } from '../types';

const BorderBoxControlSplitControls = (
props: WordPressComponentProps< SplitControlsProps, 'div' >,
forwardedRef: React.ForwardedRef< any >
) => {
const {
centeredClassName,
colors,
disableCustomColors,
enableAlpha,
enableStyle,
onChange,
value,
__experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
...otherProps
} = useBorderBoxControlSplitControls( props );

const sharedBorderControlProps = {
colors,
disableCustomColors,
enableAlpha,
enableStyle,
isCompact: true,
__experimentalHasMultipleOrigins,
__experimentalIsRenderedInSidebar,
};

return (
<Grid { ...otherProps } ref={ forwardedRef } gap={ 4 }>
<BorderBoxControlVisualizer value={ value } />
<BorderControl
className={ centeredClassName }
hideLabelFromVision={ true }
label={ __( 'Top border' ) }
onChange={ ( newBorder ) => onChange( newBorder, 'top' ) }
value={ value?.top }
{ ...sharedBorderControlProps }
/>
<BorderControl
hideLabelFromVision={ true }
label={ __( 'Left border' ) }
onChange={ ( newBorder ) => onChange( newBorder, 'left' ) }
value={ value?.left }
{ ...sharedBorderControlProps }
/>
<BorderControl
hideLabelFromVision={ true }
label={ __( 'Right border' ) }
onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }
value={ value?.right }
{ ...sharedBorderControlProps }
/>
<BorderControl
className={ centeredClassName }
hideLabelFromVision={ true }
label={ __( 'Bottom border' ) }
onChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }
value={ value?.bottom }
{ ...sharedBorderControlProps }
/>
</Grid>
);
};

const ConnectedBorderBoxControlSplitControls = contextConnect(
BorderBoxControlSplitControls,
'BorderBoxControlSplitControls'
);
export default ConnectedBorderBoxControlSplitControls;
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/**
* WordPress dependencies
*/
import { useMemo } from '@wordpress/element';

/**
* Internal dependencies
*/
import * as styles from '../styles';
import { useContextSystem, WordPressComponentProps } from '../../ui/context';
import { useCx, rtl } from '../../utils/';

import type { SplitControlsProps } from '../types';

export function useBorderBoxControlSplitControls(
props: WordPressComponentProps< SplitControlsProps, 'div' >
) {
const { className, ...otherProps } = useContextSystem(
props,
'BorderBoxControlSplitControls'
);

// Generate class names.
const cx = useCx();
const classes = useMemo( () => {
return cx( styles.BorderBoxControlSplitControls, className );
}, [ className, rtl.watch() ] );

const centeredClassName = useMemo( () => {
return cx( styles.CenteredBorderControl, className );
}, [] );

return { ...otherProps, centeredClassName, className: classes };
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './component';
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { View } from '../../view';
import { contextConnect, WordPressComponentProps } from '../../ui/context';
import { useBorderBoxControlVisualizer } from './hook';

import type { VisualizerProps } from '../types';

const BorderBoxControlVisualizer = (
props: WordPressComponentProps< VisualizerProps, 'div' >,
forwardedRef: React.ForwardedRef< any >
) => {
const { value, ...otherProps } = useBorderBoxControlVisualizer( props );

return <View { ...otherProps } ref={ forwardedRef } />;
};

const ConnectedBorderBoxControlVisualizer = contextConnect(
BorderBoxControlVisualizer,
'BorderBoxControlVisualizer'
);
export default ConnectedBorderBoxControlVisualizer;
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* WordPress dependencies
*/
import { useMemo } from '@wordpress/element';

/**
* Internal dependencies
*/
import * as styles from '../styles';
import { useContextSystem, WordPressComponentProps } from '../../ui/context';
import { useCx, rtl } from '../../utils';

import type { VisualizerProps } from '../types';

export function useBorderBoxControlVisualizer(
props: WordPressComponentProps< VisualizerProps, 'div' >
) {
const { className, value, ...otherProps } = useContextSystem(
props,
'BorderBoxControlVisualizer'
);

// Generate class names.
const cx = useCx();
const classes = useMemo( () => {
return cx( styles.BorderBoxControlVisualizer( value ), className );
}, [ className, value, rtl.watch() ] );

return { ...otherProps, className: classes, value };
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './component';
Loading