initial commit

packages/woocommerce-blocks/assets/js/editor-components/text-toolbar-button/index.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { Button } from '@wordpress/components';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function TextToolbarButton( { className = '', ...props } ) {
+	const classes = classnames( 'wc-block-text-toolbar-button', className );
+	return <Button className={ classes } { ...props } />;
+}
+
+export default TextToolbarButton;

packages/woocommerce-blocks/assets/js/editor-components/text-toolbar-button/style.scss

@@ -0,0 +1,13 @@
+.wc-block-text-toolbar-button {
+	align-items: center;
+
+	&.is-toggled,
+	&.is-toggled:focus {
+		background: $gray-700;
+		color: $white;
+	}
+}
+.block-editor-block-toolbar__slot {
+	// prevents text toolbar items shrinking to avoid other buttons overlapping.
+	flex-shrink: 0;
+}