Skip to content

Borders: Add BorderBoxControl component #38876

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

Borders: Add BorderBoxControl component #38876

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ac742b3
Add BorderBoxControl component
aaronrobertshaw Feb 17, 2022
d318d89
Add RTL styles for split border controls
aaronrobertshaw Mar 18, 2022
21757a4
Use ForwardRef for typing instead of Ref
aaronrobertshaw Mar 18, 2022
9062684
Move inline visualizer styles to dynamic class
aaronrobertshaw Mar 21, 2022
d325422
Add RTL styles for BorderBoxControlVisualizer
aaronrobertshaw Mar 21, 2022
ad3f0e2
Avoid using hardcoded DOM element
aaronrobertshaw Mar 21, 2022
1ac2425
Use Grid for split controls layout
aaronrobertshaw Mar 21, 2022
821d780
Prevent application of value prop on visualizer element
aaronrobertshaw Mar 21, 2022
263f3a1
Refactor clamped and shorthand border style generation
aaronrobertshaw Mar 21, 2022
804ec2a
Update BorderBoxControl tests to match latest aria labels
aaronrobertshaw Mar 21, 2022
ca889df
Add visually hidden labels for split border controls
aaronrobertshaw Mar 22, 2022
1aeb812
Add SlotFill provider as wrapper to storybook example
aaronrobertshaw Mar 24, 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
Update BorderBoxControl tests to match latest aria labels
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Mar 24, 2022
commit 804ec2ad1a556345d43ce0acf385af092b64cad7
15 changes: 7 additions & 8 deletions packages/components/src/border-box-control/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,9 @@ const props = {
value: undefined,
};

const toggleLabelRegex = /Border color( and style)* picker/;
const colorPickerRegex = /Border color picker/;

const renderBorderBoxControl = ( customProps ) => {
return render( <BorderBoxControl { ...{ ...props, ...customProps } } /> );
};
Expand Down Expand Up @@ -75,7 +78,7 @@ describe( 'BorderBoxControl', () => {
renderBorderBoxControl();

const label = screen.getByText( props.label );
const colorButton = screen.getByLabelText( 'Open border options' );
const colorButton = screen.getByLabelText( toggleLabelRegex );
const widthInput = screen.getByRole( 'spinbutton' );
const unitSelect = screen.getByRole( 'combobox' );
const slider = screen.getByRole( 'slider' );
Expand Down Expand Up @@ -148,7 +151,7 @@ describe( 'BorderBoxControl', () => {
it( 'should omit style options when requested', () => {
renderBorderBoxControl( { enableStyle: false } );

const colorButton = screen.getByLabelText( 'Open border options' );
const colorButton = screen.getByLabelText( colorPickerRegex );
fireEvent.click( colorButton );

const styleLabel = screen.queryByText( 'Style' );
Expand All @@ -167,9 +170,7 @@ describe( 'BorderBoxControl', () => {
it( 'should render split view by default when mixed values provided', () => {
renderBorderBoxControl( { value: mixedBorders } );

const colorButtons = screen.getAllByLabelText(
'Open border options'
);
const colorButtons = screen.getAllByLabelText( toggleLabelRegex );
const widthInputs = screen.getAllByRole( 'spinbutton' );
const unitSelects = screen.getAllByRole( 'combobox' );
const sliders = screen.queryAllByRole( 'slider' );
Expand Down Expand Up @@ -208,9 +209,7 @@ describe( 'BorderBoxControl', () => {
renderBorderBoxControl( { enableStyle: false } );
clickButton( 'Unlink sides' );

const colorButtons = screen.getAllByLabelText(
'Open border options'
);
const colorButtons = screen.getAllByLabelText( colorPickerRegex );

colorButtons.forEach( ( button ) => {
fireEvent.click( button );
Expand Down