From d43019cd42d6a7fd6176c82bbd7f5d1d4c60192d Mon Sep 17 00:00:00 2001
From: taysea <taylor.seamans@yahoo.com>
Date: Wed, 23 Oct 2024 15:51:03 -0700
Subject: [PATCH 1/2] =?UTF-8?q?Select=20=E2=80=94=20Add=20theme.select.cle?=
 =?UTF-8?q?ar.container.hover?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/components/Select/SelectContainer.js   |  13 +-
 .../Select/__tests__/Select-test.js           |  52 ++
 .../__snapshots__/Select-test.js.snap         | 637 ++++++++++++++++++
 src/js/themes/base.d.ts                       |   2 +-
 src/js/themes/base.js                         |   3 +
 5 files changed, 703 insertions(+), 4 deletions(-)

diff --git a/src/js/components/Select/SelectContainer.js b/src/js/components/Select/SelectContainer.js
index fa528650e0b..a55ba1382fe 100644
--- a/src/js/components/Select/SelectContainer.js
+++ b/src/js/components/Select/SelectContainer.js
@@ -51,12 +51,19 @@ const ClearButton = forwardRef(
         ref={ref}
         onClick={onClear}
         focusIndicator={false}
+        plain
         {...passThemeFlag}
         {...rest}
       >
-        <Box {...theme.select.clear.container} align={align}>
-          <Text {...theme.select.clear.text}>{buttonLabel}</Text>
-        </Box>
+        {({ hover }) => (
+          <Box
+            {...theme.select.clear.container}
+            {...(hover ? theme.select.clear?.container?.hover : {})}
+            align={align}
+          >
+            <Text {...theme.select.clear.text}>{buttonLabel}</Text>
+          </Box>
+        )}
       </StyledButton>
     );
   },
diff --git a/src/js/components/Select/__tests__/Select-test.js b/src/js/components/Select/__tests__/Select-test.js
index 572e4d19934..850007a03d3 100644
--- a/src/js/components/Select/__tests__/Select-test.js
+++ b/src/js/components/Select/__tests__/Select-test.js
@@ -1763,6 +1763,58 @@ describe('Select', () => {
     expect(onChange.mock.calls[0][0].value.type).toBe(Box);
   });
 
+  test('renders custom clear selection styling', () => {
+    jest.useFakeTimers();
+    const customTheme = {
+      select: {
+        clear: {
+          container: {
+            pad: {
+              vertical: '6px',
+              horizontal: '12px',
+            },
+            background: undefined,
+            hover: {
+              background: 'blue',
+            },
+          }, // any box props
+          text: {
+            color: 'text-strong',
+            weight: 600,
+          }, // any text props
+        },
+      },
+    };
+
+    const { asFragment, getByRole, getByPlaceholderText } = render(
+      <Grommet theme={customTheme}>
+        <Select
+          data-testid="test-select-style-open"
+          id="test-clear-selection"
+          options={['morning', 'afternoon', 'evening']}
+          placeholder="Select time"
+          value="afternoon"
+          clear
+        />
+      </Grommet>,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+
+    fireEvent.click(getByPlaceholderText('Select time'));
+    act(() => {
+      jest.advanceTimersByTime(100);
+    });
+
+    const clearButton = getByRole('button', { name: /Clear selection/ });
+    expect(clearButton).toBeInTheDocument();
+    fireEvent.mouseOver(clearButton);
+    act(() => {
+      jest.advanceTimersByTime(200);
+    });
+    expectPortal('test-clear-selection__drop').toMatchSnapshot();
+  });
+
   window.scrollTo.mockRestore();
   window.HTMLElement.prototype.scrollIntoView.mockRestore();
 });
diff --git a/src/js/components/Select/__tests__/__snapshots__/Select-test.js.snap b/src/js/components/Select/__tests__/__snapshots__/Select-test.js.snap
index 7ce10cee6b0..b2812147b8d 100644
--- a/src/js/components/Select/__tests__/__snapshots__/Select-test.js.snap
+++ b/src/js/components/Select/__tests__/__snapshots__/Select-test.js.snap
@@ -12028,6 +12028,643 @@ exports[`Select prop: onOpen 5`] = `
 </div>
 `;
 
+exports[`Select renders custom clear selection styling 1`] = `
+<DocumentFragment>
+  .c9 {
+  display: inline-block;
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  fill: #7D4CDB;
+  stroke: #7D4CDB;
+}
+
+.c9 g {
+  fill: inherit;
+  stroke: inherit;
+}
+
+.c9 *:not([stroke])[fill='none'] {
+  stroke-width: 0;
+}
+
+.c9 *[stroke*='#'],
+.c9 *[STROKE*='#'] {
+  stroke: inherit;
+  fill: none;
+}
+
+.c9 *[fill-rule],
+.c9 *[FILL-RULE],
+.c9 *[fill*='#'],
+.c9 *[FILL*='#'] {
+  fill: inherit;
+  stroke: none;
+}
+
+.c3 {
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.c4 {
+  display: flex;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: row;
+  flex: 1 1;
+  flex-basis: auto;
+}
+
+.c8 {
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  margin-left: 12px;
+  margin-right: 12px;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  flex: 0 0 auto;
+}
+
+.c1 {
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+  margin: 0;
+  background: transparent;
+  overflow: visible;
+  text-transform: none;
+  color: inherit;
+  outline: none;
+  border: none;
+  padding: 0;
+  text-align: inherit;
+}
+
+.c1:focus {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c1:focus >circle,
+.c1:focus >ellipse,
+.c1:focus >line,
+.c1:focus >path,
+.c1:focus >polygon,
+.c1:focus >polyline,
+.c1:focus >rect {
+  outline: none;
+  box-shadow: 0 0 2px 2px #6FFFB0;
+}
+
+.c1:focus ::-moz-focus-inner {
+  border: 0;
+}
+
+.c1:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c1:focus:not(:focus-visible) >circle,
+.c1:focus:not(:focus-visible) >ellipse,
+.c1:focus:not(:focus-visible) >line,
+.c1:focus:not(:focus-visible) >path,
+.c1:focus:not(:focus-visible) >polygon,
+.c1:focus:not(:focus-visible) >polyline,
+.c1:focus:not(:focus-visible) >rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c1:focus:not(:focus-visible) ::-moz-focus-inner {
+  border: 0;
+}
+
+.c6 {
+  box-sizing: border-box;
+  font-size: inherit;
+  font-family: inherit;
+  border: none;
+  -webkit-appearance: none;
+  background: transparent;
+  color: inherit;
+  width: 100%;
+  padding: 11px;
+  font-weight: 600;
+  margin: 0;
+  border: 1px solid rgba(0, 0, 0, 0.33);
+  border-radius: 4px;
+  border: none;
+  outline: none;
+  border: none;
+}
+
+.c6::-webkit-input-placeholder {
+  color: #AAAAAA;
+}
+
+.c6::-moz-placeholder {
+  color: #AAAAAA;
+}
+
+.c6:-ms-input-placeholder {
+  color: #AAAAAA;
+}
+
+.c6 ::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+.c6::-moz-focus-inner {
+  border: none;
+  outline: none;
+}
+
+.c6:-moz-placeholder,
+.c6::-moz-placeholder {
+  opacity: 1;
+}
+
+.c5 {
+  position: relative;
+  width: 100%;
+}
+
+.c7 {
+  cursor: pointer;
+}
+
+.c2 {
+  border: 1px solid rgba(0, 0, 0, 0.33);
+  border-radius: 4px;
+}
+
+.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;
+}
+
+@media only screen and (max-width: 768px) {
+  .c8 {
+    margin-left: 6px;
+    margin-right: 6px;
+  }
+}
+
+<div
+    class="c0"
+  >
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      aria-label="Select time; Selected: afternoon"
+      class="c1 c2"
+      id="test-clear-selection"
+      type="button"
+    >
+      <div
+        class="c3"
+      >
+        <div
+          class="c4"
+        >
+          <div
+            class="c5"
+          >
+            <input
+              autocomplete="off"
+              class="c6 c7"
+              data-testid="test-select-style-open"
+              id="test-clear-selection__input"
+              placeholder="Select time"
+              readonly=""
+              tabindex="-1"
+              type="text"
+              value="afternoon"
+            />
+          </div>
+        </div>
+        <div
+          class="c8"
+          style="min-width: auto;"
+        >
+          <svg
+            aria-label="FormDown"
+            class="c9"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="m18 9-6 6-6-6"
+              fill="none"
+              stroke="#000"
+              stroke-width="2"
+            />
+          </svg>
+        </div>
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Select renders custom clear selection styling 2`] = `
+.c0 {
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: auto;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.20);
+}
+
+.c2 {
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+}
+
+.c11 {
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  align-items: flex-start;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  padding: 12px;
+}
+
+.c15 {
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  height: 0px;
+  flex: 0 0 auto;
+}
+
+.c6 {
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  align-items: flex-start;
+  background: blue;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+.c1 {
+  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;
+  border-radius: 0px;
+  position: fixed;
+  z-index: 20;
+  outline: none;
+  background-color: #FFFFFF;
+  color: #444444;
+  opacity: 0;
+  transform-origin: top left;
+  animation: kPQHBD 0.1s forwards;
+  animation-delay: 0.01s;
+}
+
+.c7 {
+  font-size: 18px;
+  line-height: 24px;
+  color: #000000;
+  font-weight: 600;
+}
+
+.c12 {
+  margin: 0px;
+  font-size: 18px;
+  line-height: 24px;
+}
+
+.c9 {
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+  margin: 0;
+  background: transparent;
+  overflow: visible;
+  text-transform: none;
+  color: inherit;
+  outline: none;
+  border: none;
+  padding: 0;
+  text-align: inherit;
+}
+
+.c9:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c9:focus:not(:focus-visible) >circle,
+.c9:focus:not(:focus-visible) >ellipse,
+.c9:focus:not(:focus-visible) >line,
+.c9:focus:not(:focus-visible) >path,
+.c9:focus:not(:focus-visible) >polygon,
+.c9:focus:not(:focus-visible) >polyline,
+.c9:focus:not(:focus-visible) >rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c9:focus:not(:focus-visible) ::-moz-focus-inner {
+  border: 0;
+}
+
+.c13 {
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+  margin: 0;
+  background: transparent;
+  overflow: visible;
+  text-transform: none;
+  color: inherit;
+  outline: none;
+  border: none;
+  padding: 0;
+  text-align: inherit;
+}
+
+.c13:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c13:focus:not(:focus-visible) >circle,
+.c13:focus:not(:focus-visible) >ellipse,
+.c13:focus:not(:focus-visible) >line,
+.c13:focus:not(:focus-visible) >path,
+.c13:focus:not(:focus-visible) >polygon,
+.c13:focus:not(:focus-visible) >polyline,
+.c13:focus:not(:focus-visible) >rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c13:focus:not(:focus-visible) ::-moz-focus-inner {
+  border: 0;
+}
+
+.c4 {
+  display: inline-block;
+  box-sizing: border-box;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+  margin: 0;
+  background: transparent;
+  overflow: visible;
+  text-transform: none;
+  color: inherit;
+  outline: none;
+  border: none;
+  padding: 0;
+  text-align: inherit;
+  width: 100%;
+}
+
+.c4:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+.c4:focus:not(:focus-visible) >circle,
+.c4:focus:not(:focus-visible) >ellipse,
+.c4:focus:not(:focus-visible) >line,
+.c4:focus:not(:focus-visible) >path,
+.c4:focus:not(:focus-visible) >polygon,
+.c4:focus:not(:focus-visible) >polyline,
+.c4:focus:not(:focus-visible) >rect {
+  outline: none;
+  box-shadow: none;
+}
+
+.c4:focus:not(:focus-visible) ::-moz-focus-inner {
+  border: 0;
+}
+
+.c3 {
+  max-height: inherit;
+}
+
+.c8 {
+  position: relative;
+  scroll-behavior: smooth;
+  overflow: auto;
+  outline: none;
+}
+
+.c10 {
+  display: block;
+  width: 100%;
+}
+
+.c14 {
+  background-color: #7D4CDB;
+  color: #FFFFFF;
+  display: block;
+  width: 100%;
+}
+
+.c5:focus {
+  background-color: rgba(221, 221, 221, 0.4);
+  color: #000000;
+}
+
+@media only screen and (max-width: 768px) {
+
+}
+
+@media only screen and (max-width: 768px) {
+
+}
+
+@media only screen and (max-width: 768px) {
+
+}
+
+@media only screen and (max-width: 768px) {
+  .c11 {
+    padding: 6px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .c6 {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .c6 {
+    padding-top: 6px;
+    padding-bottom: 6px;
+  }
+}
+
+@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
+  .c1 {
+    display: flex;
+    align-items: stretch;
+  }
+}
+
+@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {
+  .c3 {
+    width: 100%;
+  }
+}
+
+<div
+  class="c0 c1"
+  data-g-portal-id="0"
+  id="test-clear-selection__drop"
+  style="left: 0px; width: 0.1px; top: 0px; max-height: 768px;"
+  tabindex="-1"
+>
+  <div
+    class="c2 c3"
+    id="test-clear-selection__select-drop"
+  >
+    <button
+      aria-label="Clear selection. Or, press down arrow to move to select options"
+      class="c4 c5"
+      type="button"
+    >
+      <div
+        class="c6"
+      >
+        <span
+          class="c7"
+        >
+          Clear selection
+        </span>
+      </div>
+    </button>
+    <div
+      class="c8"
+      role="listbox"
+      tabindex="-1"
+    >
+      <button
+        aria-posinset="1"
+        aria-selected="false"
+        aria-setsize="3"
+        class="c9 c10"
+        role="option"
+        tabindex="-1"
+        type="button"
+      >
+        <div
+          class="c11"
+        >
+          <span
+            class="c12"
+          >
+            morning
+          </span>
+        </div>
+      </button>
+      <button
+        aria-posinset="2"
+        aria-selected="true"
+        aria-setsize="3"
+        class="c13 c14"
+        role="option"
+        tabindex="0"
+        type="button"
+      >
+        <div
+          class="c11"
+        >
+          <span
+            class="c12"
+          >
+            afternoon
+          </span>
+        </div>
+      </button>
+      <button
+        aria-posinset="3"
+        aria-selected="false"
+        aria-setsize="3"
+        class="c9 c10"
+        role="option"
+        tabindex="-1"
+        type="button"
+      >
+        <div
+          class="c11"
+        >
+          <span
+            class="c12"
+          >
+            evening
+          </span>
+        </div>
+      </button>
+      <div
+        class="c15"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Select renders custom clear selection styling 3`] = `
+"@media only screen and (max-width: 768px) {
+  .iWRaaC {
+    margin-left: 6px;
+    margin-right: 6px;
+  }
+}"
+`;
+
 exports[`Select renders custom icon 1`] = `
 .c9 {
   display: inline-block;
diff --git a/src/js/themes/base.d.ts b/src/js/themes/base.d.ts
index 17dd84ecfe8..c095a21327e 100644
--- a/src/js/themes/base.d.ts
+++ b/src/js/themes/base.d.ts
@@ -1449,7 +1449,7 @@ export interface ThemeType {
   select?: {
     background?: BackgroundType;
     clear?: {
-      container?: BoxProps;
+      container?: BoxProps & { hover?: BoxProps };
       text?: TextProps;
     };
     container?: {
diff --git a/src/js/themes/base.js b/src/js/themes/base.js
index da96ac5e52b..30233d43230 100644
--- a/src/js/themes/base.js
+++ b/src/js/themes/base.js
@@ -1686,6 +1686,9 @@ export const generate = (baseSpacing = 24, scale = 6) => {
         container: {
           pad: 'small',
           background: 'background-contrast',
+          // hover: {
+          //   // any box props
+          // },
         }, // any box props
         text: {
           color: 'text-weak',

From 8c971bee3a9af7db351817d030870ff43e7202fd Mon Sep 17 00:00:00 2001
From: taysea <taylor.seamans@yahoo.com>
Date: Thu, 24 Oct 2024 14:23:45 -0700
Subject: [PATCH 2/2] Avoid passing hover object to Box

---
 src/js/components/Select/SelectContainer.js | 22 ++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/js/components/Select/SelectContainer.js b/src/js/components/Select/SelectContainer.js
index a55ba1382fe..58743a2f331 100644
--- a/src/js/components/Select/SelectContainer.js
+++ b/src/js/components/Select/SelectContainer.js
@@ -55,15 +55,19 @@ const ClearButton = forwardRef(
         {...passThemeFlag}
         {...rest}
       >
-        {({ hover }) => (
-          <Box
-            {...theme.select.clear.container}
-            {...(hover ? theme.select.clear?.container?.hover : {})}
-            align={align}
-          >
-            <Text {...theme.select.clear.text}>{buttonLabel}</Text>
-          </Box>
-        )}
+        {({ hover }) => {
+          const boxProps = { ...theme.select.clear.container };
+          delete boxProps.hover; // avoid passing hover object to Box
+          return (
+            <Box
+              {...boxProps}
+              {...(hover ? theme.select.clear?.container?.hover : {})}
+              align={align}
+            >
+              <Text {...theme.select.clear.text}>{buttonLabel}</Text>
+            </Box>
+          );
+        }}
       </StyledButton>
     );
   },