@react-md/core 1.0.0-next.6 → 1.0.0-next.8

package/src/typography/Typography.tsx

@@ -62,24 +62,24 @@ export type NullableTypographyClassNameOptions = Omit<
  * @example
  * Simple Example
  * ```ts
- * import { getTypographyClassName } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
- *       <h1 className={getTypographyClassName({ type: "headline-1" })} />
- *       <h2 className={getTypographyClassName({ type: "headline-2" })} />
- *       <h3 className={getTypographyClassName({ type: "headline-3" })} />
- *       <h4 className={getTypographyClassName({ type: "headline-4" })} />
- *       <h5 className={getTypographyClassName({ type: "headline-5" })} />
- *       <h6 className={getTypographyClassName({ type: "headline-6" })} />
- *       <h5 className={getTypographyClassName({ type: "subtitle-1" })} />
- *       <h6 className={getTypographyClassName({ type: "subtitle-2" })} />
- *       <p className={getTypographyClassName()} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <caption className={getTypographyClassName({ type: "caption" })} />
- *       <span className={getTypographyClassName({ type: "overline" })} />
+ *       <h1 className={typography({ type: "headline-1" })} />
+ *       <h2 className={typography({ type: "headline-2" })} />
+ *       <h3 className={typography({ type: "headline-3" })} />
+ *       <h4 className={typography({ type: "headline-4" })} />
+ *       <h5 className={typography({ type: "headline-5" })} />
+ *       <h6 className={typography({ type: "headline-6" })} />
+ *       <h5 className={typography({ type: "subtitle-1" })} />
+ *       <h6 className={typography({ type: "subtitle-2" })} />
+ *       <p className={typography()} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <caption className={typography({ type: "caption" })} />
+ *       <span className={typography({ type: "overline" })} />
  *     </>
  *   );
  * }
@@ -88,14 +88,14 @@ export type NullableTypographyClassNameOptions = Omit<
  * @example
  * Applying Additional Styles
  * ```ts
- * import { getTypography } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
  *       <h1
  *         // only maintain the default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-1",
  *           margin: "bottom",
  *         })}
@@ -103,7 +103,7 @@ export type NullableTypographyClassNameOptions = Omit<
  *
  *       <h2
  *         // remove all default margin
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-2",
  *           margin: "none",
  *         })}
@@ -111,7 +111,7 @@ export type NullableTypographyClassNameOptions = Omit<
  *
  *       <h3
  *         // only maintain the default margin-top
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-3",
  *           margin: "top",
  *         })}
@@ -119,7 +119,7 @@ export type NullableTypographyClassNameOptions = Omit<
  *
  *       <p
  *         // center the text, set to bold, and only maintain default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type "subtitle-1",
  *           align: "center",
  *           margin: "bottom",

package/src/typography/__tests__/__snapshots__/SrOnly.tsx.snap

@@ -3,7 +3,7 @@
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Some content
   </span>
@@ -13,7 +13,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only custom-class-name"
+    class="rmd-sr-only custom-class-name"
     style="opacity: 0.3;"
   >
     Some content
@@ -24,7 +24,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 3`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only rmd-sr-only--focusable"
+    class="rmd-sr-only rmd-sr-only--focusable"
     style=""
     tabindex="0"
   >
@@ -36,7 +36,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 4`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only rmd-sr-only--focusable"
+    class="rmd-sr-only rmd-sr-only--focusable"
     style=""
     tabindex="-1"
   >
@@ -48,7 +48,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 5`] = `
 <div>
   <h4
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Some content
   </h4>

package/src/typography/_typography.scss

@@ -4,6 +4,18 @@
 @use "../utils";
 
 $disable-text-container: false !default;
+$disable-headline-1: false !default;
+$disable-headline-2: false !default;
+$disable-headline-3: false !default;
+$disable-headline-4: false !default;
+$disable-headline-5: false !default;
+$disable-headline-6: false !default;
+$disable-subtitle-1: false !default;
+$disable-subtitle-2: false !default;
+$disable-body-1: false !default;
+$disable-body-2: false !default;
+$disable-caption: false !default;
+$disable-overline: false !default;
 
 /// A small utility function to get the letter spacing based on tracking and
 /// font-size
@@ -216,9 +228,13 @@ $button-recommended-styles: map.merge(
   $base-font-styles,
   (
     font-size: 0.875rem,
-    line-height: 2.25rem,
     font-weight: map.get($font-weights, medium),
     letter-spacing: get-letter-spacing(1.25, 0.875),
+    line-height: 2.25rem,
+    // buttons with multiple lines of text look terrible because of the large
+    // line-height. You normally want to use a different component if the
+    // clickable area has so much content to line-wrap
+    line-wrap: nowrap,
   )
 );
 $button-custom-styles: () !default;
@@ -276,52 +292,76 @@ $typography-variables: (line-length, text-container-padding);
     .rmd-typography {
       @include utils.map-to-styles($base-font-styles);
 
-      &--headline-1 {
-        @include utils.map-to-styles($headline-1-styles);
+      @if not $disable-headline-1 {
+        &--headline-1 {
+          @include utils.map-to-styles($headline-1-styles);
+        }
       }
 
-      &--headline-2 {
-        @include utils.map-to-styles($headline-2-styles);
+      @if not $disable-headline-2 {
+        &--headline-2 {
+          @include utils.map-to-styles($headline-2-styles);
+        }
       }
 
-      &--headline-3 {
-        @include utils.map-to-styles($headline-3-styles);
+      @if not $disable-headline-3 {
+        &--headline-3 {
+          @include utils.map-to-styles($headline-3-styles);
+        }
       }
 
-      &--headline-4 {
-        @include utils.map-to-styles($headline-4-styles);
+      @if not $disable-headline-4 {
+        &--headline-4 {
+          @include utils.map-to-styles($headline-4-styles);
+        }
       }
 
-      &--headline-5 {
-        @include utils.map-to-styles($headline-5-styles);
+      @if not $disable-headline-5 {
+        &--headline-5 {
+          @include utils.map-to-styles($headline-5-styles);
+        }
       }
 
-      &--headline-6 {
-        @include utils.map-to-styles($headline-6-styles);
+      @if not $disable-headline-6 {
+        &--headline-6 {
+          @include utils.map-to-styles($headline-6-styles);
+        }
       }
 
-      &--subtitle-1 {
-        @include utils.map-to-styles($subtitle-1-styles);
+      @if not $disable-subtitle-1 {
+        &--subtitle-1 {
+          @include utils.map-to-styles($subtitle-1-styles);
+        }
       }
 
-      &--subtitle-2 {
-        @include utils.map-to-styles($subtitle-2-styles);
+      @if not $disable-subtitle-2 {
+        &--subtitle-2 {
+          @include utils.map-to-styles($subtitle-2-styles);
+        }
       }
 
-      &--body-1 {
-        @include utils.map-to-styles($body-1-styles);
+      @if not $disable-body-1 {
+        &--body-1 {
+          @include utils.map-to-styles($body-1-styles);
+        }
       }
 
-      &--body-2 {
-        @include utils.map-to-styles($body-2-styles);
+      @if not $disable-body-2 {
+        &--body-2 {
+          @include utils.map-to-styles($body-2-styles);
+        }
       }
 
-      &--caption {
-        @include utils.map-to-styles($caption-styles);
+      @if not $disable-caption {
+        &--caption {
+          @include utils.map-to-styles($caption-styles);
+        }
       }
 
-      &--overline {
-        @include utils.map-to-styles($overline-styles);
+      @if not $disable-overline {
+        &--overline {
+          @include utils.map-to-styles($overline-styles);
+        }
       }
     }
   }