From c4dc8a12b2c8318f200d8886e3c257e8216d64c7 Mon Sep 17 00:00:00 2001
From: taysea <taylor.seamans@yahoo.com>
Date: Wed, 27 Nov 2024 11:34:16 -0800
Subject: [PATCH] Add Tag onRemove preview

---
 .../src/examples/components/tag/TagSimple.js  | 16 +++-
 aries-site/src/themes/aries.js                | 94 +++++++++++++++++++
 2 files changed, 108 insertions(+), 2 deletions(-)

diff --git a/aries-site/src/examples/components/tag/TagSimple.js b/aries-site/src/examples/components/tag/TagSimple.js
index 2e5b2887f..3f5d01eac 100644
--- a/aries-site/src/examples/components/tag/TagSimple.js
+++ b/aries-site/src/examples/components/tag/TagSimple.js
@@ -1,4 +1,16 @@
 import React from 'react';
-import { Tag } from 'grommet';
+import { Box, Tag } from 'grommet';
 
-export const TagSimple = () => <Tag name="Location" value="San Jose" />;
+export const TagSimple = () => (
+  <Box gap="small">
+    {['xsmall', 'small', 'medium', 'large', 'xlarge'].map(size => (
+      <Tag
+        alignSelf="start"
+        name="Location"
+        value="San Jose"
+        size={size}
+        onRemove={() => {}}
+      />
+    ))}
+  </Box>
+);
diff --git a/aries-site/src/themes/aries.js b/aries-site/src/themes/aries.js
index 1dbcc84fb..96468b914 100644
--- a/aries-site/src/themes/aries.js
+++ b/aries-site/src/themes/aries.js
@@ -1,6 +1,7 @@
 import { hpe, hpePop } from 'grommet-theme-hpe';
 import { deepMerge } from 'grommet/utils';
 import { Info } from 'grommet-icons';
+import { Close } from 'grommet-icons/icons/Close';
 
 export const aries = deepMerge(hpe, {
   defaultMode: 'dark',
@@ -11,6 +12,99 @@ export const aries = deepMerge(hpe, {
     // any Box props
     gap: 'small',
   },
+  button: {
+    size: {
+      xsmall: {
+        border: {
+          radius: '2em',
+        },
+        iconOnly: {
+          pad: '5px',
+        },
+      },
+    },
+  },
+  icon: {
+    size: {
+      xsmall: '14px',
+    },
+  },
+  tag: {
+    icons: {
+      remove: Close,
+    },
+    remove: {
+      kind: 'default',
+    },
+    size: {
+      xsmall: {
+        icon: {
+          size: undefined,
+        },
+        remove: {
+          size: 'xsmall',
+          margin: {
+            right: 'none',
+            left: '-5px', // shifting for button padding
+            top: '-1px', // account for border
+            bottom: '-1px', // account for border
+          },
+        },
+      },
+      small: {
+        icon: {
+          size: undefined,
+        },
+        remove: {
+          size: 'xsmall',
+          margin: {
+            right: '2px',
+            left: '-5px', // shifting for button padding
+          },
+        },
+      },
+      medium: {
+        icon: {
+          size: undefined,
+        },
+        remove: {
+          size: 'small',
+          margin: {
+            right: 'xxsmall',
+            left: '-7px', // shifting for button padding
+          },
+        },
+      },
+      large: {
+        icon: {
+          size: undefined,
+        },
+        remove: {
+          size: 'medium',
+          margin: {
+            right: '2px',
+            left: '-9px', // shifting for button padding
+          },
+        },
+      },
+      xlarge: {
+        icon: {
+          size: undefined,
+        },
+        pad: {
+          vertical: '21px',
+          horizontal: 'medium',
+        },
+        remove: {
+          size: 'large',
+          margin: {
+            right: 'xsmall',
+            left: '-13px', // shifting for button padding
+          },
+        },
+      },
+    },
+  },
   feedback: {
     closeButton: {
       a11yTitle: `You are in a dialog containing a form to submit feedback.