PANGOLIN- 3683 - <Tag/> styling updates (#2767)

* chore(tag): update border-radius from 2 to 20px * chore(tag): update border-color to warning85 * chore(tag-body): update from text.body to text.detail * fix(tag-body): adjust styling for 20px border radius * chore(tag-body): update onhover border color to primary90 * chore(tag): update background to neutral for disabled * fix(tag): correct background color on warning disabled * chore(tag): refactor conditional logic * test(tag): add additional tests * chore(changeset): add updates to changelog * refactor(tag): simplify border styles management (#2770) * chore(tag): update type warning background color on hover --------- Co-authored-by: Carlos Cortizas <[email protected]>
commercetools · Apr 11, 2024 · 0ebf4f8 · 0ebf4f8
1 parent d961459
commit 0ebf4f8
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 52 deletions.
diff --git a/.changeset/smooth-baboons-beg.md b/.changeset/smooth-baboons-beg.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/tag': minor
+---
+
+Component UI styling updates.  
+
diff --git a/packages/components/tag/src/tag-body.tsx b/packages/components/tag/src/tag-body.tsx
@@ -30,18 +30,6 @@ const defaultProps: Pick<TTagProps, 'type' | 'isDisabled' | 'isDraggable'> = {
 type TBody = Pick<TTagBodyProps, 'to' | 'as'>;
 const Body = styled.div<TBody>``;
 
-const getClickableContentWrapperStyles = (type: TTagBodyProps['type']) => {
-  return type === 'warning'
-    ? []
-    : [
-        css`
-          &:hover {
-            border-color: ${designTokens.colorNeutral};
-          }
-        `,
-      ];
-};
-
 const getTextDetailColor = (isDisabled: TTagBodyProps['isDisabled']) => {
   if (isDisabled) return designTokens.colorNeutral60;
   return designTokens.colorSolid;
@@ -51,20 +39,13 @@ const getContentWrapperStyles = (props: TTagBodyProps) => {
   return css`
     position: relative;
     display: flex;
-    box-sizing: border-box;
     align-items: center;
-    border-radius: ${designTokens.borderRadius2};
     padding: ${designTokens.spacing05} ${designTokens.spacing25};
     white-space: normal;
     text-align: left;
     min-width: 0;
     overflow-wrap: break-word;
     hyphens: auto;
-    border-style: solid;
-    border-width: 1px;
-    border-color: ${props.type === 'warning'
-      ? designTokens.colorWarning
-      : designTokens.borderColorForTag};
     color: ${designTokens.colorSolid};
     fill: ${designTokens.colorNeutral40};
 
@@ -93,15 +74,6 @@ const TagBody = (props: TTagBodyProps) => {
       as={props.as}
       css={[
         getContentWrapperStyles(props),
-        Boolean(props.onRemove) &&
-          css`
-            border-right: ${!props.isDisabled && '0'};
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-          `,
-        !props.isDisabled &&
-          Boolean(props.onClick) &&
-          getClickableContentWrapperStyles(props.type),
         !props.isDisabled &&
           Boolean(props.onClick) &&
           css`
@@ -117,9 +89,9 @@ const TagBody = (props: TTagBodyProps) => {
         {props.isDraggable && !props.isDisabled ? (
           <DragIcon data-testid="drag-icon" size="medium" />
         ) : null}
-        <Text.Body tone={textTone} as="span">
+        <Text.Detail tone={textTone} as="span">
           {props.children}
-        </Text.Body>
+        </Text.Detail>
       </Spacings.Inline>
     </Body>
   );

diff --git a/packages/components/tag/src/tag.spec.js b/packages/components/tag/src/tag.spec.js
@@ -5,6 +5,20 @@ it('should render text as children', () => {
   render(<Tag>Bread</Tag>);
   expect(screen.getByText('Bread')).toBeInTheDocument();
 });
+
+it('should render multiple text children', () => {
+  render(
+    <Tag>
+      <span>Bread</span>
+      <span>Peanut Butter</span>
+      <span>Honey</span>
+    </Tag>
+  );
+  expect(screen.getByText('Bread')).toBeInTheDocument();
+  expect(screen.getByText('Peanut Butter')).toBeInTheDocument();
+  expect(screen.getByText('Honey')).toBeInTheDocument();
+});
+
 it('should render html markup as children', () => {
   const error = jest.spyOn(console, 'error').mockImplementation(() => {});
   render(
@@ -108,10 +122,26 @@ describe('when `to` is set', () => {
     );
     screen.getByText('Bread').click();
     expect(onClick).toHaveBeenCalled();
-
     expect(history.location.pathname).toBe('/foo');
   });
 
+  it('should redirect on link click if text children proceed it', () => {
+    const { history } = render(
+      <Tag>
+        <span>Bread</span>
+        <span>Peanut Butter</span>
+        <span onClick={() => history.push('/honey')}>Honey</span>
+      </Tag>
+    );
+
+    expect(screen.getByText('Bread')).toBeInTheDocument();
+    expect(screen.getByText('Peanut Butter')).toBeInTheDocument();
+    expect(screen.getByText('Honey')).toBeInTheDocument();
+
+    screen.getByText('Honey').click();
+    expect(history.location.pathname).toBe('/honey');
+  });
+
   it('should not redirect when removed', () => {
     const onRemove = jest.fn();
     const { history } = render(
@@ -126,7 +156,7 @@ describe('when `to` is set', () => {
     expect(onRemove).toHaveBeenCalled();
 
     // ensure the pathname is not "/foo", otherwise a redirect would have
-    // happend
+    // happened
     expect(history.location.pathname).toBe('/');
   });
 
@@ -140,7 +170,7 @@ describe('when `to` is set', () => {
     screen.getByText('Bread').click();
 
     // ensure the pathname is not "/foo", otherwise a redirect would have
-    // happend
+    // happened
     expect(history.location.pathname).toBe('/');
   });
 });
diff --git a/packages/components/tag/src/tag.tsx b/packages/components/tag/src/tag.tsx
@@ -88,18 +88,28 @@ const Tag = (props: TTagProps) => {
             cursor: pointer;
             text-decoration: none;
           }
+          box-sizing: border-box;
           cursor: default;
           min-width: 0;
           display: flex;
-          background-color: ${props.type === 'warning'
+          border-radius: ${designTokens.borderRadius20};
+          border-style: solid;
+          border-width: 1px;
+          background-color: ${props.isDisabled
+            ? designTokens.colorNeutral95
+            : props.type === 'warning'
             ? designTokens.colorWarning95
             : designTokens.backgroundColorForTag};
-
+          border-color: ${props.isDisabled
+            ? designTokens.colorNeutral
+            : props.type === 'warning'
+            ? designTokens.colorWarning85
+            : designTokens.borderColorForTag};
           ${props.onClick &&
           `&:hover {
             background-color: ${
               props.type === 'warning'
-                ? designTokens.colorWarning95
+                ? designTokens.colorWarning85
                 : designTokens.backgroundColorForTagWhenHovered
             };
           }`}
@@ -124,25 +134,9 @@ const Tag = (props: TTagProps) => {
             onClick={props.onRemove}
             css={[
               css`
-                border-color: ${props.type === 'warning'
-                  ? designTokens.colorWarning
-                  : designTokens.borderColorForTag};
                 padding: 0 ${designTokens.spacing25};
-                border-radius: 0 ${designTokens.borderRadius2}
-                  ${designTokens.borderRadius2} 0;
                 display: flex;
                 align-items: center;
-                background: inherit;
-                border-style: solid;
-                border-width: 1px 1px 1px 0;
-                :not(:disabled)&:hover,
-                :not(:disabled)&:focus {
-                  border-color: ${props.type === 'warning'
-                    ? designTokens.colorWarning
-                    : designTokens.borderColorForTag};
-
-                  fill: ${designTokens.colorError};
-                }
                 fill: ${designTokens.colorNeutral40};
                 &:disabled {
                   fill: ${designTokens.colorNeutral60};