fix(react-icons): fix regression issue by adding missing `vertical-al…

…ign: middle` style property to `SVGIcon` component (#874) * fix(react-icons): fix regression issue by adding missing `vertical-align: middle` style property to `SVGIcon` component * test(react): update test snapshots * docs(playground): add `useCallback` to address `react-hooks/exhaustive-deps` issue in the Othello game * feat(react/search-input): add `display: flex` and `alignItems: center` CSS properties to vertically align SVG icons * test(react): update test snapshots
trendmicro-frontend · Jun 12, 2024 · 6a301aa · 6a301aa
1 parent 4d3e26a
commit 6a301aa
Show file tree

Hide file tree

Showing 10 changed files with 33 additions and 1 deletion.
diff --git a/packages/react-docs/pages/playground/othello/othello/index.js b/packages/react-docs/pages/playground/othello/othello/index.js
@@ -23,7 +23,9 @@ import { search } from './computer';
 const Othello = () => {
   const [turn, setTurn] = useState(BLACK_PIECE);
   const [cells, updateCells] = useState((new Array(BOARD_SIZE**2)).fill(EMPTY_PIECE));
-  const nextTurn = () => setTurn(turn === WHITE_PIECE ? BLACK_PIECE : WHITE_PIECE);
+  const nextTurn = useCallback(() => {
+    setTurn(turn === WHITE_PIECE ? BLACK_PIECE : WHITE_PIECE);
+  }, [turn]);
   const restart = useCallback(() => {
     const nextCells = (new Array(BOARD_SIZE**2)).fill(EMPTY_PIECE);
     nextCells[BOARD_SIZE * 3 + 3] = WHITE_PIECE;

diff --git a/packages/react-icons/src/SVGIcon.js b/packages/react-icons/src/SVGIcon.js
@@ -21,6 +21,7 @@ const SVGIcon = forwardRef((
     flexShrink: 0,
     width: size,
     height: size,
+    verticalAlign: 'middle',
   };
   const more = {};
 

diff --git a/packages/react/src/badge/__tests__/__snapshots__/Badge.test.js.snap b/packages/react/src/badge/__tests__/__snapshots__/Badge.test.js.snap
@@ -77,6 +77,7 @@ exports[`Badge should render correctly 1`] = `
   flex-shrink: 0;
   width: var(--tonic-sizes-4x);
   height: var(--tonic-sizes-4x);
+  vertical-align: middle;
 }
 
 .emotion-10 {

diff --git a/packages/react/src/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/react/src/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -126,6 +126,7 @@ input[type="checkbox"]:checked:disabled+.emotion-4 {
   flex-shrink: 0;
   width: .75rem;
   height: .75rem;
+  vertical-align: middle;
 }
 
 .emotion-8 {
@@ -237,6 +238,7 @@ input[type="checkbox"]:checked:disabled+.emotion-14 {
   flex-shrink: 0;
   width: 1rem;
   height: 1rem;
+  vertical-align: middle;
 }
 
 .emotion-24 {
@@ -339,6 +341,7 @@ input[type="checkbox"]:checked:disabled+.emotion-24 {
   flex-shrink: 0;
   width: 1.5rem;
   height: 1.5rem;
+  vertical-align: middle;
 }
 
 .emotion-44 {

diff --git a/packages/react/src/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/packages/react/src/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -152,6 +152,7 @@ exports[`Drawer should render correctly 1`] = `
   flex-shrink: 0;
   width: var(--tonic-sizes-4x);
   height: var(--tonic-sizes-4x);
+  vertical-align: middle;
 }
 
 .emotion-16 {

diff --git a/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap b/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap
@@ -134,6 +134,7 @@ exports[`Menu should render correctly 1`] = `
   flex-shrink: 0;
   width: var(--tonic-sizes-4x);
   height: var(--tonic-sizes-4x);
+  vertical-align: middle;
 }
 
 .emotion-10 {

diff --git a/packages/react/src/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/react/src/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -152,6 +152,7 @@ exports[`Modal should render correctly 1`] = `
   flex-shrink: 0;
   width: var(--tonic-sizes-4x);
   height: var(--tonic-sizes-4x);
+  vertical-align: middle;
 }
 
 .emotion-16 {

diff --git a/packages/react/src/search-input/__tests__/__snapshots__/SearchInput.test.js.snap b/packages/react/src/search-input/__tests__/__snapshots__/SearchInput.test.js.snap
@@ -94,6 +94,14 @@ exports[`SearchInput should render correctly 1`] = `
 }
 
 .emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding-left: calc(.75rem - .0625rem);
   padding-right: var(--tonic-space-2x);
 }
@@ -108,6 +116,7 @@ exports[`SearchInput should render correctly 1`] = `
   flex-shrink: 0;
   width: var(--tonic-sizes-4x);
   height: var(--tonic-sizes-4x);
+  vertical-align: middle;
 }
 
 .emotion-8 {
@@ -298,6 +307,14 @@ exports[`SearchInput should render correctly 1`] = `
 }
 
 .emotion-24 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
   padding-left: var(--tonic-space-3x);
   padding-right: var(--tonic-space-2x);
 }

diff --git a/packages/react/src/search-input/styles.js b/packages/react/src/search-input/styles.js
@@ -109,6 +109,8 @@ const useSearchInputLoadingIconStyle = ({ variant }) => {
     : '2x';
 
   return {
+    display: 'flex',
+    alignItems: 'center',
     pl,
     pr,
   };
@@ -122,6 +124,8 @@ const useSearchInputSearchIconStyle = ({ variant }) => {
   const pr = '2x';
 
   return {
+    display: 'flex',
+    alignItems: 'center',
     pl,
     pr,
   };

diff --git a/packages/react/src/tree/__tests__/__snapshots__/Tree.test.js.snap b/packages/react/src/tree/__tests__/__snapshots__/Tree.test.js.snap
@@ -113,6 +113,7 @@ exports[`Tree should render correctly 1`] = `
   flex-shrink: 0;
   width: var(--tonic-sizes-4x);
   height: var(--tonic-sizes-4x);
+  vertical-align: middle;
 }
 
 .emotion-14 {