semrush · ilyabrower · Apr 17, 2025 · Apr 8, 2025 · Apr 8, 2025 · Apr 8, 2025
diff --git a/...le-Input-Tag-with-Select---Empty-Input-and-expanded-Select-1-chromium-linux.png b/...le-Input-Tag-with-Select---Empty-Input-and-expanded-Select-1-chromium-linux.png
diff --git a/...Tags-with-Addon-Circle-Text-Close---sized-states-and-pairs-1-chromium-linux.png b/...Tags-with-Addon-Circle-Text-Close---sized-states-and-pairs-1-chromium-linux.png
diff --git a/...-Tags-with-Addon-Circle-Text-Close---sized-states-and-pairs-1-firefox-linux.png b/...-Tags-with-Addon-Circle-Text-Close---sized-states-and-pairs-1-firefox-linux.png
diff --git a/...t-Tags-with-Addon-Circle-Text-Close---sized-states-and-pairs-1-webkit-linux.png b/...t-Tags-with-Addon-Circle-Text-Close---sized-states-and-pairs-1-webkit-linux.png
diff --git a/semcore/tag/CHANGELOG.md b/semcore/tag/CHANGELOG.md
@@ -12,6 +12,12 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 - `Tag.Close` component. Use `TagContainer.Close`.
 
+## [5.55.0] - 2025-04-11
+
+### Changed
+
+- Margins and paddings for addons and text, sizes of `Circle` addons for different tag sizes.
+
 ## [5.54.0] - 2025-04-11
 
 ### Changed

diff --git a/...tag/__tests__/__image_snapshots__/tag-renders-correctly-with-addon-and-text.png b/...tag/__tests__/__image_snapshots__/tag-renders-correctly-with-addon-and-text.png
diff --git a/...tag/__tests__/__image_snapshots__/tag-renders-correctly-with-addon-as-props.png b/...tag/__tests__/__image_snapshots__/tag-renders-correctly-with-addon-as-props.png
diff --git a/...ag/__tests__/__image_snapshots__/tag-renders-correctly-with-keyboardfocused.png b/...ag/__tests__/__image_snapshots__/tag-renders-correctly-with-keyboardfocused.png
diff --git a/semcore/tag/__tests__/__image_snapshots__/tag-renders-correctly.png b/semcore/tag/__tests__/__image_snapshots__/tag-renders-correctly.png
diff --git a/...s__/__image_snapshots__/tag-renders-without-focus-ring-when-non-interactive.png b/...s__/__image_snapshots__/tag-renders-without-focus-ring-when-non-interactive.png
diff --git a/...tests__/__image_snapshots__/tag-should-display-ellipsis-if-text-is-too-long.png b/...tests__/__image_snapshots__/tag-should-display-ellipsis-if-text-is-too-long.png
diff --git a/semcore/tag/__tests__/__image_snapshots__/tag-should-support-active.png b/semcore/tag/__tests__/__image_snapshots__/tag-should-support-active.png
diff --git a/semcore/tag/__tests__/__image_snapshots__/tag-should-support-disabled.png b/semcore/tag/__tests__/__image_snapshots__/tag-should-support-disabled.png
diff --git a/semcore/tag/__tests__/__image_snapshots__/tag-should-support-size-props.png b/semcore/tag/__tests__/__image_snapshots__/tag-should-support-size-props.png
diff --git a/semcore/tag/__tests__/__image_snapshots__/tag-should-support-theme-props.png b/semcore/tag/__tests__/__image_snapshots__/tag-should-support-theme-props.png
diff --git a/...ts__/__image_snapshots__/tagcontainer-renders-correctly-with-addon-and-text.png b/...ts__/__image_snapshots__/tagcontainer-renders-correctly-with-addon-and-text.png
diff --git a/...ts__/__image_snapshots__/tagcontainer-renders-correctly-with-addon-as-props.png b/...ts__/__image_snapshots__/tagcontainer-renders-correctly-with-addon-as-props.png
diff --git a/...s__/__image_snapshots__/tagcontainer-renders-correctly-with-keyboardfocused.png b/...s__/__image_snapshots__/tagcontainer-renders-correctly-with-keyboardfocused.png
diff --git a/semcore/tag/__tests__/__image_snapshots__/tagcontainer-renders-correctly.png b/semcore/tag/__tests__/__image_snapshots__/tagcontainer-renders-correctly.png
diff --git a/...e_snapshots__/tagcontainer-renders-text-correctly-with-focused-close-button.png b/...e_snapshots__/tagcontainer-renders-text-correctly-with-focused-close-button.png
diff --git a/..._image_snapshots__/tagcontainer-renders-text-correctly-with-keyboardfocused.png b/..._image_snapshots__/tagcontainer-renders-text-correctly-with-keyboardfocused.png
diff --git a/..._/__image_snapshots__/tagcontainer-renders-with-focus-ring-when-interactive.png b/..._/__image_snapshots__/tagcontainer-renders-with-focus-ring-when-interactive.png
diff --git a/...ge_snapshots__/tagcontainer-renders-without-focus-ring-when-non-interactive.png b/...ge_snapshots__/tagcontainer-renders-without-focus-ring-when-non-interactive.png
diff --git a/..._image_snapshots__/tagcontainer-should-display-ellipsis-if-text-is-too-long.png b/..._image_snapshots__/tagcontainer-should-display-ellipsis-if-text-is-too-long.png
diff --git a/semcore/tag/__tests__/__image_snapshots__/tagcontainer-should-support-active.png b/semcore/tag/__tests__/__image_snapshots__/tagcontainer-should-support-active.png
diff --git a/...tests__/__image_snapshots__/tagcontainer-should-support-disabled-close-only.png b/...tests__/__image_snapshots__/tagcontainer-should-support-disabled-close-only.png
diff --git a/...__tests__/__image_snapshots__/tagcontainer-should-support-disabled-full-tag.png b/...__tests__/__image_snapshots__/tagcontainer-should-support-disabled-full-tag.png
diff --git a/..._/__image_snapshots__/tagcontainer-should-support-disabled-tag-content-only.png b/..._/__image_snapshots__/tagcontainer-should-support-disabled-tag-content-only.png
diff --git a/...re/tag/__tests__/__image_snapshots__/tagcontainer-should-support-size-props.png b/...re/tag/__tests__/__image_snapshots__/tagcontainer-should-support-size-props.png
diff --git a/...e/tag/__tests__/__image_snapshots__/tagcontainer-should-support-theme-props.png b/...e/tag/__tests__/__image_snapshots__/tagcontainer-should-support-theme-props.png
diff --git a/...-Render-and-Visible-Tag-with-Addon-all-sizes-and-positions-1-chromium-linux.png b/...-Render-and-Visible-Tag-with-Addon-all-sizes-and-positions-1-chromium-linux.png
diff --git a/...s-Render-and-Visible-Tag-with-Addon-all-sizes-and-positions-1-firefox-linux.png b/...s-Render-and-Visible-Tag-with-Addon-all-sizes-and-positions-1-firefox-linux.png
diff --git a/...gs-Render-and-Visible-Tag-with-Addon-all-sizes-and-positions-1-webkit-linux.png b/...gs-Render-and-Visible-Tag-with-Addon-all-sizes-and-positions-1-webkit-linux.png
diff --git a/...pshots/Tags-Render-and-Visible-Tag-with-Addon-as-container-1-chromium-linux.png b/...pshots/Tags-Render-and-Visible-Tag-with-Addon-as-container-1-chromium-linux.png
diff --git a/...apshots/Tags-Render-and-Visible-Tag-with-Addon-as-container-1-firefox-linux.png b/...apshots/Tags-Render-and-Visible-Tag-with-Addon-as-container-1-firefox-linux.png
diff --git a/...napshots/Tags-Render-and-Visible-Tag-with-Addon-as-container-1-webkit-linux.png b/...napshots/Tags-Render-and-Visible-Tag-with-Addon-as-container-1-webkit-linux.png
diff --git a/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css
@@ -4,25 +4,16 @@ SCircle {
   justify-content: center;
   overflow: hidden;
   border-radius: 50%;
-  margin: 0 var(--intergalactic-spacing-1x, 4px);
-
-  &:first-child {
-    margin-left: 0;
-  }
-
-  &:last-child {
-    margin-right: 0;
-  }
 }
 
 SCircle[size="m"] {
-  width: 16px;
-  height: 16px;
+  width: 12px;
+  height: 12px;
 }
 
 SCircle[size="l"] {
-  width: 20px;
-  height: 20px;
+  width: 16px;
+  height: 16px;
 }
 
 SCircle[size="xl"] {
@@ -35,9 +26,11 @@ SAddon {
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  padding-left: var(--intergalactic-spacing-1x, 4px);
-  padding-right: var(--intergalactic-spacing-1x, 4px);
   position: relative;
+
+  &:last-child {
+    padding-right: 0;
+  }
 }
 
 STagContainer SAddon {
@@ -111,16 +104,12 @@ STag[interactiveView] {
 
 STag[size="m"],
 STagContainerClose[size="m"],
-STagContainer[size="m"] SAddon {
+STagContainer[size="m"] {
   height: 20px;
   min-width: 20px;
 
-  & SCircle:first-child {
-    margin-left: calc(-1 * var(--intergalactic-spacing-05x, 2px));
-  }
-
-  & SCircle:last-child {
-    margin-right: calc(-1 * var(--intergalactic-spacing-05x, 2px));
+  & SAddon:first-child {
+    padding-left: 0;
   }
 
   & SText {
@@ -131,7 +120,7 @@ STagContainer[size="m"] SAddon {
 
 STag[size="l"],
 STagContainerClose[size="l"],
-STagContainer[size="l"] SAddon {
+STagContainer[size="l"] {
   height: 28px;
   min-width: 28px;
 
@@ -238,17 +227,12 @@ SText {
   position: relative;
 }
 
-SText:not(:only-child):first-child {
-  padding-right: 0;
-}
-
-SText:not(:first-child):not(:last-child) {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-SText:not(:only-child):last-child {
-  padding-left: 0;
+SText:focus-visible {
+  box-shadow: var(
+    --intergalactic-keyboard-focus,
+    0px 0px 0px 3px rgba(0, 143, 248, 0.5)
+  );
+  z-index: 1;
 }
 
 SClose {
@@ -257,7 +241,7 @@ SClose {
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  padding: var(--intergalactic-spacing-1x, 4px);
+  padding: var(--intergalactic-spacing-1x, 4px) 0;
   position: relative;
 
   & path {
@@ -301,7 +285,6 @@ STagContainer {
     &:not(:first-child) {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
-      padding-left: var(--intergalactic-spacing-05x, 2px);
 
       &::before,
       &::after {

diff --git a/stories/components/data-table/tests/examples/nothing-found-sortable.tsx b/stories/components/data-table/tests/examples/nothing-found-sortable.tsx
@@ -11,7 +11,7 @@ const data = [
   ];
 
 const Demo = () => {
-  const [sort, setSort] = React.useState<DataTableSort<keyof typeof data[0]>>(['kd', 'desc']);
+  const [sort, setSort] = React.useState<DataTableSort<keyof typeof data[0]>>(['keyword/kd/cpc/vol','desc']);
   const sortedData = React.useMemo(
     () =>
       [...data].sort((aRow, bRow) => {

diff --git a/stories/components/data-table/tests/examples/one-merged-cell.tsx b/stories/components/data-table/tests/examples/one-merged-cell.tsx
@@ -11,7 +11,7 @@ const data = [
   ];
 
 const Demo = () => {
-  const [sort, setSort] = React.useState<DataTableSort<keyof typeof data[0]>>(['kd', 'desc']);
+  const [sort, setSort] = React.useState<DataTableSort<keyof typeof data[0]>>(['keyword/kd/cpc/vol', 'desc']);
   const sortedData = React.useMemo(
     () =>
       [...data].sort((aRow, bRow) => {

diff --git a/stories/components/tag/advanced/Tag.stories.tsx b/stories/components/tag/advanced/Tag.stories.tsx
@@ -2,8 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Tag from '@semcore/tag';
 
 import TagAddonSizesPositionsExample from './examples/tag_with_addon_all_sizes_positions';
+import TagCircleAddonSizesExample from './examples/tag_with_circle_addon_all_sizes_positions';
 import TagContainerAddonExample from './examples/tag_container_addon';
-
+import TagTextCloseExample from './examples/tag_text_close';
 const meta: Meta<typeof Tag> = {
   title: 'Components/Tag/Advanced',
   component: Tag,
@@ -16,6 +17,14 @@ export const TagWithAddonSizesAndPositions: Story = {
   render: TagAddonSizesPositionsExample,
 };
 
+export const TagWithCircleAddonSizesAndPositions: Story = {
+  render: TagCircleAddonSizesExample,
+};
+
 export const TagContainerAddon: Story = {
   render: TagContainerAddonExample,
 };
+
+export const TagTextClose: Story = {
+  render: TagTextCloseExample,
+};
diff --git a/stories/components/tag/advanced/examples/tag_container_addon.tsx b/stories/components/tag/advanced/examples/tag_container_addon.tsx
@@ -17,6 +17,42 @@ const Demo = () => {
 
   return (
     <Box>
+      {tags.map((tag, idx) => (
+        <TagContainer theme='secondary' size='xl' data-id={idx} key={idx} mr={1} interactive>
+          <TagContainer.Tag>
+            <TagContainer.Tag.Text>{tag}</TagContainer.Tag.Text>
+          </TagContainer.Tag>
+          <TagContainer.Close onClick={handleEditTag} />
+        </TagContainer>
+      ))}
+      {tags.map((tag, idx) => (
+        <TagContainer theme='secondary' size='l' data-id={idx} key={idx} mr={1} interactive>
+          <TagContainer.Tag>
+            <TagContainer.Tag.Text>{tag}</TagContainer.Tag.Text>
+          </TagContainer.Tag>
+          <TagContainer.Close onClick={handleEditTag} />
+        </TagContainer>
+      ))}
+      {tags.map((tag, idx) => (
+        <TagContainer theme='secondary' size='m' data-id={idx} key={idx} mr={1} interactive>
+          <TagContainer.Tag>
+            <TagContainer.Tag.Text>{tag}</TagContainer.Tag.Text>
+          </TagContainer.Tag>
+          <TagContainer.Close onClick={handleEditTag} />
+        </TagContainer>
+      ))}
+
+      {tags.map((tag, idx) => (
+        <TagContainer theme='secondary' size='xl' data-id={idx} key={idx} mr={1} interactive>
+          <TagContainer.Tag>
+            <TagContainer.Addon>
+              <Edit />
+            </TagContainer.Addon>
+            <TagContainer.Tag.Text>{tag}</TagContainer.Tag.Text>
+          </TagContainer.Tag>
+          <TagContainer.Close onClick={handleEditTag} />
+        </TagContainer>
+      ))}
       {tags.map((tag, idx) => (
         <TagContainer theme='secondary' size='l' data-id={idx} key={idx} mr={1} interactive>
           <TagContainer.Tag>
@@ -27,6 +63,37 @@ const Demo = () => {
           </TagContainer.Tag>
           <TagContainer.Close onClick={handleEditTag} />
         </TagContainer>
+      ))}
+            {tags.map((tag, idx) => (
+        <TagContainer theme='secondary' size='m' data-id={idx} key={idx} mr={1} interactive>
+          <TagContainer.Tag>
+            <TagContainer.Addon>
+              <Edit />
+            </TagContainer.Addon>
+            <TagContainer.Tag.Text>{tag}</TagContainer.Tag.Text>
+          </TagContainer.Tag>
+          <TagContainer.Close onClick={handleEditTag} />
+        </TagContainer>
+      ))}
+            {tags.map((tag, idx) => (
+        <TagContainer theme='secondary' size='xl' data-id={idx} key={idx} mr={1} interactive>
+          <TagContainer.Tag>
+            <TagContainer.Addon>
+              <Edit />
+            </TagContainer.Addon>
+            <TagContainer.Tag.Text>{tag}</TagContainer.Tag.Text>
+          </TagContainer.Tag>
+        </TagContainer>
+      ))}
+      {tags.map((tag, idx) => (
+        <TagContainer theme='secondary' size='l' data-id={idx} key={idx} mr={1} interactive>
+          <TagContainer.Tag>
+            <TagContainer.Addon>
+              <Edit />
+            </TagContainer.Addon>
+            <TagContainer.Tag.Text>{tag}</TagContainer.Tag.Text>
+          </TagContainer.Tag>
+        </TagContainer>
       ))}
       {tags.map((tag, idx) => (
         <TagContainer theme='secondary' size='m' data-id={idx} key={idx} mr={1} interactive>