abcedbefe0
* Update the margin-left on the buttons in the top bar from 16px to 8px
* On mobile, the left and right body margins should be 32 px
* The inner padding in the tab in the top bar should be 12px, not 16px
* In the edit product link modal, let's set this modal’s width to 650 px and remove the line separating the header from the contents
* All modals should now have 8 px window radius
* In the feedback form, can we fix the buttons at the bottom
* The help icon in checkboxes small, detached from the item label, and vertically misaligned. Left margin of 4 px, no vertical adjustment; somehow it has a -2px set for the top margin)
* Fix block-editor-block-contextual-toolbar top position
* When the product is in a draft state, the button in the top bar should say Add, not Save. It should change into Update once it's published on the store
* Fix layout margin top
* Add ection support for blockGap and set title and description to optional
* Remove non needed control field margin bottom
* Fix schedule sale block spacing
* Remove non needed control field help text margin bottom
* Remove the sub section outer spacing
* Move pricing fields into a sub section block
* Fix collapsible-contet margin top
* Remove invalid inner block layout spacing
* Wrap sku, stock toogle and quantity within a sub section
* Group inventory advance section inner blocks into a sub section
* Fix linter error
* Add changelog files
* Fix php lint error
* Change unit names to fit GB definitions
see:
|
||
---|---|---|
.. | ||
changelog | ||
src | ||
typings | ||
.eslintrc.js | ||
.gitignore | ||
.npmrc | ||
CHANGELOG.md | ||
PREVIOUS_CHANGELOG.md | ||
README.md | ||
babel.config.js | ||
composer.json | ||
composer.lock | ||
jest.config.json | ||
package.json | ||
tsconfig-cjs.json | ||
tsconfig.json | ||
webpack.config.js |
README.md
Components
This packages includes a library of components that can be used to create pages in the WooCommerce dashboard and reports pages.
Installation
Install the module
pnpm install @woocommerce/components --save
View the full Component documentation for usage information.
Usage
/**
* Woocommerce dependencies
*/
import { Card } from '@woocommerce/components';
export default function MyCard() {
return (
<Card title="Store Performance" description="Key performance metrics">
<p>Your stuff in a Card.</p>
</Card>
);
}
Many components include CSS to add style, you will need to add in order to appear correctly. Within WooCommerce, add the wc-components
stylesheet as a dependency of your plugin's stylesheet. See wp_enqueue_style documentation for how to specify dependencies.
In non-WordPress projects, link to the build-style/card/style.css
file directly, it is located at node_modules/@woocommerce/components/build-style/<component_name>/style.css
.