refactor: correct prop description

callstack · Mar 3, 2022 · 7e5cfd5 · 7e5cfd5
1 parent 9b4d015
commit 7e5cfd5
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 46 deletions.
diff --git a/src/components/Typography/AnimatedText.tsx b/src/components/Typography/AnimatedText.tsx
@@ -14,15 +14,15 @@ type Props = React.ComponentPropsWithRef<typeof Animated.Text> & {
    * Variant defines appropriate text styles for type role and its size.
    * Available variants:
    *
-   *  Display: `display-large`, `display-small`, `display-small`
+   *  Display: `displayLarge`, `displayMedium`, `displaySmall`
    *
-   *  Headline: `headline-large`, `headline-medium`, `headline-small`
+   *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
    *
-   *  Title: `title-large`, `title-medium`, `title-small`
+   *  Title: `titleLarge`, `titleMedium`, `titleSmall`
    *
-   *  Label:  `label-large`, `label-medium`, `label-small`
+   *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
    *
-   *  Body: `body-large`, `body-medium`, `body-small`
+   *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
   variant?: keyof typeof MD3TypescaleKey;
   style?: StyleProp<TextStyle>;
@@ -37,12 +37,7 @@ type Props = React.ComponentPropsWithRef<typeof Animated.Text> & {
  *
  * @extends Text props https://reactnative.dev/docs/text#props
  */
-function AnimatedText({
-  style,
-  theme,
-  variant = 'labelLarge',
-  ...rest
-}: Props) {
+function AnimatedText({ style, theme, variant, ...rest }: Props) {
   const writingDirection = I18nManager.isRTL ? 'rtl' : 'ltr';
 
   if (theme.isV3 && variant) {

diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx
@@ -16,15 +16,15 @@ type Props = React.ComponentProps<typeof NativeText> & {
    * Variant defines appropriate text styles for type role and its size.
    * Available variants:
    *
-   *  Display: `display-large`, `display-small`, `display-small`
+   *  Display: `displayLarge`, `displayMedium`, `displaySmall`
    *
-   *  Headline: `headline-large`, `headline-medium`, `headline-small`
+   *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
    *
-   *  Title: `title-large`, `title-medium`, `title-small`
+   *  Title: `titleLarge`, `titleMedium`, `titleSmall`
    *
-   *  Label:  `label-large`, `label-medium`, `label-small`
+   *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
    *
-   *  Body: `body-large`, `body-medium`, `body-small`
+   *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
   variant?: keyof typeof MD3TypescaleKey;
   children: React.ReactNode;
@@ -45,25 +45,25 @@ type Props = React.ComponentProps<typeof NativeText> & {
  *
  * const MyComponent = () => (
  *   <>
- *     <Text variant="display-large">Display Large</Text>
- *     <Text variant="display-medium">Display Medium</Text>
- *     <Text variant="display-small">Display small</Text>
+ *     <Text variant="displayLarge">Display Large</Text>
+ *     <Text variant="displayMedium">Display Medium</Text>
+ *     <Text variant="displaySmall">Display small</Text>
  *
- *     <Text variant="headline-large">Headline Large</Text>
- *     <Text variant="headline-medium">Headline Medium</Text>
- *     <Text variant="headline-small">Headline Small</Text>
+ *     <Text variant="headlineLarge">Headline Large</Text>
+ *     <Text variant="headlineMedium">Headline Medium</Text>
+ *     <Text variant="headlineSmall">Headline Small</Text>
  *
- *     <Text variant="title-large">Title Large</Text>
- *     <Text variant="title-medium">Title Medium</Text>
- *     <Text variant="title-small">Title Small</Text>
+ *     <Text variant="titleLarge">Title Large</Text>
+ *     <Text variant="titleMedium">Title Medium</Text>
+ *     <Text variant="titleSmall">Title Small</Text>
  *
- *     <Text variant="body-large">Body Large</Text>
- *     <Text variant="body-medium">Body Medium</Text>
- *     <Text variant="body-small">Body Small</Text>
+ *     <Text variant="bodyLarge">Body Large</Text>
+ *     <Text variant="bodyMedium">Body Medium</Text>
+ *     <Text variant="bodySmall">Body Small</Text>
  *
- *     <Text variant="label-large">Label Large</Text>
- *     <Text variant="label-medium">Label Medium</Text>
- *     <Text variant="label-small">Label Small</Text>
+ *     <Text variant="labelLarge">Label Large</Text>
+ *     <Text variant="labelMedium">Label Medium</Text>
+ *     <Text variant="labelSmall">Label Small</Text>
  *  </>
  * );
  *

diff --git a/src/components/__tests__/Typography/Text.test.js b/src/components/__tests__/Typography/Text.test.js
@@ -7,25 +7,25 @@ it('renders every variant of Text with children as content', () => {
 
   const variants = (
     <>
-      <Text variant="display-large">{content}</Text>
-      <Text variant="display-medium">{content}</Text>
-      <Text variant="display-small">{content}</Text>
+      <Text variant="displayLarge">{content}</Text>
+      <Text variant="displayMedium">{content}</Text>
+      <Text variant="displaySmall">{content}</Text>
 
-      <Text variant="headline-large">{content}</Text>
-      <Text variant="headline-medium">{content}</Text>
-      <Text variant="headline-small">{content}</Text>
+      <Text variant="headlineLarge">{content}</Text>
+      <Text variant="headlineMedium">{content}</Text>
+      <Text variant="headlineSmall">{content}</Text>
 
-      <Text variant="title-large">{content}</Text>
-      <Text variant="title-medium">{content}</Text>
-      <Text variant="title-small">{content}</Text>
+      <Text variant="titleLarge">{content}</Text>
+      <Text variant="titleMedium">{content}</Text>
+      <Text variant="titleSmall">{content}</Text>
 
-      <Text variant="body-large">{content}</Text>
-      <Text variant="body-medium">{content}</Text>
-      <Text variant="body-small">{content}</Text>
+      <Text variant="bodyLarge">{content}</Text>
+      <Text variant="bodyMedium">{content}</Text>
+      <Text variant="bodySmall">{content}</Text>
 
-      <Text variant="label-large">{content}</Text>
-      <Text variant="label-medium">{content}</Text>
-      <Text variant="label-small">{content}</Text>
+      <Text variant="labelLarge">{content}</Text>
+      <Text variant="labelMedium">{content}</Text>
+      <Text variant="labelSmall">{content}</Text>
     </>
   );