Commit Graph

144 Commits

Author SHA1 Message Date
Jeff Stieler d3e940208e Refactor package style builds (https://github.com/woocommerce/woocommerce-admin/pull/7531)
* Build experimental package CSS with webpack.

* Move style-only webpack config to reusable private package.

* Update other packages to use webpack for style builds.

* Add tsbuildinfo to clean scripts.

* Fix main start script.

* Remove defunct package build scripts.

* Move client/ dependencies for style builds.

* DRY.

* Remove defunct IE stylesheet definitions.

* Add missing RTL setup for onboarding styles.

* No need to export a function.

* Add changelog.

* Fix README.

* Revert concurrently script path change.
2021-08-19 10:15:59 -04:00
Sam Seay 77906db0ff Use sass-migrator to migrate division to math.div (https://github.com/woocommerce/woocommerce-admin/pull/7136) 2021-06-10 17:09:27 +08:00
Sam Seay edc8a1bdc5 Publish storybook docs, remove react docgen based docs (https://github.com/woocommerce/woocommerce-admin/pull/7055) 2021-06-02 15:54:00 +12:00
Hsing-Yu Flowers de61194cc0 Apply responsive header style to all pages (https://github.com/woocommerce/woocommerce-admin/pull/6292) 2021-02-22 13:08:43 +08:00
Joshua T Flowers 8629318f46 Use box sizing and padding to fix nav and admin menu styling (https://github.com/woocommerce/woocommerce-admin/pull/6335)
* Use box sizing and padding to fix nav and admin menu styling

* Move wpbody fixes to reset

* Move default header padding to reset
2021-02-16 10:57:56 -05:00
Joshua T Flowers baaaf39bf0 Try: Refactor head and body heights (https://github.com/woocommerce/woocommerce-admin/pull/6247)
* Move navigation to WC header

* Remove wp toolbar class

* Set body margin on header change

* Fix up layout margins

* Remove excess padding on mobile

* Fix navigation preload styles and embed

* Fix preloading space due to adminbar missing

* Remove embed padding on wrap

* Fix body display for wpadmin menu

* Fix up wpadminbar reset padding

* Remove body padding on full screen layouts

* Fix mobile admin bar height on full screen

* Clean up body margin on unmount

* Center the activity panel (https://github.com/woocommerce/woocommerce-admin/pull/6289)

* Center the activity panel

* Handle PR feedback

* Fix up secondary nav group style changes

* Remove screen reader style changes

* Debounce resize event

* Make responsive button selector more specific

Co-authored-by: Hsing-Yu Flowers <hsingyuc.7@gmail.com>
2021-02-12 11:32:26 -05:00
Hsing-Yu Flowers 13da8d5601 Fix overlapping mobile app banner and WooCommerce button (https://github.com/woocommerce/woocommerce-admin/pull/6198) 2021-02-03 20:46:19 +08:00
Moon 24a92d59bb Remove unnecessary color override for the primary button (https://github.com/woocommerce/woocommerce-admin/pull/6002) 2021-01-11 20:41:44 -08:00
Joshua T Flowers ab9038d329 Update table component to use wp card (https://github.com/woocommerce/woocommerce-admin/pull/5904)
* Use wp card in table components

* Migrate report styles to report stylesheet

* Fix table scroll shadow

* Fix pagination styling

* Handle PR feedback

* Move search and action styles to table

* Add margin between table actions

* Remove vertical dividers

* Update chart table border colors (https://github.com/woocommerce/woocommerce-admin/pull/5932)
2021-01-04 15:56:57 -05:00
Paul Sealock 80f641b849 Unbundle wp.components (https://github.com/woocommerce/woocommerce-admin/pull/5753)
* enqueue wp-components

* conditional check of Navigation?

* nav version checks, first pass

* better nav checking

* bump min requirments

* min versions

* Use WP 5.6 instead of 5.6.0

* add wp.date and wp.compose

* Handle missing FlexItem

* enqueue styles

* fix date range mobile dropdown
2020-12-21 14:57:55 +13:00
Sam Seay 06f9248572 Reorganize the store management link section and provide extensibility (https://github.com/woocommerce/woocommerce-admin/pull/5476)
Rearrange the store management links under categories and expose extensibility via the `woocommerce_admin_homescreen_quicklinks` filter.
2020-11-04 13:33:04 +13:00
Joel Thiessen 15b45c9db4 Navigation: Applying styles & behavior for folded menu, including mobile (https://github.com/woocommerce/woocommerce-admin/pull/5497)
* Adding base styles for collapsed nav menu.

* Handling varying behaviour on mobile-sized screens, with the menu overlaying content instead of shrinking the content area.

* Folding the menu by default on screen sizes less than 960px, and if that condition is met after an orientation change

* Refactoring logic from Header/index.js to flag if user has scrolled to apply shadow to folded navigation as well.

* Refactoring styles in navigation feature to allow them to be loaded properly with webpack (with imports/etc).
2020-11-02 16:57:49 -08:00
Gan Eng Chin 4a28c61d86 Import @wordpress/base-styles/default-custom-properties in CSS file. (https://github.com/woocommerce/woocommerce-admin/pull/5491)
This is to get the root admin scheme color, so that we can use --wp-admin-theme-color in CSS.
2020-10-30 08:33:48 +13:00
Gan Eng Chin 43a54106f3 Convert the marketing tab cards to use the new @wordpress/components Card component. (https://github.com/woocommerce/woocommerce-admin/pull/5428)
* Change WooCommerce Card to WordPress Card in the WelcomeCard component.

Use isElevated and margin-bottom to make the Card look close to previous UI.

* Use WordPress Card in KnowledgeBase.

For the description in Card header, it will be rendered as a p element instead of h2, which should be more semantically correct. Test is updated to reflect this.

* Add Card component wrapper that supports title and description props.

* Use WordPress Card component wrapper in recommended extensions.

* Code refactor to use WordPress Card wrapper.

* Use WordPress Card wrapper in installed extension.

* Use margin-bottom for children layout at the parent CSS level.

* Add test for Card.

* Fix no margin between cards in Coupons page, and remove previous css for WooCommerce Card.

* Remove old WooCommerce Card css.

* Don't use isElevated in Card, to match the style in WooCommerce Home screen.

* Make item border color consistent with WordPress Card in Installed Extension card.

Use WordPress Card without CardBody here because we don't want the padding from CardBody.

* Make the card description look similar to previous WooCommerce Card description.

* Fix spelling in CSS class names.

* Fix WooCommerce spelling in comment.

* Change the Marketing Card style to match with WooCommerce Home style.

Also change the text gray color to use CSS variable instead of hardcoded gray value.

Also remove the usage of h2 in the Card header to follow WooCommerce Home style.

* Use $gray-200 as light borders between items in card.

* Remove unneeded CSS code based on TODO in comment.
2020-10-23 14:41:45 +08:00
Jeff Stieler eefe2e8acc Add Homescreen layout control (https://github.com/woocommerce/woocommerce-admin/pull/5429)
* Remove inbox-specific class, widen single column.

* Create user preference for homescreen column layout.

* Add display options "tab" to homescreen.

* Style display options.

* Tweak homepage layout option values.

* Add tracks events for homepage layout.

* Add test coverage for homescreen display options.

* No need to use Fragment component.

* Use named exports.

* Fix display options styling on mobile/narrow viewports.

Don't show the options at all if we're forcing single column.

* Fix linting error.
2020-10-22 18:13:14 -04:00
Paul Sealock ff203db3a8 include animate styles (https://github.com/woocommerce/woocommerce-admin/pull/5457) 2020-10-23 10:04:14 +13:00
Paul Sealock 52137fe3fa bump wp components and base styles (https://github.com/woocommerce/woocommerce-admin/pull/5293) 2020-10-09 12:10:32 +13:00
Joel Thiessen 23c19ee1b2 Removing breadcrumbs from wc-admin header, replacing with simple titl… (https://github.com/woocommerce/woocommerce-admin/pull/5232)
Removing breadcrumbs from wc-admin header, replacing with simple title (https://github.com/woocommerce/woocommerce-admin/pull/3963)

This is an interim step towards the integration of wc-navigation, where a back button will be provided to restore the critical functionality of the breadcrumbs. Note that the `breadcrumbs` data was preserved since it's still being utilized do construct the document title (in semi-breadcrumb-fashion) on both the backend and front-end.
2020-10-06 13:42:46 -07:00
Joshua T Flowers 6e8b4bad5f Fix header height and positioning for wc nav (https://github.com/woocommerce/woocommerce-admin/pull/5173)
* Fix header height and positioning for wc nav

* Remove body margin via CSS
2020-09-29 15:57:50 +03:00
Sam Seay c884f96bf9 Add WooCommerce Mobile App Banner Ad for Android and iOS (https://github.com/woocommerce/woocommerce-admin/pull/5037)
Fixes woocommerce/woocommerce-admin#4654 

The feature calls for a mobile app ad banner to be displayed to users on mobile devices.

Based on the discussion in woocommerce/woocommerce-admin#4654 this implements the following:

1. [an iOS Smart App Banner](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html). This banner is a meta tag that is generated in PHP. It will only display on iOS devices. One note about this: **This tag is not directly trackable like the implemented Android banner. If we would like to track its success then I believe [these instructions are relevant](https://stackoverflow.com/questions/12906502/is-it-possible-to-track-click-throughs-from-iphone-smart-banner/20422334woocommerce/woocommerce-admin#20422334)**. 

2. A mobile app banner ad that **only displays on Android** and only displays at the `738px` breakpoint specified in the issue. To only display this banner ad on Android, we use basic checking of the user agent string. I weighed this up against other approaches and for this kind of niche use case a simple UA string check is (imho) still the best way to do this.

3. The banner ad makes use of user preferences to retain a per user setting that determines if that user has dismissed the Android banner. We don't/can't do anything like this for the iOS Smart App Banner (but in theory we shouldn't need to).
2020-08-27 13:46:53 +12:00
Sam Seay 34d8d930b0 Display modal with more info about the new homescreen (https://github.com/woocommerce/woocommerce-admin/pull/4890)
Fixes woocommerce/woocommerce-admin#4590

This implements a paged modal via the Gutenberg Guide component. Some styling adjustment was needed to match the designs exactly.

This also introduces 3 SVG based illustrations for display in the modal. According to this comment there is a need to color them based on the theme at some point, but based on a current lack of requirements for that, I felt that could be done at a separate time (that was suggested in the comment as well).
2020-08-05 12:14:56 +12:00
Bec Scott 551dfe1f0c Pills and tooltips in product step of OBW (https://github.com/woocommerce/woocommerce-admin/pull/4707)
* Add monthly product prices to OBW

* Remove description for physical and download products

* Use pills in product selection step of OBW

* Add missing translation wrapper, also convert some spaces to tabs

* Add pill to changelog

* Change pills to medium gray text and border

* Make everything line up correctly on smaller viewports

* Get the styles closer to the design

* Breakpoint to set font size to 11px

Co-authored-by: Rebecca Scott <me@becdetat.com>
2020-07-21 14:27:32 +10:00
Sam Seay a6ea004ee8 Rework the store details onboarding screen (https://github.com/woocommerce/woocommerce-admin/pull/4771)
Fixes woocommerce/woocommerce-admin#4566 **(and is dependent on the changes from woocommerce/woocommerce-admin#4759 )**

Changes:

* Use the new `Card` and `Flex` from `@wordpress/components`
* Add contextual tooltips
* Adjust existing styles to match [new designs](https://www.figma.com/file/JH9XMFUCOjfXdr3N09AHRD/On-boarding-iterations-June-'20)
2020-07-21 12:12:19 +12:00
Sam Seay b448ff60b7 Update @wordpress/base-styles and replace deprecated variables (https://github.com/woocommerce/woocommerce-admin/pull/4759)
Fixes woocommerce/woocommerce-admin#4732

This updates `@wordpress/base-styles`, and because `@wordpress/components` depends on variables from it, that must be updated as well.

There are 3 major changes required as part of updating:

1. The $theme-color variable is no longer exposed by base-styles. Instead there are 3 css vars exposed. These are made available by use of a provided mixin. Situations where $theme-color was darkened using scss have been mapped as best as possible to the 2 other darkened shades of the css var that are available such as `--wp-admin-theme-color-darker-20` and `--wp-admin-theme-color-darker-10`. In some cases this means the colors are not exactly the same as before.

2. The post css `theme()` call is no longer available. All uses of this have been consolidated to use of the main theme css var `--wp-admin-theme-color`. This means that calls like `theme(secondary)` or `theme(outline)` etc have all been consolidated to the one color.

3. Many of the variables used for different shades of gray have been deprecated. These have been mapped across to the new gray variables. (Mapped according to the list described in woocommerce/woocommerce-admin#4732)
2020-07-17 12:11:42 +12:00
Joshua T Flowers 44dd1a25b5 Add bundle install UI to Business Details step (https://github.com/woocommerce/woocommerce-admin/pull/4695)
* Add simple business extension install form input

* Install all business extensions when checked

* Add popover with business extension benefits

* Remove errant hasInstallActivateError setState call

* Show popover on click and record event
2020-07-01 15:20:24 +03:00
Bec Scott 11ee8aac2d Tweak the embed page CSS so the top content sits better (https://github.com/woocommerce/woocommerce-admin/pull/4622)
* Tweak the embed page CSS so the top content sits better

* Tweak the CSS to take notices into consideration

* Further tweak header styles

Co-authored-by: Rebecca Scott <me@becdetat.com>
2020-06-24 13:52:03 -07:00
Paul Sealock 77ce9448a3 Fix Task List styles (https://github.com/woocommerce/woocommerce-admin/pull/4573) 2020-06-16 14:07:06 +12:00
Timmy Crawford 8dc7b4cbea G2: Remove pink/purple from ActivityPanels and Header (https://github.com/woocommerce/woocommerce-admin/pull/4586)
* G2: Remove pink/purple from ActivityPanels and Header

* Manage all orders purple.
2020-06-15 17:24:01 -07:00
Paul Sealock 91bd554637 Add overrides for OBW styles (https://github.com/woocommerce/woocommerce-admin/pull/4572) 2020-06-16 10:50:22 +12:00
Paul Sealock fd78bca347 Theme color: Use dynamic variable from user preferences (https://github.com/woocommerce/woocommerce-admin/pull/4558) 2020-06-15 14:00:25 +12:00
Paul Sealock 134be1c08b Update/@wordpress components base styles (https://github.com/woocommerce/woocommerce-admin/pull/4427) 2020-06-10 13:55:06 +12:00
Fernando aefbafea9b Inbox notification: layout changes (https://github.com/woocommerce/woocommerce-admin/pull/4218)
* Inbox notification: Added layout changes (https://github.com/woocommerce/woocommerce-admin/pull/4256)

* Added notes layout and image to the API

Added note layout and note image to the API and the DB

* Unit test modified

Unit test where modified to adapt them to the new elements

* Changed the frontend following the new designs.

The fronted was changed to follow the new inbox messages design.

* Changed default layout type in DB

* Added all the requested visual element

Changed the cards' js, css and actions to achieve the visual requirements

* Added "layout" and "image" to inboxQuery

* Modal confirmation buttons repaired

* Added "layout" and "image" to docs examples.

* Removed "updateNote" from action.js

Removed "updateNote" from action.js, I left it by mistake.

* Spelling error corrected

The button text "Dismiss all message" was corrected

* noteName removed and icon added to make code reviewing easier

This commit removes the "noteName" from card.js and adds the icon to make code reviewing easier

* Dismiss action button refactor

Refactor of the dismiss action button in the InboxNoteCard class

* Removed unnecessary control

* Destructured all the note properties

* Colors replaced by existing variable

* Removed setting of layout and image in the creation of the notes

* Removed blank lines added by mistake

* Close dismiss dropdown when clicking away from the  popover.

* Prevented the closing of the inbox panel with an action in the modal

* Added small design changes

* Removed unused "Gridicon" import

* Prevent showing the image tag when the layout is blank

* The method name getDismissButton was changed to getDismissConfirmationButton

* Removed unnecessary vendor-prefixed properties

* Improved note filtering in unreadNotes method

* Update client/header/activity-panel/panels/inbox/style.scss

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

* Update client/header/activity-panel/panels/inbox/style.scss

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

* Update client/header/activity-panel/panels/inbox/style.scss

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

* Update client/header/activity-panel/panels/inbox/style.scss

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

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>

* Inbox notification: Remove icons (https://github.com/woocommerce/woocommerce-admin/pull/4258)

* Info icon removed from inbox notifications

The info icon was removed from inbox notifications

# Conflicts:
#	src/Notes/DataStore.php

* Removed "icon" from inboxQuery

* Tests repeared

Some problems with the unit tests were repaired in this commit

# Conflicts:
#	docs/examples/activity-panel-inbox.md

# Conflicts:
#	tests/api/admin-notes.php

* Removed icon from card.js

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

* Inbox notification: Add dismiss functionality (https://github.com/woocommerce/woocommerce-admin/pull/4262)

* Added is_deleted param to soft delete

# Conflicts:
#	src/API/Notes.php
#	src/Install.php
#	src/Notes/DataStore.php
#	src/Notes/WC_Admin_Note.php
#	src/Notes/WC_Admin_Notes.php
#	tests/api/admin-notes.php

* Added the Dismiss functionality

# Conflicts:
#	client/header/activity-panel/panels/inbox/action.js

* Where clause repeared

* Added Snackbar after action.

* API modified to dismiss notes

* Small refactor in "get_item" method

This commit adds a small refactor in "get_item" method to use "prepare_note_data_for_response"

* Added missing logic to Dismiss note

This commit adds missing client logic to Dismiss note.

# Conflicts:
#	client/header/activity-panel/panels/inbox/action.js
#	client/header/activity-panel/panels/inbox/card.js

* Moved the delete action to WC_Admin_Notes.php

The delete action was moved to WC_Admin_Notes.php to follow the pattern.

* Added changes to dismiss messages

This commit addeds changes to the  messages soft delete.

* DataStore.php repaired

This commits adds some code that was deleted by mistake and the param "is_deleted" has been escaped.

* Spelling error corrected

The button text "Dismiss all message" was corrected

* Repaired "get_notes_where_clauses" method

A problem with the deleted notes was repaired

* Added a comment to DataStore.php

* Stopped sending the "dismissType" to action.js

The "dismissType" is not sent to action.js anymore.

* Bugfix: now the method get_notes_with_name also returns deleted notes

* Bugfix: repaired empty notification list

This commit repairs a bug that happens when there isn't anything in the inbox notification list

* Small refactor to not use "some" Lodash method anymore

* Small refactor in rednderNotes method

* Added check to set_layout

* Added small refactor to delete_all_notes method

* Fixed code comment error

* Bugfix: repaired the "delete_note" call

* Inbox notification: Added layout changes (https://github.com/woocommerce/woocommerce-admin/pull/4256)

* Added notes layout and image to the API

Added note layout and note image to the API and the DB

* Unit test modified

Unit test where modified to adapt them to the new elements

* Changed the frontend following the new designs.

The fronted was changed to follow the new inbox messages design.

* Changed default layout type in DB

* Added all the requested visual element

Changed the cards' js, css and actions to achieve the visual requirements

* Added "layout" and "image" to inboxQuery

* Modal confirmation buttons repaired

* Added "layout" and "image" to docs examples.

* Removed "updateNote" from action.js

Removed "updateNote" from action.js, I left it by mistake.

* Spelling error corrected

The button text "Dismiss all message" was corrected

* noteName removed and icon added to make code reviewing easier

This commit removes the "noteName" from card.js and adds the icon to make code reviewing easier

* Dismiss action button refactor

Refactor of the dismiss action button in the InboxNoteCard class

* Removed unnecessary control

* Destructured all the note properties

* Colors replaced by existing variable

* Removed setting of layout and image in the creation of the notes

* Removed blank lines added by mistake

* Close dismiss dropdown when clicking away from the  popover.

* Prevented the closing of the inbox panel with an action in the modal

* Added small design changes

* Removed unused "Gridicon" import

* Prevent showing the image tag when the layout is blank

* The method name getDismissButton was changed to getDismissConfirmationButton

* Removed unnecessary vendor-prefixed properties

* Improved note filtering in unreadNotes method

* Update client/header/activity-panel/panels/inbox/style.scss

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

* Update client/header/activity-panel/panels/inbox/style.scss

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

* Update client/header/activity-panel/panels/inbox/style.scss

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

* Update client/header/activity-panel/panels/inbox/style.scss

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

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>

* Inbox notification: Remove icons (https://github.com/woocommerce/woocommerce-admin/pull/4258)

* Info icon removed from inbox notifications

The info icon was removed from inbox notifications

# Conflicts:
#	src/Notes/DataStore.php

* Removed "icon" from inboxQuery

* Tests repeared

Some problems with the unit tests were repaired in this commit

# Conflicts:
#	docs/examples/activity-panel-inbox.md

# Conflicts:
#	tests/api/admin-notes.php

* Removed icon from card.js

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

* Improved error handling for the set_layout method

* Bugfix: fixed error handling clicks inside dropdowns

* Bugfix: repaired dropdown onBlur handler

This commit repairs a weird behavior that the dropdown onBlur handler method had sometimes.

* Text error changed

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>

* Inbox notification: Add undo snackbar button after deletion (https://github.com/woocommerce/woocommerce-admin/pull/4281)

* Added undo snakbar button for a single note

# Conflicts:
#	client/wc-api/notes/mutations.js
#	src/Notes/DataStore.php
#	src/Notes/WC_Admin_Notes.php

* Added a button to undo the deletion of all notes

# Conflicts:
#	client/wc-api/notes/operations.js
#	src/API/Notes.php

* Code adapted to make code reviewing easier

There was some code that also was present in another PR, that code was removed to make code reviewing easier.

* UnitTest added

This commit adds some unit tests

* Added verification for API response

* Added casting to $note_id

* Inbox notification: Added layout changes (https://github.com/woocommerce/woocommerce-admin/pull/4256)

* Added notes layout and image to the API

Added note layout and note image to the API and the DB

* Unit test modified

Unit test where modified to adapt them to the new elements

* Changed the frontend following the new designs.

The fronted was changed to follow the new inbox messages design.

* Changed default layout type in DB

* Added all the requested visual element

Changed the cards' js, css and actions to achieve the visual requirements

* Added "layout" and "image" to inboxQuery

* Modal confirmation buttons repaired

* Added "layout" and "image" to docs examples.

* Removed "updateNote" from action.js

Removed "updateNote" from action.js, I left it by mistake.

* Spelling error corrected

The button text "Dismiss all message" was corrected

* noteName removed and icon added to make code reviewing easier

This commit removes the "noteName" from card.js and adds the icon to make code reviewing easier

* Dismiss action button refactor

Refactor of the dismiss action button in the InboxNoteCard class

* Removed unnecessary control

* Destructured all the note properties

* Colors replaced by existing variable

* Removed setting of layout and image in the creation of the notes

* Removed blank lines added by mistake

* Close dismiss dropdown when clicking away from the  popover.

* Prevented the closing of the inbox panel with an action in the modal

* Added small design changes

* Removed unused "Gridicon" import

* Prevent showing the image tag when the layout is blank

* The method name getDismissButton was changed to getDismissConfirmationButton

* Removed unnecessary vendor-prefixed properties

* Improved note filtering in unreadNotes method

* Update client/header/activity-panel/panels/inbox/style.scss

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

* Update client/header/activity-panel/panels/inbox/style.scss

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

* Update client/header/activity-panel/panels/inbox/style.scss

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

* Update client/header/activity-panel/panels/inbox/style.scss

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

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>

* Inbox notification: Remove icons (https://github.com/woocommerce/woocommerce-admin/pull/4258)

* Info icon removed from inbox notifications

The info icon was removed from inbox notifications

# Conflicts:
#	src/Notes/DataStore.php

* Removed "icon" from inboxQuery

* Tests repeared

Some problems with the unit tests were repaired in this commit

# Conflicts:
#	docs/examples/activity-panel-inbox.md

# Conflicts:
#	tests/api/admin-notes.php

* Removed icon from card.js

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

* Inbox notification: Add dismiss functionality (https://github.com/woocommerce/woocommerce-admin/pull/4262)

* Added is_deleted param to soft delete

# Conflicts:
#	src/API/Notes.php
#	src/Install.php
#	src/Notes/DataStore.php
#	src/Notes/WC_Admin_Note.php
#	src/Notes/WC_Admin_Notes.php
#	tests/api/admin-notes.php

* Added the Dismiss functionality

# Conflicts:
#	client/header/activity-panel/panels/inbox/action.js

* Where clause repeared

* Added Snackbar after action.

* API modified to dismiss notes

* Small refactor in "get_item" method

This commit adds a small refactor in "get_item" method to use "prepare_note_data_for_response"

* Added missing logic to Dismiss note

This commit adds missing client logic to Dismiss note.

# Conflicts:
#	client/header/activity-panel/panels/inbox/action.js
#	client/header/activity-panel/panels/inbox/card.js

* Moved the delete action to WC_Admin_Notes.php

The delete action was moved to WC_Admin_Notes.php to follow the pattern.

* Added changes to dismiss messages

This commit addeds changes to the  messages soft delete.

* DataStore.php repaired

This commits adds some code that was deleted by mistake and the param "is_deleted" has been escaped.

* Spelling error corrected

The button text "Dismiss all message" was corrected

* Repaired "get_notes_where_clauses" method

A problem with the deleted notes was repaired

* Added a comment to DataStore.php

* Stopped sending the "dismissType" to action.js

The "dismissType" is not sent to action.js anymore.

* Bugfix: now the method get_notes_with_name also returns deleted notes

* Bugfix: repaired empty notification list

This commit repairs a bug that happens when there isn't anything in the inbox notification list

* Small refactor to not use "some" Lodash method anymore

* Small refactor in rednderNotes method

* Added check to set_layout

* Added small refactor to delete_all_notes method

* Fixed code comment error

* Bugfix: repaired the "delete_note" call

* Inbox notification: Added layout changes (https://github.com/woocommerce/woocommerce-admin/pull/4256)

* Added notes layout and image to the API

Added note layout and note image to the API and the DB

* Unit test modified

Unit test where modified to adapt them to the new elements

* Changed the frontend following the new designs.

The fronted was changed to follow the new inbox messages design.

* Changed default layout type in DB

* Added all the requested visual element

Changed the cards' js, css and actions to achieve the visual requirements

* Added "layout" and "image" to inboxQuery

* Modal confirmation buttons repaired

* Added "layout" and "image" to docs examples.

* Removed "updateNote" from action.js

Removed "updateNote" from action.js, I left it by mistake.

* Spelling error corrected

The button text "Dismiss all message" was corrected

* noteName removed and icon added to make code reviewing easier

This commit removes the "noteName" from card.js and adds the icon to make code reviewing easier

* Dismiss action button refactor

Refactor of the dismiss action button in the InboxNoteCard class

* Removed unnecessary control

* Destructured all the note properties

* Colors replaced by existing variable

* Removed setting of layout and image in the creation of the notes

* Removed blank lines added by mistake

* Close dismiss dropdown when clicking away from the  popover.

* Prevented the closing of the inbox panel with an action in the modal

* Added small design changes

* Removed unused "Gridicon" import

* Prevent showing the image tag when the layout is blank

* The method name getDismissButton was changed to getDismissConfirmationButton

* Removed unnecessary vendor-prefixed properties

* Improved note filtering in unreadNotes method

* Update client/header/activity-panel/panels/inbox/style.scss

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

* Update client/header/activity-panel/panels/inbox/style.scss

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

* Update client/header/activity-panel/panels/inbox/style.scss

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

* Update client/header/activity-panel/panels/inbox/style.scss

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

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>

* Inbox notification: Remove icons (https://github.com/woocommerce/woocommerce-admin/pull/4258)

* Info icon removed from inbox notifications

The info icon was removed from inbox notifications

# Conflicts:
#	src/Notes/DataStore.php

* Removed "icon" from inboxQuery

* Tests repeared

Some problems with the unit tests were repaired in this commit

# Conflicts:
#	docs/examples/activity-panel-inbox.md

# Conflicts:
#	tests/api/admin-notes.php

* Removed icon from card.js

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

* Improved error handling for the set_layout method

* Bugfix: fixed error handling clicks inside dropdowns

* Bugfix: repaired dropdown onBlur handler

This commit repairs a weird behavior that the dropdown onBlur handler method had sometimes.

* Text error changed

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>

* Stopped sending the "dismissType" to action.js

The "dismissType" is not sent to action.js anymore.

# Conflicts:
#	client/header/activity-panel/panels/inbox/card.js

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>

* Bugfix: solved problem when a note was undismissed

There was a problem with the undismiss functionality. When a note was undismissed, it always was recovered with "plain" layout. This commit solves this problem.

* Inbox notification: add event recording (https://github.com/woocommerce/woocommerce-admin/pull/4320)

* Added events recording

This commit adds events recording to the inbox notifications

# Conflicts:
#	client/header/activity-panel/panels/inbox/index.js

* Added 'home_screen' verification

Changed recorded name, now when the client is in the WooCommerce 'home' page we record 'home_screen' instead of 'wc-admin'.

* Added a naming fix and a new prop to the recordEvent

* bugfix: added control before interaction with bodyNotificationRef

* Added more unit tests for new endpoints

This commit adds tests for deleting a single note and for deleting all the notes, both without permission.

* Modified variable name

* Refactor: prop rename and small logic change

* Screen name getter moved into the InboxNoteCard

This commit moves the screen name getter inside the InboxNoteCard.

# Conflicts:
#	client/header/activity-panel/panels/inbox/index.js

* Removed "screen" from state

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

* Refactor in admin-notes unit tests

Some unnecessary controls were removed from the admin-notes unit tests

* Indentation fixed in Install.php. Replaced spaces with tabs.

* Inbox notification: added new placeholder and empty card (https://github.com/woocommerce/woocommerce-admin/pull/4379)

* Added a new placeholder and an empty card

This commit adds a new placeholder and a new empty card to the inbox panel

# Conflicts:
#	client/header/activity-panel/panels/inbox/index.js
#	client/header/activity-panel/panels/inbox/style.scss

* Added border to read notes

* Improved note filtering in unreadNotes method and validNotes

# Conflicts:
#	client/header/activity-panel/panels/inbox/index.js

* Actions render refactored

The actions render was refactored in InboxNoteCard component

* Refactor of InboxPanel component

The methods getUnreadNotesCount and hasValidNotes were separated from the InboxPanel component

# Conflicts:
#	client/header/activity-panel/panels/inbox/index.js

* Refactor inbox panel subtitle classes

* Added changes for when a note is undismissed

This commit adds the requested changes in behavior and design for when a note is dismissed.

# Conflicts:
#	client/header/activity-panel/panels/inbox/index.js

* Bugfix: Added key to itemlist

The InboxNotePlaceholder is shown as an itemlist but it didn't have a key. This commit adds it.

* Removed unnecessary validation

* Refactored actionList map

This commit adds a refactor to the actionList map

* Changes to the getUndoDismissRequesting functionality

This commit adds a few changes to the getUndoDismissRequesting functionality

* Changed className prop

* Changed other className prop

* Modified InboxPanel rendering

* Removed unnecessary method in placeholder.js

* Simplified the card.js renderActions method

* Change renderActions return in card.js

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

* Inbox notification: add client unit tests (https://github.com/woocommerce/woocommerce-admin/pull/4386)

* Added client unit tests

* Added test cases for getUnreadNotesCount and hasValidNotes

* Corrected typo error

* Removed Enzyme and added React Testing Library

* Removed unnecessary param

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>

* Resolved some conflicts with master

* Marketing note test repaired

This commit repairs the marketing note test

* Added note type 'marketing' to delete all functionality

* Removed set_icon method from some notes and docs

* Added set_icon method as deprecated to prevent errors.

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>
2020-06-03 08:43:35 -03:00
Paul Sealock 16cb332f28 IconButton: Replace with Button (https://github.com/woocommerce/woocommerce-admin/pull/4415) 2020-05-29 14:32:37 +12:00
Jason Conroy e5bd8f3184 Marketing Tab MVP (https://github.com/woocommerce/woocommerce-admin/pull/3953)
* Add Marketing feature flag

* Add marketing page and menu item

* Register marketing page with layout controller

* Add initial marketing cards

* Add max-width to marketing overview page

* Add initial marketing WelcomeCard component

* Make marketing welcome card permanently dismiss

* Add a readme for the marketing page components

* Record tracks event when marketing welcome dismissed

* Match design width

* Add welcome image and initial styles

* Use gridicon for close button

* Fix whitespace

* Add PluginsHelper::get_plugin_data()

* Add initial Marketing\InstalledExtensions class

* Preload installed marketing extensions data

* Tweak extension statuses

* Add InstalledExtensionRow component

* Add initial extension data to InstalledExtensions card

* Refactor PluginsHelper::get_plugin_data method

Using the new get_plugin_path_from_slug method

* Ensure get_plugins() function is available for PluginsHelper

* Simplify using PluginsHelper method

* Add MailChimp configured status logic

* Add links to InstalledExtensionRow component

* Add key prop to extensions list

* Setup styles for InstalledExtensions card

* Display nothing if no installed extensions

* Add InstalledExtensions::get_allowed_plugins()

* Setup Marketing Overview API controller

* Add /activate-plugin marketing endpoint

* Add more extensions URL props

* Add Facebook extension configured status logic

* Update Facebook extension URL props

* Fix extenion data logic

* Move component into it’s own directory

* Setup /marketing/overview/recommended endpoint

* Initial marketing page card header styles

* Add basic extension data to RecommendedExtensions

* Use color as variable

* Tweak card header padding for design

* Add basic styling to RecommendedExtensions card

* settingsUrl is not available if the plugin is not active

* Add /marketing/overview/installed-plugins REST endpoint

* Add basic activation functionality to InstalledExtensions component

* Don’t throw error on success

* Add MVP data store for installed extensions card

* Add core dark blue color variable

* Add styles for installed extensions card

* Move knowledge-base component to its own directory

* Pull recommended marketing plugins from remote test site

* Hide description when configured

As per design

* Tweak colors based on design

* Finish off styling for RecommendedExtensions

* Limit recommended extensions to 6 items

* Add error handling to RecommendedExtensions card

* Rename ‘copy’ extension prop

* Add marketing button component to match design

* Create ProductIcon component for marketing

* Add InstalledExtension icons

* Fix icon image paths

* Add ProductIcon to InstallExtensionRow

* Final styling to installed extensions card row

* Knowledge base card placeholders

* Fix missing icons when plugin not activated

* Remove logging

* Tweak array structure to ensure we have an array in JS

and not an object

* Refactor KnowledgeBase marketing component

- We don’t need loop through every post when rendering, just pick the posts we need
- Remove unused classes

* Move padding from each slide to the container

* Improve slider animations by absolute positioning the slides

* Reduce the slider animation timeout and add a note

* Add in-app purchase flow url params for recommended extensions

* Fix slider animation

* Reset slider height on window resize

* Short slider animation, fix double margin on smaller screens

* Add initial marketing/knowledge-base endpoint

* Pull knowledge base posts from API

* Rename welcome card dismiss tracks event

* Record event on recommended product click

* Recond onclick events for installed extensions card

* Record event when carousel navigation clicked

* img elements must have an alt prop

* Remove import that is never used

* use camelCase

* Decode HTML entities from API call

* Remove unused container div

* Add card loading state

* Add images to knowledge base card

* Link knowledge base posts

* Use the Pagination component rather than duplicate it’s functionality

* Clean up and rename knowledge base slider

* Clean knowledge base CSS and update responsive styles for single post slide

* Add a README for button component

* Add README for product icon component

* Add initial readme for Slider component

* Add correct image sizes to knowledge base slider, finalize styles

* Fix extension link urls

* Resolve some code formatting issue

* Bind class click methods to this

* Wrap nodes in Fragment

* Fix wccom-back path

* Add placeholder author and gravatar

Default avatar url size returned from the API is currently set to 96 so I’ve done a simple replace with 16

* Fix style-lint expected new line

* Add docblock for get_knowledge_base_posts()

* Setup data store for marketing to handle installedExtensions card

* Fix function names

“Activating” not “installing”

* Move welcome card component to its own dir

* IconButton component is going to be deprecated

ref: https://github.com/WordPress/gutenberg/pull/19299

* Support multiple activating plugins in the data store

* Rename extension to plugin for consistency

* Add propTypes to component

* Rename data-store/ to data/

* Fix import paths

* Extract isActivatingPlugin logic into datastore

* Move data store selectors into own file

* POST requests are not cached

* Export apiFetch action

* Don’t wrap API response in object

* Implement data store for recommended extensions

* Implement data store for marketing knowledge base

* Tidy getRecommendedPlugins resolver

* Try a cross browser cover/crop image effect to fit proposed design

And help fit longer titles in

* Add caught errors to handler

* Adjust positioning so watermater is displayed

* InstalledExtensions phpcs fixes

* Marketing phpcs fixes

* Alignment fix

* MarketingOverview phpcs fixes

* Missing full stop

* Update breadcrumbs to use new approach

* Fix style lint issues

* Record `marketing_knowledge_article` track event on knowledge base post click

* Import apiFetch and controls from @wordpress/data-controls

* Hex color to lowercase

* Remove duplicate method after rebase

* Use new showPageArrowsLabel rather than hide with CSS

* Fix blurry avatars on hidpi displays

* Hide avatar if URL is falsy

* Replace test author data with live data

* Combine conditionals into ternary

* Combine conditionals into ternary

* Simplify class column logic

* Only preload option and component settings in the admin

* Fix isActivatingPlugin not updating

Component was not re-rendeding.

* Use querySelector over getElementsByClassName

* Hide Marketing Welcome Card immediately on click

* Use create-a-ticket url for supportUrl and make that the default

* Add getInstalledPlugins resolver with preloaded data

* Revert "Add getInstalledPlugins resolver with preloaded data"

This reverts commit b8b127ec6411bef15616576b3bb189dc31777c13.

* Load plugin data in a separate request after activation

* Update welcome image

* Don’t return plugin data in the activation request.

* A space is required before closing bracket

* Update Jest config to gracefully handle static assets

Ref: https://jestjs.io/docs/en/webpack#handling-static-assets

* Remove unused onExit property

* Remove placeholder README

* Use prop directly

* yield createNotice

* Add note to indicate which Category

* Increase transient time to 3 days

* Use $gap-small

* Add proptype

* Add debounce to slider height resize listener

* Clean up isLoading logic

* Dont show image elements if image data is empty

* Open knowledge base posts in a new window

* Add “noreferrer”

* Turn the tab on in all env

Co-authored-by: Daniel Bitzer <danielbitzer@gmail.com>
2020-03-28 06:48:27 -07:00
edmundcwm f4710a7356 Fix select text alignment (https://github.com/woocommerce/woocommerce-admin/pull/3723) 2020-02-18 13:57:53 -04:00
Darren Ethier 33c5b41e3f Align WooCommerce javascript code standards/linting/styles with WordPress core. (https://github.com/woocommerce/woocommerce-admin/pull/3674)
* align code styles with the same configuration as Woo-Blocks

* initial pass of reformat-files

* applies manual fixes to various new linting errors surfaced by the configuration change.

* Fix state mutation in image-upload

* remove unused pre-commit-hook.js

* requestAnimationFrame -> window.requestAnimationFrame

* wc-api eslint changes

* eslint fixes on client/lib and client/settings

* client/header eslint changes

* fixes for client/dashboard part 1

* fixes client/dashboard part 2 of 2

* client/analytics part 1

* client/analytics continued

* client/analytics, last batch

* rename __mock__ directory

* pass in useEffect, useState from React component or function

* remove '+' from sprintf string argument

* use ref instead of findDOMNode

* reformat and repaply package.json changes

* install deps before running linter in Travis

* useGetCountryStateAutofill

* counryStateAutofill

* countryStateAutofill

Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-02-14 15:23:21 +13:00
Vasily Belolapotkov 06dce7a558 Add outline styling to focused textarea element (https://github.com/woocommerce/woocommerce-admin/pull/3655)
Textearea and input look different because ouline styling is not
applied to text area element.
2020-02-03 15:16:32 +13:00
Joshua T Flowers 1a83c50e19 Onboarding: Fix disabled button hover state (https://github.com/woocommerce/woocommerce-admin/pull/3492)
* Fix hover color for disabled buttons

* Add not-allowed state to cursor on disabled buttons
2019-12-31 10:47:41 +08:00
Jeff Stieler 6a826600c2 Fix WC-Admin component styles for WP 5.3 (https://github.com/woocommerce/woocommerce-admin/pull/3357)
* Style Search component for 5.3.

* Reset native select control styles.

* Fix styling of selected radio options.

* Fix bottom margin on select inputs in filters and pagination.

* Update DropdownButton styles for WP 5.3.

* Style DropdownButton arrow as a chevron.

* Fix tooltip arrow styling.

* Style TextControlWithAffixes for WP 5.3.

* Flatten pagination button style.

* Use SelectControl for StoreAlert snooze action.

* Remove 3D look and use chevron on SplitButton.

* Add changelog entry.

* Fix stylelint issues.

* Update test snapshots.

* Add TextControlWithAffixes disabled prop to documentation and proptypes.

* Use WP checkboxes in ReportTable columns.

* Fix TableCard header background colors.

* Add padding to EllipsisMenu toggle controls.

* Remove version-specific styles.

We require WP 5.3 as a minimum now.
2019-12-13 12:35:29 -05:00
Justin Shreve 448e1f3e11 Remove Newspack Dependency (https://github.com/woocommerce/woocommerce-admin/pull/3302)
* Switch to @wordpress/component's Button

* Finish button conversion

* Move to @wp/component's CheckboxControl

* Add  ImageUpload component

* Remove Newspack package

* CSS Cleanup

* Handle PR feedback: Fix tests, add ImageUploader basic test, fix FireFox/Safari Display issues, and  currency input bug
2019-12-02 12:39:22 -05:00
Paul Sealock 0db5cbb6a0 Component styles: Explicitly import from Gutenberg (https://github.com/woocommerce/woocommerce-admin/pull/3292)
* Fix Gutenberg style imports

* remove duplicate variables

* remove extra variables

* remove duplicate imports

* move base style imports to webpack
2019-11-22 13:19:37 +13:00
Joshua T Flowers 642b17c1aa Onboarding: Update return to task list notices (https://github.com/woocommerce/woocommerce-admin/pull/3192)
* Use core/notices for product creation notices

* Only show task list return notice on first save of taxes

* Update tax completion notice

* Check if tax task is complete before loading script
2019-11-12 09:17:36 +08:00
Jeff Stieler 810cef19f3 Show "add a product" notice to stores without published products (https://github.com/woocommerce/woocommerce-admin/pull/3119)
* Show "add a product" notice to stores without products.

* Fix primary inbox card action button style.
2019-11-07 09:00:38 -07:00
Ron Rennick e1fc69ad8f restrict admin page wrap padding to page wrap (https://github.com/woocommerce/woocommerce-admin/pull/3145) 2019-11-01 16:52:02 -03:00
Joshua T Flowers 1582cb1bf1 Add color to button text to pages with class woocommerce-page (https://github.com/woocommerce/woocommerce-admin/pull/3107) 2019-10-28 09:47:29 +08:00
Justin Shreve 051fd5d934 Update styles to work with WP 5.3 (https://github.com/woocommerce/woocommerce-admin/pull/3086)
* Update onboarding styles to work with WP 5.3

* Fix design on 5.3 as well as older versions

* Adjust styling and remove 5.3 class name
2019-10-25 09:05:44 -04:00
renovate[bot] 5797f2b82e Update wordpress monorepo (https://github.com/woocommerce/woocommerce-admin/pull/2929)
* Update wordpress monorepo

* Add missing Gutenberg grid variables

* Fix button styling

* Fix snapshots (new classes and events are passed through from WP components update)

* Adjust button overwrites

* Update package-lock.json

* Fix focus issues/conflicts with react-dates and Dropdown

* Maintain DateRange focus without impacting expected "click outside" behavior.

* Resolve multiple React versions, update testing dependencies.

* blow away package-lock.json and refresh

- this fixed tests after an npm install on my end

* Allow tabbing to month nav and calendar grid.

* Fix keyboard navigation of DayPicker elements.

Add prop for specifying an element that's allowed to take focus from DateRange.

* refresh package-lock
2019-10-23 11:18:32 -07:00
Mike Jolley edcfc161fa Category Lookup Table - Fix Category Segments (https://github.com/woocommerce/woocommerce-admin/pull/2253)
* Look table class and installer

* New table + stats

* Working reports/initial population

* Remove test

* Refactor, remove depth

* Unused table

* Update todo

* Add docblocks and reorder get_insert_sql params for consistency

* Adjust css braces

* clear hook on deactivation

* PSR-4 category lookup

* linting CSS closing brace last char on line

* initialize category lookup table in unit tests

* missed linting fixes

* revert move of run_all_pending call

* use consistent reference for term_relationships in queries
2019-10-02 12:35:37 +13:00
Jeff Stieler 0be875d898 Reduce size of bundled JS, and overall plugin file size. (https://github.com/woocommerce/woocommerce-admin/pull/2933)
* Remove embed-page-specific Webpack entry.

* Stop @woocommerce/components from being bundled with the app code.
2019-09-24 08:55:39 -07:00
Jeff Stieler a0efb6967f Fetch component usage documentation from local README.md.
Format documentation like Calypso, include usage section.
2019-09-06 11:52:18 -07:00