Merge pull request #646 from Dario-Felipe/feat/add-tag-ellipsis

feat(tag): 🚀 add new prop ellipsis for large texts on tag
gympass · Apr 11, 2023 · 6897879 · 6897879
2 parents 9301327 + 6b3a933
commit 6897879
Show file tree

Hide file tree

Showing 6 changed files with 270 additions and 3 deletions.
diff --git a/packages/doc/content/components/components/tag/default-web.mdx b/packages/doc/content/components/components/tag/default-web.mdx
@@ -13,6 +13,15 @@ render(
 );
 ```
 
+### Ellipsis
+The tag component can receive an ellipsis prop that will add "..." if is a large text.
+
+```
+<Box d="flex">
+  <Tag maxWidth="138px" ellipsis >default with large text</Tag>
+</Box>
+```
+
 ### Props
 
 The Tag component also has support for margins props as you can see more details <GatsbyLink to="/system/spacing">our system</GatsbyLink>

diff --git a/packages/doc/content/components/components/tag/informative-web.mdx b/packages/doc/content/components/components/tag/informative-web.mdx
@@ -45,6 +45,17 @@ Use the prop `small` to control its size
 </Box>
 ```
 
+### Ellipsis
+Use the prop `ellipsis` with `maxWidth` to cut large texts
+
+```
+<Box d="flex" flexDirection="column" alignItems="center">
+  <Tag.Informative maxWidth="110px" variant="informative" ellipsis>
+    I'm a ellipsis tag
+  </Tag.Informative>
+</Box>
+```
+
 ### Adornments
 Use the prop `icon` to add an icon. Refer to <GatsbyLink to="/components/icons">icons</GatsbyLink> to check the library.
 

diff --git a/packages/yoga/src/Tag/web/Informative.jsx b/packages/yoga/src/Tag/web/Informative.jsx
@@ -45,9 +45,10 @@ const TagInformative = ({
     },
   },
   small,
+  ellipsis,
   ...props
 }) => (
-  <Informative small={small} {...props}>
+  <Informative small={small} ellipsis={ellipsis} {...props}>
     {icon && (
       <Icon
         as={icon}
@@ -69,12 +70,15 @@ TagInformative.propTypes = {
   children: node.isRequired,
   /** The tag's size */
   small: bool,
+  /** After set a max-width can put ellipses for large texts */
+  ellipsis: bool,
 };
 
 TagInformative.defaultProps = {
   icon: undefined,
   small: false,
   variant: 'neutral',
+  ellipsis: false,
 };
 
 TagInformative.displayName = 'Tag.Informative';

diff --git a/packages/yoga/src/Tag/web/Tag.jsx b/packages/yoga/src/Tag/web/Tag.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { oneOf, node, bool } from 'prop-types';
-import { margins } from '@gympass/yoga-system';
+import { margins, maxWidth } from '@gympass/yoga-system';
 
 const StyledTag = styled.div`
   display: inline-flex;
@@ -13,6 +13,7 @@ const StyledTag = styled.div`
   ${({
     variant,
     small,
+    ellipsis,
     theme: {
       yoga: {
         colors: {
@@ -44,7 +45,18 @@ const StyledTag = styled.div`
               ${tag.padding.default.left}px;
           `
     }
-   
+
+    ${
+      ellipsis
+        ? `
+      display: block;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    `
+        : ``
+    }
+
     color: ${color.dark};
     border-radius: ${tag.border.radius}px;
     border-width: ${tag.border.width}px;
@@ -56,6 +68,7 @@ const StyledTag = styled.div`
   `}
 
   ${margins}
+  ${maxWidth}
 `;
 
 /** Tags should be keywords to categorize or organize an item. */
@@ -67,11 +80,14 @@ Tag.propTypes = {
   children: node.isRequired,
   /** Can send small to use this variant */
   small: bool,
+  /** After set a max-width can put ellipses for large texts */
+  ellipsis: bool,
 };
 
 Tag.defaultProps = {
   variant: '',
   small: false,
+  ellipsis: false,
 };
 
 export default Tag;
diff --git a/packages/yoga/src/Tag/web/Tag.test.jsx b/packages/yoga/src/Tag/web/Tag.test.jsx
@@ -90,4 +90,34 @@ describe('<Tag />', () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  it('should match snapshot with ellipsis prop', () => {
+    const { container } = render(
+      <ThemeProvider>
+        <Tag maxWidth="10px" ellipsis>
+          Default with ellipsis
+        </Tag>
+      </ThemeProvider>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should match snapshot with variant, informative type and ellipsis prop', () => {
+    const { container } = render(
+      <ThemeProvider>
+        <Tag.Informative variant="success" maxWidth="10px" ellipsis>
+          Success with ellipsis
+        </Tag.Informative>
+        <Tag.Informative variant="attention" maxWidth="10px" ellipsis>
+          Attention with ellipsis
+        </Tag.Informative>
+        <Tag.Informative variant="informative" maxWidth="10px" ellipsis>
+          Informative with ellipsis
+        </Tag.Informative>
+      </ThemeProvider>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/packages/yoga/src/Tag/web/__snapshots__/Tag.test.jsx.snap b/packages/yoga/src/Tag/web/__snapshots__/Tag.test.jsx.snap
@@ -98,6 +98,45 @@ exports[`<Tag /> should match snapshot with custom icon and informative type 1`]
 </div>
 `;
 
+exports[`<Tag /> should match snapshot with ellipsis prop 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-style: solid;
+  padding: 4px 8px 4px 8px;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #6B6B78;
+  border-radius: 4px;
+  border-width: 1px;
+  border-color: #9898A6;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  max-width: 10px;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    Default with ellipsis
+  </div>
+</div>
+`;
+
 exports[`<Tag /> should match snapshot with variant and margin prop  1`] = `
 .c0 {
   display: -webkit-inline-box;
@@ -574,6 +613,164 @@ exports[`<Tag /> should match snapshot with variant prop and informative type wi
 </div>
 `;
 
+exports[`<Tag /> should match snapshot with variant, informative type and ellipsis prop 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-style: solid;
+  padding: 4px 8px 4px 8px;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #1D856C;
+  border-radius: 4px;
+  border-width: 1px;
+  border-color: #1D856C;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  max-width: 10px;
+}
+
+.c2 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-style: solid;
+  padding: 4px 8px 4px 8px;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #CA4808;
+  border-radius: 4px;
+  border-width: 1px;
+  border-color: #CA4808;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  max-width: 10px;
+}
+
+.c4 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-style: solid;
+  padding: 4px 8px 4px 8px;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #5340C9;
+  border-radius: 4px;
+  border-width: 1px;
+  border-color: #5340C9;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  max-width: 10px;
+}
+
+.c1 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #C1EEDB;
+  color: #231B22;
+  border-radius: 4px;
+  border-color: #C1EEDB;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c5 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #E0DFFF;
+  color: #231B22;
+  border-radius: 4px;
+  border-color: #E0DFFF;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.c3 {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: #FCD6C3;
+  color: #231B22;
+  border-radius: 4px;
+  border-color: #FCD6C3;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+<div>
+  <div
+    class="c0 c1"
+  >
+    Success with ellipsis
+  </div>
+  <div
+    class="c2 c3"
+  >
+    Attention with ellipsis
+  </div>
+  <div
+    class="c4 c5"
+  >
+    Informative with ellipsis
+  </div>
+</div>
+`;
+
 exports[`<Tag /> should match snapshot with without icon and informative type 1`] = `
 .c0 {
   display: -webkit-inline-box;