46762dab29
* Early draft of SplitButton component. * Changelog for SplitButton component. * Rename SplitButton to SplitButtonDropdown, apply styles to address toggle button location/size, take primary button from children. * Address button variant styles * Rename 'Default' SplitButtonDropdown story to 'Secondary' for clarity. * Add a SplitButtonDropdown story where the component is disabled. * README for SplitButtonDropdown component. * Add disabled prop to SplitButtonDropdown README. * Add a SplitButtonDropdown story where some but not all actions are disabled. * Restore PrimaryDisabled story for SplitButtonDropdown. * Reorganize SplitButtonDropdown properties inheritance to allow both disabled and variant to apply to both the main and toggle buttons. * Rename SplitButtonDropdown to SplitDropdown. * Hardcode menuIcon and menuIconExpanded in SplitDropdown. * Fix outdated stylesheet import for SplitDropdown. * Update SplitDropdown changelog to new component name. * Update variable names that reference Actions to Items. * Hardcode expanded/collapsed toggle button icons without extraneous const declarations. * Use classNames() helper fn for className concatenation. * Increase width of SplitDropdown toggle button. * Add a specific className to the root ButtonGroup element of SplitDropdown. * Simple rendering test for SplitDropdown. * For consistency, move Button text out of props in SplitDropdown README and story. * SplitDropdown does not render a toggle button if there is nothing to put in the menu. * Fix variant prop type declaration in SplitDropdown. * Improve SplitDropdown test: remove snapshot, add toggle click. Co-authored-by: Joshua Flowers <joshuatf@gmail.com> |
||
|---|---|---|
| .. | ||
| changelog | ||
| src | ||
| .eslintrc.js | ||
| .gitignore | ||
| .npmrc | ||
| CHANGELOG.md | ||
| PREVIOUS_CHANGELOG.md | ||
| README.md | ||
| 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.