tag component housekeeping (#16355)

* tag component housekeeping

* added snapshot testing

ui/components/component-library/tag/README.mdx

@@ -19,3 +19,7 @@ The `Tag` accepts all props below as well as all [Box](/docs/ui-components-ui-bo
 ### Label
 
 The text content of the `Tag` component
+
+<Canvas>
+  <Story id="ui-components-component-library-tag-tag-stories-js--label" />
+</Canvas>

ui/components/component-library/tag/__snapshots__/tag.test.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tag should render the label inside the tag and match snapshot 1`] = `
+<div>
+  <div
+    class="box mm-tag box--padding-right-1 box--padding-left-1 box--display-inline-block box--flex-direction-row box--justify-content-center box--align-items-center box--background-color-background-default box--rounded-pill box--border-color-border-default box--border-width-1 box--border-style-solid"
+    data-testid="tag"
+  >
+    <p
+      class="box text text--body-sm text--color-text-default box--flex-direction-row"
+    >
+      Imported
+    </p>
+  </div>
+</div>
+`;

ui/components/component-library/tag/tag.js

@@ -15,7 +15,7 @@ import {
 export const Tag = ({ label, className, labelProps, ...props }) => {
   return (
     <Box
-      className={classnames('tag', className)}
+      className={classnames('mm-tag', className)}
       backgroundColor={COLORS.BACKGROUND_DEFAULT}
       borderColor={COLORS.BORDER_DEFAULT}
       borderWidth={1}
@@ -47,4 +47,8 @@ Tag.propTypes = {
    * Additional classNames to be added to the Tag component
    */
   className: PropTypes.string,
+  /**
+   * Tag also accepts all props from Box
+   */
+  ...Box.propTypes,
 };

ui/components/component-library/tag/tag.scss

@@ -1,4 +1,4 @@
-.tag {
+.mm-tag {
   height: auto;
   width: max-content;
   padding-top: 1px;

ui/components/component-library/tag/tag.stories.js

@@ -24,3 +24,9 @@ export default {
 export const DefaultStory = (args) => <Tag {...args} />;
 
 DefaultStory.storyName = 'Default';
+
+export const Label = (args) => <Tag {...args}>Anchor Element</Tag>;
+
+Label.args = {
+  label: 'Label Story',
+};

ui/components/component-library/tag/tag.test.js

@@ -5,9 +5,12 @@ import React from 'react';
 import { Tag } from './tag';
 
 describe('Tag', () => {
-  it('should render the label inside the tag', () => {
-    const { getByTestId } = render(<Tag data-testid="tag" label="Imported" />);
+  it('should render the label inside the tag and match snapshot', () => {
+    const { getByTestId, container } = render(
+      <Tag data-testid="tag" label="Imported" />,
+    );
     expect(getByTestId('tag')).toBeDefined();
     expect(getByTestId('tag')).toHaveTextContent('Imported');
+    expect(container).toMatchSnapshot();
   });
 });