add theme option for anchor icon (#7236)

* add theme option for anchor icon * update test * update test * update snapshot --------- Co-authored-by: Brittany Archibeque <brittanyarchibeque@Brittanys-MBP-2.home> Co-authored-by: Jessica Filben <54560994+jcfilben@users.noreply.github.com>
grommet · May 30, 2024 · 2d85526 · 2d85526
1 parent 98c6caf
commit 2d85526
Show file tree

Hide file tree

Showing 5 changed files with 328 additions and 2 deletions.
diff --git a/src/js/components/Anchor/Anchor.js b/src/js/components/Anchor/Anchor.js
@@ -72,6 +72,7 @@ const Anchor = forwardRef(
       coloredIcon = cloneElement(icon, {
         color: normalizeColor(
           color ||
+            theme.anchor?.icon?.color ||
             theme.anchor?.size?.[sizeProp || size]?.color ||
             theme.anchor.color,
           theme,

diff --git a/src/js/components/Anchor/__tests__/Anchor-test.tsx b/src/js/components/Anchor/__tests__/Anchor-test.tsx
@@ -278,6 +278,38 @@ describe('Anchor', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('renders specific icon color', () => {
+    const theme = {
+      anchor: {
+        icon: {
+          color: 'accent-2',
+        },
+      },
+    };
+
+    const { asFragment } = render(
+      <>
+        <Grommet theme={theme}>
+          <Anchor
+            label="Color prop on icon"
+            icon={<LinkNext color="brand" />}
+          />
+          <Anchor
+            label="Anchor with color prop"
+            color="brand"
+            icon={<LinkNext />}
+          />
+          <Anchor label="Anchor using theme" icon={<LinkNext />} />
+        </Grommet>
+        <Grommet>
+          <Anchor label="Anchor color" icon={<LinkNext />} />
+        </Grommet>
+      </>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('matches icon size to size prop when theme.icon.matchSize is true', () => {
     const theme = {
       icon: {

diff --git a/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.tsx.snap b/src/js/components/Anchor/__tests__/__snapshots__/Anchor-test.tsx.snap
@@ -1310,6 +1310,293 @@ exports[`Anchor renders size specific theming 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Anchor renders specific icon color 1`] = `
+<DocumentFragment>
+  .c3 {
+  display: inline-block;
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  fill: #7D4CDB;
+  stroke: #7D4CDB;
+}
+
+.c3 g {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.c3 *:not([stroke])[fill='none'] {
+  stroke-width: 0;
+}
+
+.c3 *[stroke*='#'],
+.c3 *[STROKE*='#'] {
+  stroke: inherit;
+  fill: none;
+}
+
+.c3 *[fill-rule],
+.c3 *[FILL-RULE],
+.c3 *[fill*='#'],
+.c3 *[FILL*='#'] {
+  fill: inherit;
+  stroke: none;
+}
+
+.c5 {
+  display: inline-block;
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  fill: #FD6FFF;
+  stroke: #FD6FFF;
+}
+
+.c5 g {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.c5 *:not([stroke])[fill='none'] {
+  stroke-width: 0;
+}
+
+.c5 *[stroke*='#'],
+.c5 *[STROKE*='#'] {
+  stroke: inherit;
+  fill: none;
+}
+
+.c5 *[fill-rule],
+.c5 *[FILL-RULE],
+.c5 *[fill*='#'],
+.c5 *[FILL*='#'] {
+  fill: inherit;
+  stroke: none;
+}
+
+.c0 {
+  font-size: 18px;
+  line-height: 24px;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.c2 {
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: row;
+}
+
+.c4 {
+  flex: 0 0 auto;
+  align-self: stretch;
+  width: 12px;
+}
+
+.c1 {
+  box-sizing: border-box;
+  display: inline-flex;
+  font-size: inherit;
+  line-height: inherit;
+  color: #7D4CDB;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c1:hover {
+  text-decoration: underline;
+}
+
+<div
+    class="c0"
+  >
+    <a
+      class="c1"
+    >
+      <span
+        class="c2"
+      >
+        <svg
+          aria-label="LinkNext"
+          class="c3"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M2 12h20m-9-9 9 9-9 9"
+            fill="none"
+            stroke="#000"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="c4"
+        />
+        Color prop on icon
+      </span>
+    </a>
+    <a
+      class="c1"
+    >
+      <span
+        class="c2"
+      >
+        <svg
+          aria-label="LinkNext"
+          class="c3"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M2 12h20m-9-9 9 9-9 9"
+            fill="none"
+            stroke="#000"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="c4"
+        />
+        Anchor with color prop
+      </span>
+    </a>
+    <a
+      class="c1"
+    >
+      <span
+        class="c2"
+      >
+        <svg
+          aria-label="LinkNext"
+          class="c5"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M2 12h20m-9-9 9 9-9 9"
+            fill="none"
+            stroke="#000"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="c4"
+        />
+        Anchor using theme
+      </span>
+    </a>
+  </div>
+  .c3 {
+  display: inline-block;
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  fill: #7D4CDB;
+  stroke: #7D4CDB;
+}
+
+.c3 g {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.c3 *:not([stroke])[fill='none'] {
+  stroke-width: 0;
+}
+
+.c3 *[stroke*='#'],
+.c3 *[STROKE*='#'] {
+  stroke: inherit;
+  fill: none;
+}
+
+.c3 *[fill-rule],
+.c3 *[FILL-RULE],
+.c3 *[fill*='#'],
+.c3 *[FILL*='#'] {
+  fill: inherit;
+  stroke: none;
+}
+
+.c0 {
+  font-size: 18px;
+  line-height: 24px;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.c2 {
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: row;
+}
+
+.c4 {
+  flex: 0 0 auto;
+  align-self: stretch;
+  width: 12px;
+}
+
+.c1 {
+  box-sizing: border-box;
+  display: inline-flex;
+  font-size: inherit;
+  line-height: inherit;
+  color: #7D4CDB;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c1:hover {
+  text-decoration: underline;
+}
+
+<div
+    class="c0"
+  >
+    <a
+      class="c1"
+    >
+      <span
+        class="c2"
+      >
+        <svg
+          aria-label="LinkNext"
+          class="c3"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M2 12h20m-9-9 9 9-9 9"
+            fill="none"
+            stroke="#000"
+            stroke-width="2"
+          />
+        </svg>
+        <span
+          class="c4"
+        />
+        Anchor color
+      </span>
+    </a>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Anchor renders tag 1`] = `
 .c0 {
   font-size: 18px;

diff --git a/src/js/themes/base.d.ts b/src/js/themes/base.d.ts
@@ -499,6 +499,9 @@ export interface ThemeType {
       extend?: ExtendType<PropsOf<typeof Anchor>>;
       textDecoration?: string;
     };
+    icon?: {
+      color?: ColorType;
+    };
     textDecoration?: string;
     size?: {
       medium?: {

diff --git a/src/js/themes/base.js b/src/js/themes/base.js
@@ -377,8 +377,6 @@ export const generate = (baseSpacing = 24, scale = 6) => {
       },
     },
     anchor: {
-      textDecoration: 'none',
-      fontWeight: 600,
       color: {
         dark: 'accent-1',
         light: 'brand',
@@ -389,6 +387,11 @@ export const generate = (baseSpacing = 24, scale = 6) => {
         // fontWeight: undefined,
         // extend: undefined,
       },
+      // icon: {
+      //   color: undefined
+      // },
+      textDecoration: 'none',
+      fontWeight: 600,
       // size: {
       //   medium: {
       //     color: undefined,