Merge pull request #360 from jilliankeenan/PDS-566

(PDS-566) Add prop to Tag component to show/hide button

Author: jilliankeenan

packages/react-components/source/react/library/tag/Tag.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { func, string, oneOf } from 'prop-types';
+import { func, string, oneOf, bool } from 'prop-types';
 import classNames from 'classnames';
 import Button from '../button';
 import Text from '../text';
@@ -15,16 +15,26 @@ const propTypes = {
   emphasis: oneOf(['bold', 'subtle']),
   /** Optional additional classnames */
   className: string,
+  /** Boolean to hide/show close button */
+  hideRemoveButton: bool,
 };
 
 const defaultProps = {
   onClick: () => {},
   type: 'primary',
   className: '',
   emphasis: 'bold',
+  hideRemoveButton: false,
 };
 
-const Tag = ({ label, onClick, type, emphasis, className }) => {
+const Tag = ({
+  label,
+  onClick,
+  type,
+  emphasis,
+  className,
+  hideRemoveButton,
+}) => {
   return (
     <div
       className={classNames(
@@ -34,16 +44,22 @@ const Tag = ({ label, onClick, type, emphasis, className }) => {
         className,
       )}
     >
-      <div className="rc-tag-label-background">
+      <div
+        className={classNames('rc-tag-label-background', {
+          'rc-tag-border': !hideRemoveButton,
+        })}
+      >
         <Text className="rc-tag-text">{label}</Text>
       </div>
-      <Button
-        className="rc-tag-remove-button"
-        onClick={() => onClick()}
-        icon="close"
-        iconSize="small"
-        aria-label={`${label} Remove tag`}
-      />
+      {!hideRemoveButton && (
+        <Button
+          className="rc-tag-remove-button"
+          onClick={() => onClick()}
+          icon="close"
+          iconSize="small"
+          aria-label={`${label} Remove tag`}
+        />
+      )}
     </div>
   );
 };

packages/react-components/source/react/library/tag/Tag.md

@@ -39,6 +39,28 @@ const onTagClick = () => {
 </div>;
 ```
 
+### Static Tag
+
+By adding `hideRemoveButton` to the tag component you can create a static tag in cases where you may want to disable the user from being able to remove it from a list.
+
+```jsx
+const onTagClick = () => {
+  console.log('The X was clicked');
+};
+
+<div>
+  <div>
+    <Tag
+      label="OS = 'Windows'"
+      onClick={onTagClick}
+      type="neutral"
+      emphasis="subtle"
+      hideRemoveButton
+    />
+  </div>
+</div>;
+```
+
 ## Related
 
 - [Badge](#/React%20Components/Badge)

packages/react-components/source/scss/library/components/_tag.scss

@@ -16,22 +16,24 @@
   .rc-tag-text {
     @include puppet-type-button();
     color: $puppet-white;
-    height: fit-content;
+    height: 24px;
+    padding-bottom: 4px;
     padding-left: 8px;
     padding-right: 8px;
+    padding-top: 4px;
   }
 }
 
 .rc-tag-neutral.rc-tag-subtle {
   background-color: $puppet-white;
   border: $puppet-common-border;
 
-  .rc-tag-label-background {
+  .rc-tag-border {
     border-right: $puppet-common-border;
+  }
 
-    .rc-tag-text {
-      color: $puppet-n700;
-    }
+  .rc-tag-text {
+    color: $puppet-n700;
   }
 
   .rc-tag-remove-button {