[PR discussion] Remove useEuiNumberFormat

elastic · Mar 6, 2024 · f9242a8 · f9242a8
1 parent 04da2e6
commit f9242a8
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/src-docs/src/views/theme/typography/_text_numbers.tsx b/src-docs/src/views/theme/typography/_text_numbers.tsx
@@ -7,12 +7,14 @@ import {
   EuiTextAlign,
   EuiFlexGrid,
   EuiFlexItem,
-  useEuiNumberFormat,
+  useEuiTheme,
+  euiNumberFormat,
 } from '../../../../../src';
 import { css } from '@emotion/react';
 import { ThemeExample } from '../_components/_theme_example';
 
 export default () => {
+  const euiTheme = useEuiTheme();
   const themeContext = useContext(ThemeContext);
   const currentLanguage = themeContext.themeLanguage;
   const showSass = currentLanguage.includes('sass');
@@ -22,8 +24,8 @@ export default () => {
       {/* Mixin */}
       {!showSass ? (
         <ThemeExample
-          title={<code>useEuiNumberFormat()</code>}
-          type="hook"
+          title={<code>euiNumberFormat(euiTheme)</code>}
+          type="function"
           description={
             <p>
               Applies{' '}
@@ -49,7 +51,7 @@ export default () => {
                 <EuiFlexItem>
                   <p
                     css={css`
-                      ${useEuiNumberFormat()}
+                      ${euiNumberFormat(euiTheme)}
                     `}
                   >
                     <strong>With function</strong>
@@ -62,7 +64,7 @@ export default () => {
               </EuiFlexGrid>
             </EuiTextAlign>
           }
-          snippet={'${useEuiNumberFormat()}'}
+          snippet={'${euiNumberFormat(useEuiTheme())}'}
           snippetLanguage="emotion"
         />
       ) : (
@@ -84,7 +86,7 @@ export default () => {
         type="className"
         description={
           <p>
-            Applies the <EuiCode>useEuiNumberFormat()</EuiCode> styles as an
+            Applies the <EuiCode>euiNumberFormat()</EuiCode> styles as an
             overriding CSS utility class.
           </p>
         }

diff --git a/src/global_styling/mixins/_typography.test.ts b/src/global_styling/mixins/_typography.test.ts
@@ -8,12 +8,13 @@
 
 import { renderHook } from '@testing-library/react';
 
+import { useEuiTheme } from '../../services';
 import { EuiThemeFontScales, EuiThemeFontUnits } from '../variables/typography';
 import {
   useEuiFontSize,
   euiTextBreakWord,
   euiTextTruncate,
-  useEuiNumberFormat,
+  euiNumberFormat,
 } from './_typography';
 
 describe('euiFontSize', () => {
@@ -66,7 +67,7 @@ describe('euiTextTruncate', () => {
 describe('euiNumberFormat', () => {
   it('returns a string of CSS text', () => {
     expect(
-      renderHook(() => useEuiNumberFormat()).result.current
+      renderHook(() => euiNumberFormat(useEuiTheme())).result.current
     ).toMatchSnapshot();
   });
 });
diff --git a/src/global_styling/mixins/_typography.ts b/src/global_styling/mixins/_typography.ts
@@ -93,5 +93,3 @@ export const euiTextTruncate = (
 export const euiNumberFormat = ({ euiTheme }: UseEuiTheme) => `
   font-feature-settings: ${euiTheme.font.featureSettings}, 'tnum' 1;
 `;
-export const useEuiNumberFormat = (): string =>
-  useEuiMemoizedStyles<any>(euiNumberFormat);