Commit Graph

146 Commits

Author SHA1 Message Date
Moon 62a957c75d
Add aria-label for simple select dropdown in select-control component (#35808)
* Add aria-label for simple select dropdown

* Add changelog

* Use placeholder value

* Allow aria label prop and use label as a fallback

* Update test snapshot

* Add changelog
2022-12-16 09:55:55 -08:00
Matt Sherman c94a5c6f4b
Refactor AttributeField into sub-components (#35997)
* Add className support to ListItem
* Refactor to extract AttributeListItem component
* Use AttributeListItem component in AttributeField
* Extract AttributeEmptyState from AttributeField
* Use AttributeEmptyState in AttributeField
* Add default value for label prop on AddAttributeListItem
* Add props for labels in AddAttributeModal
* Add props for labels in EditAttributeModal
2022-12-15 21:49:02 -05:00
Joel Thiessen 54f22aa437
Adding delayed spotlight to feedback button on current product page (#35865) 2022-12-15 16:09:21 -08:00
Maikel David Pérez Gómez 393cc629d9
Add pagination to variations list (#35979)
* Add changelog

* Add pagination to variations list

* Apply styles for pagination paddings and to keep it at the bottom of the section card

* Returning back per page option from 2 to 25

* Fix pagination label text from uppercase to normal and font styles

* Update variation footer gap

Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>
2022-12-15 10:13:29 -03:00
Maikel David Pérez Gómez 788b3ef59b
Add async filtering support to the select-control component (#35839)
* Add async filtering support to the select-control component

* Apply comment suggestions

* Apply more comment suggestions
2022-12-07 14:24:32 -03:00
Chi-Hsuan Huang 2a56407ba1
Migrate `@woocommerce/components/search` to TS (#35724)
* Migrate search component to TS

* Add @types/prop-types to @woocommerce/components

* Update search types

* Add changelog

* Update pnpm-lock.yaml

* Update ts doc comments
2022-12-06 13:21:10 +08:00
Matt Sherman 4b58bef897
Add __experimentalSelectControl suffix prop (#35809)
* SuffixIcon component
* Tests for SelectControl suffix prop
* Stories for SelectControl suffix prop
2022-12-02 11:53:53 -05:00
Joshua T Flowers a6970f319c
Set editor mode on initialization to prevent initial text editor focus (#35701)
* Set editor mode on initialization to prevent initial text editor focus

* Add changelog entry

* Check for editor set method to prevent breaks in tests with older versions of block store

* Update argument name for initialization
2022-11-30 12:28:37 -08:00
Fernando Marichal 1e9fff35c0
Allow the user to select multiple images in the Media Library (#35722)
* Add multiple selection to MediaUploader

# Conflicts:
#	packages/js/components/src/media-uploader/media-uploader.tsx

* Fix README.md

* Add multiple select to image section

# Conflicts:
#	plugins/woocommerce-admin/client/products/sections/images-section.tsx

* Add changelogs

* Fix repeated images addition

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
2022-11-30 10:40:41 -03:00
Fernando Marichal 716d5ab322
Move file picker by clicking card into the MediaUploader component (#35738)
* Fix `MediaUploader` component

* Fix storybook

* Fix image section

* Add changelogs

* Fix code comment

* Fix text

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
2022-11-30 09:00:14 -03:00
Maikel David Pérez Gómez 6b3056422e
Align the field height across the whole form (#35720) 2022-11-25 11:58:38 -03:00
Matt Sherman ffb256df0e
Analytics: Fix custom date range calendar styling in WP 6.1 (#35649)
* Include react-dates styles (no longer included by WP 6.1+)

* Remove padding from filters popover content

* Changelog

* Include react-dates CSS directly from module instead of copy/pasting.
2022-11-25 11:57:20 -03:00
Maikel David Pérez Gómez 3ff334bec9
Fade the value selection field in the Attributes modal when no attribute is added (#35700)
* Fade the value selection field in the Attributes modal when no attribute is added

* Fix linter errors
2022-11-24 14:32:20 -03:00
Maikel David Pérez Gómez 29b9c691cd
Fix/unsaved prompt (#35657)
* Set initial values prop from reset form function as optional

* Fix unsaved modal propmt to not be shown during form submission

* Reset form on save draft and before navigation starts

* Add comments ssuggestions
2022-11-22 11:56:27 -03:00
Matt Sherman 995b587777
Analytics: Fix advanced filtering date selection in WordPress 6.1. (#35644)
* Fixed date filter date selection in WordPress 6.1.

* Move fix deeper into DatePicker itself.
2022-11-22 09:53:26 -05:00
Sam Seay 03dbab0edd
Fix some bugs in syncpack configuration (#35651)
* Fix syncpack config

* Loosen the matched version for typescript eslint

* Add changelog entries

* Update lockfile
2022-11-22 12:06:47 +13:00
Maikel David Pérez Gómez fc56dcf6e9
Add/35173 category field improvements (#35606)
* Add experimental open menu when user click the select control input element

* Open categories menu list when the user click the category field

* Fix linter error

* Move open menu from click to focus event

* Fix linter errors
2022-11-17 15:04:40 -03:00
louwie17 1550806efc
Add/34 create new category field modal (#35132)
* Add initial category field component with new typeahead

Move search logic to useCategorySearch hook

Add initial add new category logic

Add parent category field to add new category modal

Adding some debug changes

Update category control to make use of internal selectItem function of select control

Add changelogs

Update pagesize back to 100

Add placeholder

Empty placeholder

Fix input and icon sizes

Fix input underline

Add max height and scroll to category dropdown

Add sorting of category items

Auto open parents when traversing up the tree using arrow keys

Add several comments

Add some initial unit tests for the category field component

Add tests for useCategorySearch hook and fixed minor bug

Update styling and autoselect parent if child is selected

Fix styling issues for the select control dropdown inside a modal

Fix issue with creating new category with parent

Add function comment and fixed border styling

* Fix up some issues after the rebase

* Some small fixes for the Category creation

* Fix up some styling issues around the add-new-item

* Add changelogs

* Remove unneeded export of toggle button props

* Fix create category error and tests in attribute field

* Fix some minor bugs and styling changes that came up during PR feedback

* Fix tests

* Make use of $gap variable for css
2022-11-16 12:30:42 -04:00
Matt Sherman 932b3386c3
Image Gallery: Update toolbar position and tooltips (#35534)
* Move image gallery toolbar up a bit
* Increase z-index of image gallery toolbar so that tooltips are not behind other images
* Update image gallery toolbar button tooltips
2022-11-14 16:08:27 -05:00
Matt Sherman 5b06618a6f
Add scheduled sale fields (#34538)
* Add scheduled sale fields to product form
* Close DateTimePickerControl's dropdown when blurring from input.
* Log when onChange is called for Controlled stories
* Handle when input changes occur but the end date is the same
* Fix DateTimePickerControl usage when uncontrolled
* Fix handling when blur happens before debounced onChange
2022-11-14 21:03:13 +00:00
Matt Sherman 17fe37cafe
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
2022-11-05 22:03:00 -04:00
Matt Sherman f0ee7a4882
DateTimePickerControl: Only call onChange when the date actually changes (#35397)
* Additional onChange tests
* Update handling when currentDate or dateTimeFormat changes to avoid errant onChange calls
* Remove unused changeImmediate function
* Refactor input change handling
* Refactoring of updateState* functions to reduce duplication and increase readability
* Refactor to remove a few unnecessary wrapper functions
* Rename setInputStringWithMoment to formatDateTimeForDisplay
* Refactor ISO formatting
* Rename parse functions
* Update controlled stories to properly use state
* Refactored to get rid of useEffect handling of currentDate and inputString changes
2022-11-03 12:54:17 -04:00
Joel Thiessen 5b1296fe45
Adding attribute edit modal for products MVP (#35269) 2022-11-03 08:20:29 -07:00
Joshua T Flowers e1ebabba29
Fix up rich text editor initial selection and add blocks (#35286)
* Fix double click toolbar behavior

* Fix initial block selection on editor load

* Add placeholder option to RichTextEditor

* Add image and video blocks

* Set toolbar height

* Allow inserter to be shown

* Allow media uploads in rich text editor

* Add changelog entries

* Fix media upload

* Check for existence of selected blocks before checking length

* Pass blocks to avoid race in detecting initially empty blocks
2022-10-31 14:36:54 -07:00
louwie17 aea554bcdb
Fix/form ts error (#35394)
* Fix forwardRef type in the Form component

* Add changelog

* Revert type changes
2022-10-31 17:11:31 -03:00
Matt Sherman 12b79d32c2
DateTimePickerControl: Allow time to be set to beginning or end of day when in date-only mode (#35296) 2022-10-28 09:32:28 -04:00
louwie17 04d6e8849c
Add name to select control popover slots (#35353)
* Add name to SelectControlMenuSlot

* Add changelogs

* Update changelog

* Fix typo in changelog
2022-10-27 12:52:29 -03:00
Maikel David Pérez Gómez 09df031593
Update font size and spacing in the tooltip component (#35265) 2022-10-25 17:00:11 -03:00
Matt Sherman 8ea8b532c0
Support PHP style date format specifiers in DateTimePickerControl (#35285)
* Use @wordpress/date to format for display in DateTimePickerControl
* Update default formats to PHP style
* Update tests to use @wordpress/date formatting
* Update CustomDateTimeFormat story to use PHP style formatting
2022-10-25 15:50:59 -04:00
Matt Sherman 9ca5cbe3a5
Fix DateTimePickerControl suffix style (#35256) 2022-10-25 14:56:29 -04:00
Joshua T Flowers 2aa4ce0d9f
Disable product inventory toggle when inventory management is disabled (#35059)
* Disable product inventory toggle when inventory management is disabled

* Export conditional wrapper as experimental component

* Conditionally show the tooltip

* Add comment explaining the tooltip overlay

* Add components changelog entry

* Display tooltip on hover any portion of toggle or label

* Add changelog entry

* Fix scss lint error

* Center tooltip over label and toggle

* Fix up input props after rebase

* Add wrapper around field to maintain block item formatting
2022-10-24 09:08:27 -07:00
github-actions[bot] a72e68ea65
Prepare Packages for Release (#35277)
Automated change: Prep @woocommerce/components for release.

Co-authored-by: chihsuan <chihsuan@users.noreply.github.com>
2022-10-24 16:37:07 +08:00
Joshua T Flowers 28f8e7f996
Enhance getInputProps to allow passing of non-overridden props (#35034)
* Allow additional props to be passed to the Form getInputProps method

* Remove getTextControlProps

* Pass additional shared props through getInputProps in shipping

* Simplify checkbox props

* Unwrap currency props

* Use onBlur event to sanitize prices

* Add changelog entry

* Add option to get checkbox props to form context helpers

* Update checkbox tracks handler naming and typing

* Fix up usage of getInputProps

* Add helper sanitize method

* Use sanitize helper method for product input fields

* Fix inventory input props after rebase

* Fix shipping typo

* Fix up form types after rebase

* Align all checkboxes on product page

* Rename new checkbox helper to getCheckboxControlProps

* Add helper method to get select control props

* Add data changelog entry

* Check for product name length on blur

* Add initial value for name to prevent uncontrolled value

* Add initial value for sku
2022-10-21 07:03:49 -07:00
github-actions[bot] 3d78fd24ee
Prepare Packages for Release (#35205)
Automated change: Prep @woocommerce/components for release.

Co-authored-by: chihsuan <chihsuan@users.noreply.github.com>
2022-10-20 13:21:11 +08:00
louwie17 5f2c656e6b
Add/34331 add attributes modal (#34999)
* Add initial add attribute modal

* Add async select control component and add attribute terms

* Make use of AsyncSelectControl for attributes

* Rearranged the add attribute form to make removing easier

* Make sure add button is disabled if fields are empty

* Remove the use of AsyncSelectControl for now

* Add disabled option and fix merge conflict

* Add attribute modal tests

* Remove unused trigger drag

* Add popover slot

* Small update to select control and fix multi selection in term field

* Add tests for attribute and attribute term fields

* Add changelogs

* Small fix after merge conflict

* Fix some styling and issue with select control when clearing item

* Fix lint error

* Fix up some styling issues after rebase

* Fix formatting, some styling issues, and address some PR feedback

* And confirmation dialog for closing the modal.
2022-10-19 16:28:29 -03:00
Joshua T Flowers c72e00d85c
Add Tooltip component and remove EnrichedLabel (#35024)
* Add experimental tooltip component

* Add tooltip stories

* Update EnrichedLabel component

* Remove EnrichedLabel

* Add changelog entries

* Fix up linting issues

* Handle PR feedback
2022-10-18 16:08:49 -07:00
louwie17 1f7deb139f
Add popover support to select control dropdown (#34967)
* Add dropdownPlacement option to SelectControl

* Make use of parent element of menu for width

* Add changelog

* Add useEffect for boundingRect so it gets updated accordingly

* Fix styling for popover dropdown

* Move popup markup down to render return

* Move getMenuProps up

* Move getMenuProps down to list again and always render the popover menu

* Add MenuSlot that adds popover slot to mody with aria-live=off so it is skipped by Modal

* Add comment in relation to the eslint-disable comment

* Fix flashing of popover and addressed some minor PR suggestions
2022-10-18 16:55:37 -03:00
Matt Sherman 0769625b72
Add DateTimePickerControl Form stories and tests (#34964)
* Add test for DataTImePickerControl in Form
* Add DateTimePickerControl to Form story
* Export type for InputProps
2022-10-18 15:06:04 -04:00
Joshua T Flowers 3c6681054a
Add product management description (#34961)
* Add label prop to rich text editor

* Create feature class and enqueue styles

* Add description editor and parsing

* Fix up incorrect context for product data

* Add styling to rich text editors in product form

* Fix editor initialization on new product

* Add changelog entries

* Use trunk lock file

* Add component changelog entry

* Update lock file

* Register block store provider in tests

* Fix up phpcs errors in product feature file
2022-10-18 08:55:31 -07:00
Matt Sherman e470c62650
Add date-only mode to DateTimePickerControl (#35066)
* Remove border from top of date picker
* Add isDateOnlyPicker, rename is12HourPicker
* Add tests for isDateOnlyPicker
* Add date only story
2022-10-14 16:48:03 -04:00
Matt Sherman 0cbc45ba85
Handle ambiguous dates (with no offset) in DateTimePickerControl (#35077)
* Add tests for ambiguous and unambiguous UTC dates

* Assume UTC for ambiguous dates

* Changelog

* Remove console statements
2022-10-14 15:38:18 -04:00
louwie17 c55c91d7e0
Add category field dropdown field (#34400)
* Add initial category field component with new typeahead

Move search logic to useCategorySearch hook

Add initial add new category logic

Add parent category field to add new category modal

Adding some debug changes

Update category control to make use of internal selectItem function of select control

Add changelogs

Update pagesize back to 100

Add placeholder

Empty placeholder

Fix input and icon sizes

Fix input underline

Add max height and scroll to category dropdown

Add sorting of category items

Auto open parents when traversing up the tree using arrow keys

Add several comments

Add some initial unit tests for the category field component

Add tests for useCategorySearch hook and fixed minor bug

Update styling and autoselect parent if child is selected

Fix styling issues for the select control dropdown inside a modal

Fix issue with creating new category with parent

Add function comment and fixed border styling

Prune out create new category logic

Fix minor css issue with border

Revert some of the select control changes and make use of the custom type

Fix up some styling changes

* Fix type conflict

* Revert change in state reducer

* Add cursor pointer

* Fix styling errors

* Fix broken category tests

* Fix merge conflict
2022-10-14 09:05:39 -03:00
Joshua T Flowers 618cc54a3f
Add RichTextEditor component using native block editor toolbar (#34865)
* Add initial rich text editor component

* Use fixed toolbar and add base formatters

* Add link as formatter option

* Fix up references to core/link block

* Add quote transform

* Add changelog entry

* Add text alignment toolbar

* Remove references to checkbox list

* Update toolbar button organization

* Remove unused rtj format types

* Create unique instance for editor writing flow

* Add registry provider for storybook examples

* Update styling for editor

* Rebase and fix lock file

* Add packages and type dependencies

* Move component to experimental

* Fix up formatting

* Update editor to use default GB toolbar

* Prefix names with woocoommerce

* Create block on initialization so toolbar is visible

* Rely on insertBlock to handle selection

* Update text editor to use setting instead of BlockList prop

* Fix up lock file after rebase

* Handle PR feedback

* Move logic for force rerender

* Fix up pnpm lock file

* Use trunk lock file

* Update lock file

* Add missing semicolon

* Use Pauls lock file and package file
2022-10-12 14:15:55 -07:00
Fernando Marichal 98162b9d42
Images Product management MVP 1.0 (#34769)
* Add image section

# Conflicts:
#	plugins/woocommerce-admin/client/products/add-product-page.tsx

* Add `keepSpaceWhenDragging` to sortable

# Conflicts:
#	packages/js/components/src/sortable/sortable-item.tsx
#	packages/js/components/src/sortable/sortable.tsx

# Conflicts:
#	packages/js/components/src/sortable/sortable.tsx

* Export ImageGalleryItem

* Add props to `image-gallery`

# Conflicts:
#	packages/js/components/src/image-gallery/image-gallery-item.tsx
#	packages/js/components/src/image-gallery/image-gallery.tsx

* Changed `media-uploader` label

* Add changelogs

* Fix image-gallery and sortable components

# Conflicts:
#	packages/js/components/src/sortable/sortable-item.tsx
#	packages/js/components/src/sortable/sortable.tsx

# Conflicts:
#	packages/js/components/src/image-gallery/image-gallery.tsx
#	packages/js/components/src/sortable/sortable.tsx

* Set gallery min-height

* Add onOrderChange

* Show images section edit-product

# Conflicts:
#	plugins/woocommerce-admin/client/products/edit-product-page.tsx

# Conflicts:
#	plugins/woocommerce-admin/client/products/edit-product-page.tsx

# Conflicts:
#	plugins/woocommerce-admin/client/products/edit-product-page.tsx

* Fix styles

* Fix styles

* Fix image alt

* Fix TS any

* Add prop `onDragOver`

# Conflicts:
#	packages/js/components/src/image-gallery/image-gallery.tsx

* Fix styles

* Fix padding

* Fix image area min-height

* Fix subtitle copy

* Fix image margin

* Change `draggedImageId`

* Fix `setDraggedImageId` reset

* Rename `isRemoveZoneVisible`

* Add `CardBody` and remove redundant `setValue`

* Fix card styles

* Remove `getUniqueImages`

* Use url as a key when there is no image id

* Fix `orderedImages`

* Add hover to gallery images

* Fix gallery arrows and set cover problems

* Altering blur handler to prevent toolbar closure on media modal

* Fix toolbar drag and drop

* Add replace fn

* Restoring modal class for blur function

* Fix storybook

* Ensuring onBlur doesn't happen while dragging, resolving issue in Firefox

* Adding expected event object to drag callbacks

* Fix image size

* Fix lint

* Another fix lint

* Update plugins/woocommerce-admin/client/products/sections/images-section.tsx

Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>

* Fix `draggedImageId` default value

* Fix toolbar icon style

* Rename consts

* Update pnpm-lock.yaml

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
Co-authored-by: Joel <dygerati@gmail.com>
Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>
2022-10-12 15:16:22 -03:00
Matt Sherman 2605d14b9d
Make DateTimePickerControl debounce handling more robust (#34963) 2022-10-11 17:22:52 -04:00
Matt Sherman 0b70974d43
Fix DateTimePickerControl initial setting of input field (#34980)
* Fix expect checks to actually do something
* Fix default 24 hour format
* Add test for when currentDate is changed
* Fix up tests that were broken (and masked by no assertions)
* Fix initial setting of input
* Export default 12 hour and 24 hour formats
2022-10-11 14:55:08 -04:00
Maikel David Pérez Gómez e95bb3768e
Add new shipping class modal to a shipping class section in product page (#34937)
Add new shippping class modal to a shipping class section in product page
2022-10-11 12:00:35 -03:00
Sam Seay aec442139f
Update pnpm once again to fix issues with auto-install-peers (#35007) 2022-10-10 16:59:51 +13:00
louwie17 d756494bcc
Update/experimental select control (#34620)
* Combine last 23 commits into one.

Update css, so dropdown shows correctly

Add extra callbacks and expose some downshift combobox functions

Add changelog

Update stories to reflect new props

Update stories label

Removed `clearOnSelect` prop and reverted some other changes

Fix missed props during rebase

Remove old storybook story and slight fix from rebase

Remove unneeded code

Update default get filtered functionality and add regex escaping

Some updates by testing a new onStateChange callback

Expose the onStateChange callback for more fine control ove the useSelect

Some minor adjustments

Expose stateReducer and minor adjustments from PR review

Simplify logic around isOpen handling with outside component

Remove unused import

Remove onStateChange prop

Address PR feedback

Some minor adjustments to the input handling

Update the way the stateReducer is called

Remove some of the unneeded logic

Remove onStateChange and replace it with onSelectedItemChange and onInputValueChange for simplicity

Fix lint error

* Remove duplicate and unused import

* Fix call to ControlledPropUpdatedSelectedItem in story
2022-10-06 11:40:41 -03:00
Joshua T Flowers 048e04d192
Allow external tags in SelectControl component (#34823)
* Allow external tags in SelectControl component

* Add changelog entry

* Fix up changes after rebase

* Fix up custom item type example
2022-10-05 13:29:30 -07:00