woocommerce/plugins/woocommerce-admin/client/header/activity-panel/activity-header
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
..
README.md Update `layout/*` file structure (https://github.com/woocommerce/woocommerce-admin/pull/463) 2018-09-21 11:19:05 -04:00
index.js Inbox header: Update styles (https://github.com/woocommerce/woocommerce-admin/pull/4692) 2020-06-29 11:34:53 +12:00
style.scss Update @wordpress/base-styles and replace deprecated variables (https://github.com/woocommerce/woocommerce-admin/pull/4759) 2020-07-17 12:11:42 +12:00

README.md

ActivityHeader

A component designed for use in the activity panel. It returns a title and can optionally also include a component like dropdown or Ellipsis menu.

How to use:

import ActivityHeader from 'layout/activity-panel/activity-header';

render: function() {
  return (
    <ActivityHeader
      title="Orders"
    />
  );
}

Props

  • title: A title for this card (required).
  • className: Additional class names.
  • menu: A dropdown menu (EllipsisMenu) shown at the top-right of the card.