ref(styles) deprecate space export and add space to theme

getsentry · Aug 7, 2024 · 6a0bb31 · 6a0bb31
1 parent c661185
commit 6a0bb31
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/static/app/styles/space.tsx b/static/app/styles/space.tsx
@@ -11,8 +11,13 @@ const SPACES = {
 
 export type ValidSize = keyof typeof SPACES;
 
-function space<S extends ValidSize>(size: S): (typeof SPACES)[S] {
+/**
+ * @deprecated You can now access space directly inside styled template literals via p => p.theme.space(value) or inside your component body via useTheme().space
+ */
+export function space<S extends ValidSize>(size: S): (typeof SPACES)[S] {
  return SPACES[size];
 }
 
-export {space};
+export function themeSpace<S extends ValidSize>(size: S): (typeof SPACES)[S] {
+ return SPACES[size];
+}
diff --git a/static/app/utils/theme.tsx b/static/app/utils/theme.tsx
@@ -3,6 +3,7 @@ import color from 'color';
 
 import {DATA_CATEGORY_INFO} from 'sentry/constants';
 import {CHART_PALETTE} from 'sentry/constants/chartPalette';
+import {themeSpace} from 'sentry/styles/space';
 import {Outcome} from 'sentry/types';
 
 const lightColors = {
@@ -941,6 +942,7 @@ export const lightTheme = {
  ...darkColors,
  ...darkAliases,
  },
+ space: themeSpace,
  ...generateUtils(lightColors, lightAliases),
  alert: generateAlertTheme(lightColors, lightAliases),
  badge: generateBadgeTheme(lightColors),
@@ -969,6 +971,7 @@ export const darkTheme: Theme = {
  ...lightColors,
  ...lightAliases,
  },
+ space: themeSpace,
  ...generateUtils(darkColors, lightAliases),
  alert: generateAlertTheme(darkColors, darkAliases),
  badge: generateBadgeTheme(darkColors),