Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update DateTimePickerControl's popover styling to work with slot-fill (#35343) 

* Tweak CSS styling of popover to accommodate usage with slot-fill

* Story for DateTimePickerControl use with slot-fill

* Changelog
This commit is contained in:
Matt Sherman 2022-11-05 22:03:00 -04:00 committed by GitHub
parent 254fbd994f
commit 17fe37cafe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/components/changelog/update-date-time-picker-control-picker-classname Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fix DateTimePickerControl's popover styling when slot-fill is used.

6
packages/js/components/src/date-time-picker-control/date-time-picker-control.scss
View File

@ -5,7 +5,9 @@
margin-right: 8px;
}
.components-datetime__date {
border-top: 0;
&__popover {
.components-datetime__date {
border-top: 0;
}
}
}

3
packages/js/components/src/date-time-picker-control/date-time-picker-control.tsx
View File

@ -280,6 +280,9 @@ export const DateTimePickerControl: React.FC< DateTimePickerControlProps > = ( {
/>
</BaseControl>
) }
popoverProps={ {
className: 'woocommerce-date-time-picker-control__popover',
} }
renderContent={ () => {
const Picker = isDateOnlyPicker ? DatePicker : WpDateTimePicker;
const inputDateTime = parseAsLocalDateTime( inputString );

31
packages/js/components/src/date-time-picker-control/stories/index.tsx
View File

@ -2,13 +2,13 @@
* External dependencies
*/
import React from 'react';
import { Button } from '@wordpress/components';
import { Button, Popover, SlotFillProvider } from '@wordpress/components';
import { createElement, useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import { DateTimePickerControl } from '../';
import { DateTimePickerControl, defaultDateFormat } from '../';
export default {
title: 'WooCommerce Admin/components/DateTimePickerControl',
@ -147,3 +147,30 @@ ControlledDateOnlyEndOfDay.args = {
timeForDateOnly: 'end-of-day',
};
ControlledDateOnlyEndOfDay.decorators = Controlled.decorators;
function PopoverSlotDecorator( Story, props ) {
return (
<div>
<SlotFillProvider>
<div>
<Story
args={ {
...props.args,
} }
/>
</div>
<Popover.Slot />
</SlotFillProvider>
</div>
);
}
export const WithPopoverSlot = Template.bind( {} );
WithPopoverSlot.args = {
...Basic.args,
label: 'Start date',
placeholder: 'Enter the start date',
help: 'There is a SlotFillProvider and Popover.Slot on the page',
isDateOnlyPicker: true,
};
WithPopoverSlot.decorators = [ PopoverSlotDecorator ];