MaskedInput, CodeBlock - scrollbar overlap fix (HDS-2864) (#2444)

hashicorp · Sep 24, 2024 · 29ae64f · 29ae64f
1 parent 47d773a
commit 29ae64f
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 2 deletions.
diff --git a/.changeset/real-cobras-collect.md b/.changeset/real-cobras-collect.md
@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`MaskedInput` - Changed textarea scrollbar-width to "thin" to reduce overlap with toggle button.
+
+`CodeBlock` - Changed textarea scrollbar-width to "thin" to reduce overlap with copy button.
diff --git a/packages/components/src/styles/components/code-block/index.scss b/packages/components/src/styles/components/code-block/index.scss
@@ -36,6 +36,7 @@ $hds-code-block-code-padding: 16px;
     word-spacing: normal;
     tab-size: 4;
     hyphens: none;
+    scrollbar-width: thin;
 
     @media print { text-shadow: none; }
   }

diff --git a/packages/components/src/styles/components/form/masked-input.scss b/packages/components/src/styles/components/form/masked-input.scss
@@ -19,6 +19,7 @@ $hds-form-masked-input-button-size: 24px;
   .hds-form-masked-input__control {
     grid-area: input;
     padding-right: calc(var(--token-form-control-padding) + $hds-form-masked-input-button-size);
+    scrollbar-width: thin;
   }
 }
 

diff --git a/showcase/app/templates/components/form/masked-input.hbs b/showcase/app/templates/components/form/masked-input.hbs
@@ -57,6 +57,19 @@
     <SF.Item @label="With multiline value (template literal)">
       <Hds::Form::MaskedInput::Base @isMultiline={{true}} @isContentMasked={{false}} @value={{this.multilineText2}} />
     </SF.Item>
+    <SF.Item @label="With long wrapping text (masked)">
+      <Hds::Form::MaskedInput::Base
+        @isMultiline={{true}}
+        @value="Lorem ipsum odor amet, consectetuer adipiscing elit. Feugiat sed felis dictum taciti arcu senectus! Nulla mauris sollicitudin venenatis et leo; tortor facilisi penatibus. Tempor efficitur suspendisse sollicitudin netus sollicitudin sagittis euismod accumsan habitasse. Fusce nibh malesuada neque elementum venenatis risus platea montes. Risus vivamus maecenas hendrerit eu in ante potenti odio. Ex tellus cubilia fringilla condimentum velit; euismod dui. Ultricies lobortis senectus dis ut purus."
+      />
+    </SF.Item>
+    <SF.Item @label="With long wrapping text (in clear)">
+      <Hds::Form::MaskedInput::Base
+        @isMultiline={{true}}
+        @isContentMasked={{false}}
+        @value="Lorem ipsum odor amet, consectetuer adipiscing elit. Feugiat sed felis dictum taciti arcu senectus! Nulla mauris sollicitudin venenatis et leo; tortor facilisi penatibus. Tempor efficitur suspendisse sollicitudin netus sollicitudin sagittis euismod accumsan habitasse. Fusce nibh malesuada neque elementum venenatis risus platea montes. Risus vivamus maecenas hendrerit eu in ante potenti odio. Ex tellus cubilia fringilla condimentum velit; euismod dui. Ultricies lobortis senectus dis ut purus."
+      />
+    </SF.Item>
   </Shw::Flex>
 
   <Shw::Divider @level="2" />

diff --git a/website/docs/components/code-block/index.md b/website/docs/components/code-block/index.md
@@ -10,7 +10,7 @@ previewImage: assets/illustrations/components/code-block.jpg
 navigation:
   keywords: ['code', 'snippet', 'copy', 'text', 'editor', 'language', 'example', 'syntax', 'highlight']
 status:
-  updated: 4.10.0
+  updated: 4.12.0
 ---
 
 <section data-tab="Guidelines">
@@ -33,5 +33,6 @@ status:
 </section>
 
 <section data-tab="Version history">
+  @include "partials/version-history/4.12.0.md"
   @include "partials/version-history/4.10.0.md"
 </section>
diff --git a/website/docs/components/code-block/partials/version-history/4.12.0.md b/website/docs/components/code-block/partials/version-history/4.12.0.md
@@ -0,0 +1,7 @@
+## 4.12.0
+
+### Updated
+
+`CodeBlock`
+
+- Changed textarea scrollbar-width to “thin” to reduce overlap with copy button.
diff --git a/website/docs/components/form/masked-input/index.md b/website/docs/components/form/masked-input/index.md
@@ -9,6 +9,8 @@ related: ['components/form/text-input', 'components/form/textarea']
 previewImage: assets/illustrations/components/form/masked-input.jpg
 navigation:
   keywords: ['masked' ,'sensitive', 'obscured', 'obfuscated', 'secret', 'form', 'input', 'textarea']
+status:
+  updated: 4.12.0
 ---
 
 <section data-tab="Guidelines">
@@ -28,4 +30,8 @@ navigation:
 
 <section data-tab="Accessibility">
   @include "partials/accessibility/accessibility.md"
-</section>
+</section>
+
+<section data-tab="Version history">
+  @include "partials/version-history/4.12.0.md"
+</section>
diff --git a/website/docs/components/form/masked-input/partials/version-history/4.12.0.md b/website/docs/components/form/masked-input/partials/version-history/4.12.0.md
@@ -0,0 +1,7 @@
+## 4.12.0
+
+### Updated
+
+`MaskedInput`
+
+- Changed textarea scrollbar-width to “thin” to reduce overlap with toggle button.