Repository: laboratoriobridge/bold
Pull request #759 (2022-07-14 18:04:02)

Adding height prop to tag


Patch:
diff --git a/src/components/Tag/Tag.tsx b/src/components/Tag/Tag.tsx
index aa1b8d0ba..23111a0f8 100644
--- a/src/components/Tag/Tag.tsx
+++ b/src/components/Tag/Tag.tsx
@@ -10,13 +10,14 @@ export interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 's
   type?: TagType
   style?: ExternalStyles
   icon?: Icons
+  height?: String
   removable?: boolean
   onRemove?(): void
 }
 
 export function Tag(props: TagProps) {
-  const { type, style, children, icon, removable, onRemove, ...rest } = props
-  const { classes, css } = useStyles(createStyles)
+  const { type, style, children, icon, height, removable, onRemove, ...rest } = props
+  const { classes, css } = useStyles((theme) => createStyles(height, theme))
 
   return (
     <span className={css(classes.tag, classes[type], style)} {...rest}>
@@ -28,11 +29,12 @@ export function Tag(props: TagProps) {
 }
 
 Tag.defaultProps = {
+  height: '1.5rem',
   type: 'normal',
   onRemove: () => null,
 } as Partial<TagProps>
 
-const createStyles = (theme: Theme) => ({
+const createStyles = (height: String, theme: Theme) => ({
   tag: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -42,6 +44,7 @@ const createStyles = (theme: Theme) => ({
     whiteSpace: 'nowrap',
     lineHeight: '1rem',
     fontSize: theme.typography.sizes.text,
+    height: height,
   } as CSSProperties,
   icon: {
     fontSize: '1rem',


Test patch:
diff --git a/src/components/Tag/Tag.test.tsx b/src/components/Tag/Tag.test.tsx
index 7cc85bf96..88aa9ddf2 100644
--- a/src/components/Tag/Tag.test.tsx
+++ b/src/components/Tag/Tag.test.tsx
@@ -17,7 +17,7 @@ it('should accept the style prop', () => {
 
 it('should accept HTML span element properties', () => {
   const { container } = render(<Tag id='test'>Normal</Tag>)
-  expect(container.querySelector('span').getAttribute('id')).toEqual('test')
+  expect(container.querySelector('span')?.getAttribute('id')).toEqual('test')
 })
 
 it('should accept "icon" prop', () => {
@@ -25,6 +25,11 @@ it('should accept "icon" prop', () => {
   expect(container).toMatchSnapshot()
 })
 
+it('should accept "height" prop and render with custom height', () => {
+  const { container } = render(<Tag height={'2.0rem'}>Custom height</Tag>)
+  expect(container).toMatchSnapshot()
+})
+
 it('should accept "removable" prop and render remove icon', () => {
   const { container } = render(<Tag removable>Removable</Tag>)
   expect(container).toMatchSnapshot()
diff --git a/src/components/Tag/__snapshots__/Tag.test.tsx.snap b/src/components/Tag/__snapshots__/Tag.test.tsx.snap
index 43d30e893..bba4abfef 100644
--- a/src/components/Tag/__snapshots__/Tag.test.tsx.snap
+++ b/src/components/Tag/__snapshots__/Tag.test.tsx.snap
@@ -1,5 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should accept "height" prop and render with custom height 1`] = `
+.emotion-0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  font-weight: bold;
+  border-radius: 12px;
+  white-space: nowrap;
+  line-height: 1rem;
+  font-size: 0.8125rem;
+  height: 2.0rem;
+  background: #D3D4DD;
+}
+
+<div>
+  <span
+    class="emotion-0"
+  >
+    Custom height
+  </span>
+</div>
+`;
+
 exports[`should accept "icon" prop 1`] = `
 .emotion-1 {
   display: -webkit-inline-box;
@@ -16,6 +45,7 @@ exports[`should accept "icon" prop 1`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
+  height: 1.5rem;
   background: #D3D4DD;
 }
 
@@ -63,6 +93,7 @@ exports[`should accept "removable" prop and render remove icon 1`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
+  height: 1.5rem;
   background: #D3D4DD;
 }
 
@@ -116,6 +147,7 @@ exports[`should accept the style prop 1`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
+  height: 1.5rem;
   background: #D3D4DD;
   color: green;
 }
@@ -145,6 +177,7 @@ exports[`should render correctly 1`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
+  height: 1.5rem;
   background: #D3D4DD;
 }
 
@@ -173,6 +206,7 @@ exports[`should render correctly 2`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
+  height: 1.5rem;
   background: #AD5000;
   color: #FFFFFF;
 }
@@ -202,6 +236,7 @@ exports[`should render correctly 3`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
+  height: 1.5rem;
   background: #D01E29;
   color: #FFFFFF;
 }
@@ -231,6 +266,7 @@ exports[`should render correctly 4`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
+  height: 1.5rem;
   background: #0069D0;
   color: #FFFFFF;
 }
@@ -260,6 +296,7 @@ exports[`should render correctly 5`] = `
   white-space: nowrap;
   line-height: 1rem;
   font-size: 0.8125rem;
+  height: 1.5rem;
   background: #217B00;
   color: #FFFFFF;
 }