diff --git a/packages/react/lib/Tag/index.js b/packages/react/lib/Tag/index.js index f39297769..630c0a6d9 100644 --- a/packages/react/lib/Tag/index.js +++ b/packages/react/lib/Tag/index.js @@ -2,6 +2,8 @@ import { forwardRef, useImperativeHandle, useRef } from 'react'; import { classNames } from '@junipero/core'; import PropTypes from 'prop-types'; +import { Remove } from '../icons'; + const Tag = forwardRef(({ className, children, @@ -31,7 +33,7 @@ const Tag = forwardRef(({ > { content } { onDelete && ( - + ) } ); diff --git a/packages/react/lib/Tag/index.test.js.snap b/packages/react/lib/Tag/index.test.js.snap index a596f5cc3..4c5f33ee7 100644 --- a/packages/react/lib/Tag/index.test.js.snap +++ b/packages/react/lib/Tag/index.test.js.snap @@ -8,9 +8,19 @@ exports[` should be deletable 1`] = ` Item 1 - + + + + should be deletable 1`] = ` Item 2 - + + + + should be deletable 1`] = ` Item 3 - + + + + `; exports[` should be deletable 2`] = `
+ + + Item 1 + + + + + + Item 2 - + + + + should be deletable 2`] = ` Item 3 - + + + +
`; diff --git a/packages/theme/lib/Tag.sass b/packages/theme/lib/Tag.sass index 003896486..d4101aba7 100644 --- a/packages/theme/lib/Tag.sass +++ b/packages/theme/lib/Tag.sass @@ -8,6 +8,8 @@ color: var(--text-color) display: inline-flex align-items: center + align-content: center + gap: 8px &.primary --background-color: var(--junipero-velvet) @@ -25,27 +27,7 @@ --background-color: var(--junipero-lime) --text-color: var(--junipero-seashell) - .delete - cursor: pointer - position: relative - margin-left: 8px - width: 10px - height: 10px - display: inline-flex - - &::before, &::after - width: 2px - height: 10px - border-radius: 2px - background: var(--text-color) - content: "" - display: block - position: absolute - top: 0 - left: 50% + .remove + --icons-color: var(--text-color) - &::before - transform: rotate(45deg) - - &::after - transform: rotate(-45deg) + cursor: pointer