refactor(@dpc-sdp/ripple-ui-core): ⏪ revert hyphenation, add separate…

… util class
dpc-sdp · Oct 17, 2023 · 8614c75 · 8614c75
1 parent c31de49
commit 8614c75
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 16 deletions.
diff --git a/packages/ripple-ui-core/src/styles/utilities/_typography.css b/packages/ripple-ui-core/src/styles/utilities/_typography.css
@@ -20,7 +20,6 @@ html {
   color: var(--rpl-clr-type-accent-contrast);
   background-color: var(--rpl-clr-accent);
   box-decoration-break: clone;
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
@@ -40,7 +39,6 @@ html {
   color: var(--rpl-clr-type-accent-contrast);
   background-color: var(--rpl-clr-accent);
   box-decoration-break: clone;
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
@@ -51,7 +49,6 @@ html {
   line-height: var(--rpl-type-lh-7);
   letter-spacing: var(--rpl-type-ls-5);
   color: var(--rpl-clr-primary);
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
@@ -67,7 +64,6 @@ html {
   line-height: var(--rpl-type-lh-7);
   letter-spacing: var(--rpl-type-ls-5);
   color: var(--rpl-clr-primary);
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
@@ -78,7 +74,6 @@ html {
   font-weight: var(--rpl-type-weight-bold);
   line-height: var(--rpl-type-lh-6);
   letter-spacing: var(--rpl-type-ls-4);
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
@@ -93,7 +88,6 @@ html {
   font-weight: var(--rpl-type-weight-bold);
   line-height: var(--rpl-type-lh-6);
   letter-spacing: var(--rpl-type-ls-4);
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
@@ -108,7 +102,6 @@ html {
   color: var(--rpl-clr-type-primary-contrast);
   background-color: var(--rpl-clr-primary);
   box-decoration-break: clone;
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
@@ -129,7 +122,6 @@ html {
   color: var(--rpl-clr-type-primary-contrast);
   background-color: var(--rpl-clr-primary);
   box-decoration-break: clone;
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
@@ -139,7 +131,6 @@ html {
   font-weight: var(--rpl-type-weight-bold);
   line-height: var(--rpl-type-lh-5);
   letter-spacing: var(--rpl-type-ls-2);
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
@@ -154,7 +145,6 @@ html {
   font-weight: var(--rpl-type-weight-bold);
   line-height: var(--rpl-type-lh-5);
   letter-spacing: var(--rpl-type-ls-2);
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
@@ -165,7 +155,6 @@ html {
   font-weight: var(--rpl-type-weight-bold);
   line-height: var(--rpl-type-lh-4);
   letter-spacing: var(--rpl-type-ls-1);
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
@@ -180,7 +169,6 @@ html {
   font-weight: var(--rpl-type-weight-bold);
   line-height: var(--rpl-type-lh-4);
   letter-spacing: var(--rpl-type-ls-1);
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
@@ -191,7 +179,6 @@ html {
   font-weight: var(--rpl-type-weight-bold);
   line-height: var(--rpl-type-lh-3);
   letter-spacing: var(--rpl-type-ls-1);
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 
   @media (--rpl-bp-l) {
@@ -206,7 +193,6 @@ html {
   font-weight: var(--rpl-type-weight-bold);
   line-height: var(--rpl-type-lh-3);
   letter-spacing: var(--rpl-type-ls-1);
-  hyphens: auto;
   font-family: var(--rpl-type-font-family-heading, var(--rpl-type-font-family));
 }
 
@@ -307,3 +293,7 @@ html {
     color: var(--rpl-clr-type-default) !important;
   }
 }
+
+.rpl-u-hyphenate {
+  hyphens: auto;
+}
diff --git a/packages/ripple-ui-core/stories/typography.stories.mdx b/packages/ripple-ui-core/stories/typography.stories.mdx
@@ -123,10 +123,10 @@ export const ListsTemplate = (args) => ({
   template: `
     <section style="display:flex;justify-content:space-between">
       <div class="rpl-u-padding-3" style="width:50%;max-width:240px;background:var(--rpl-clr-accent-alt)">
-        <h1 class="rpl-type-h1" style="hyphens:none">An inappropriately long title to demonstrate hyphenation on a small screen.</h1>
+        <h1 class="rpl-type-h1">An inappropriately long title to demonstrate hyphenation on a small screen.</h1>
       </div>
       <div class="rpl-u-padding-3" style="width:50%;max-width:240px;background:var(--rpl-clr-accent-alt)">
-        <h1 class="rpl-type-h1">An inappropriately long title to demonstrate hyphenation on a small screen.</h1>
+        <h1 class="rpl-type-h1 rpl-u-hyphenate">An inappropriately long title to demonstrate hyphenation on a small screen.</h1>
       </div>
     </section>
   `