db2a74927b
* Add an 'onBlur' property to the 'DateInput' component This allows passing a callback function for the input's onBlur event. * Close the calendar when an element outside the parent dropdown gets focused Previously, you had to click on the calendar and then click anywhere else for it to be closed without selecting a date. Now the calendar gets closed when any element outside the parent's dropdown element gets thefocus. * Remove redundant code for dismissing the calendar when pressing the tab key Dismissing the calendar this way doesn't seem to be good for accessibility. That aside, the introduced dismissal on blur handles the scenario of when the calendar isn't needed anymore and the user is navigating with the keyboard. * Add changelog entry * Use the PR ID instead of the issue ID for the changelog entry * Separate new declaration on a new line instead of using a comma * Add an entry to the packages/components/ changelog |
||
|---|---|---|
| .. | ||
| src | ||
| .npmrc | ||
| CHANGELOG.md | ||
| README.md | ||
| 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
npm 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.