fix(textfield): break very long words within the Textarea's sizer ele…

…ment
adobe · Aug 2, 2021 · 2f95ac0 · 2f95ac0
1 parent ecdc021
commit 2f95ac0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/packages/textfield/src/textfield.css b/packages/textfield/src/textfield.css
@@ -22,6 +22,7 @@ governing permissions and limitations under the License.
 
 :host([grows]) #sizer {
     box-sizing: border-box;
+    overflow-wrap: break-word;
     border: var(
             --spectrum-textfield-border-size,
             var(--spectrum-alias-border-size-thin)

diff --git a/packages/textfield/stories/textarea.stories.ts b/packages/textfield/stories/textarea.stories.ts
@@ -83,6 +83,19 @@ export const grows = (): TemplateResult => html`
     ></sp-textfield>
 `;
 
+export const growsWithLargeWords = (): TemplateResult => html`
+    <sp-field-label for="story">
+        Enter your life story with very long words...
+    </sp-field-label>
+    <sp-textfield
+        multiline
+        id="story"
+        value="Sed utperspiciatisundeomnisistenatuserrorsitvoluptatemaccusantiumdoloremquelaudantium,totamemaperiam, eaque ipsa quae ab illo inventore veritatis etquasiarchitectobeataevitaedictasuntexplicabo. Nemo enimipsamvoluptatemquiavoluptassitaspernaturautoditautfugitsedquiaconsequunturmagnidoloreseosquirationevoluptatemsequinesciunt."
+        grows
+        placeholder="Enter your life story"
+    ></sp-textfield>
+`;
+
 export const readonly = (): TemplateResult => html`
     <sp-textfield
         multiline