deprecation notice (#18859)

ui/components/component-library/text/text.stories.tsx

@@ -4,12 +4,12 @@ import {
   DISPLAY,
   BackgroundColor,
   BorderColor,
-  FONT_WEIGHT,
+  FontWeight,
-  FONT_STYLE,
+  FontStyle,
   TextColor,
-  TEXT_ALIGN,
+  TextAlign,
-  OVERFLOW_WRAP,
+  OverflowWrap,
-  TEXT_TRANSFORM,
+  TextTransform,
   FRACTIONS,
   FLEX_DIRECTION,
   TextVariant,
@@ -113,9 +113,9 @@ export const ColorStory: ComponentStory<typeof Text> = (args) => {
 };
 ColorStory.storyName = 'Color';
 
-export const FontWeight: ComponentStory<typeof Text> = (args) => (
+export const FontWeightStory: ComponentStory<typeof Text> = (args) => (
   <>
-    {Object.values(FONT_WEIGHT).map((weight) => (
+    {Object.values(FontWeight).map((weight) => (
       <Text {...args} fontWeight={weight} key={weight}>
         {weight}
       </Text>
@@ -123,9 +123,11 @@ export const FontWeight: ComponentStory<typeof Text> = (args) => (
   </>
 );
 
-export const FontStyle: ComponentStory<typeof Text> = (args) => (
+FontWeightStory.storyName = 'Font Weight';
+
+export const FontStyleStory: ComponentStory<typeof Text> = (args) => (
   <>
-    {Object.values(FONT_STYLE).map((style) => (
+    {Object.values(FontStyle).map((style) => (
       <Text {...args} fontStyle={style} key={style}>
         {style}
       </Text>
@@ -133,9 +135,11 @@ export const FontStyle: ComponentStory<typeof Text> = (args) => (
   </>
 );
 
-export const TextTransform: ComponentStory<typeof Text> = (args) => (
+FontStyleStory.storyName = 'Font Style';
+
+export const TextTransformStory: ComponentStory<typeof Text> = (args) => (
   <>
-    {Object.values(TEXT_TRANSFORM).map((transform) => (
+    {Object.values(TextTransform).map((transform) => (
       <Text {...args} textTransform={transform} key={transform}>
         {transform}
       </Text>
@@ -143,9 +147,11 @@ export const TextTransform: ComponentStory<typeof Text> = (args) => (
   </>
 );
 
-export const TextAlign: ComponentStory<typeof Text> = (args) => (
+TextTransformStory.storyName = 'Text Transform';
+
+export const TextAlignStory: ComponentStory<typeof Text> = (args) => (
   <>
-    {Object.values(TEXT_ALIGN).map((align) => (
+    {Object.values(TextAlign).map((align) => (
       <Text {...args} textAlign={align} key={align}>
         {align}
       </Text>
@@ -153,21 +159,25 @@ export const TextAlign: ComponentStory<typeof Text> = (args) => (
   </>
 );
 
-export const OverflowWrap: ComponentStory<typeof Text> = (args) => (
+TextAlignStory.storyName = 'Text Align';
+
+export const OverflowWrapStory: ComponentStory<typeof Text> = (args) => (
   <Box
     borderColor={BorderColor.warningDefault}
     display={DISPLAY.BLOCK}
     style={{ width: 200 }}
   >
-    <Text {...args} overflowWrap={OVERFLOW_WRAP.NORMAL}>
+    <Text {...args} overflowWrap={OverflowWrap.Normal}>
-      {OVERFLOW_WRAP.NORMAL}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
+      {OverflowWrap.Normal}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
     </Text>
-    <Text {...args} overflowWrap={OVERFLOW_WRAP.BREAK_WORD}>
+    <Text {...args} overflowWrap={OverflowWrap.BreakWord}>
-      {OVERFLOW_WRAP.BREAK_WORD}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
+      {OverflowWrap.BreakWord}: 0x39013f961c378f02c2b82a6e1d31e9812786fd9d
     </Text>
   </Box>
 );
 
+OverflowWrapStory.storyName = 'Overflow Wrap';
+
 export const Ellipsis: ComponentStory<typeof Text> = (args) => (
   <Box
     borderColor={BorderColor.primaryDefault}

ui/helpers/constants/design-system.ts

@@ -306,6 +306,11 @@ export enum TextAlign {
   Start = 'start',
 }
 
+/**
+ * @deprecated `TEXT_ALIGN` const has been deprecated in favour of the `TextAlign` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ *
+ * Help to replace `TEXT_ALIGN` with `TextAlign` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
+ */
 export const TEXT_ALIGN = {
   LEFT: 'left',
   CENTER: 'center',
@@ -324,6 +329,11 @@ export enum TextTransform {
   Capitalize = 'capitalize',
 }
 
+/**
+ * @deprecated `TEXT_TRANSFORM` const has been deprecated in favour of the `TextTransform` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ *
+ * Help to replace `TEXT_TRANSFORM` with `TextTransform` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
+ */
 export const TEXT_TRANSFORM = {
   UPPERCASE: 'uppercase',
   LOWERCASE: 'lowercase',
@@ -336,6 +346,11 @@ export enum FontWeight {
   Normal = 'normal',
 }
 
+/**
+ * @deprecated `FONT_WEIGHT` const has been deprecated in favour of the `FontWeight` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ *
+ * Help to replace `FONT_WEIGHT` with `FontWeight` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
+ */
 export const FONT_WEIGHT = {
   BOLD: 'bold',
   MEDIUM: 'medium',
@@ -348,6 +363,11 @@ export enum OverflowWrap {
   Normal = 'normal',
 }
 
+/**
+ * @deprecated `OVERFLOW_WRAP` const has been deprecated in favour of the `OverflowWrap` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ *
+ * Help to replace `OVERFLOW_WRAP` with `OverflowWrap` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
+ */
 export const OVERFLOW_WRAP = {
   BREAK_WORD: 'break-word',
   ANYWHERE: 'anywhere',
@@ -359,6 +379,11 @@ export enum FontStyle {
   Normal = 'normal',
 }
 
+/**
+ * @deprecated `FONT_STYLE` const has been deprecated in favour of the `FontStyle` enum which can still be imported from `ui/helpers/constants/design-system.ts`
+ *
+ * Help to replace `FONT_STYLE` with `FontStyle` by submitting PRs against https://github.com/MetaMask/metamask-extension/issues/18714
+ */
 export const FONT_STYLE = {
   ITALIC: 'italic',
   NORMAL: 'normal',