fix(textfield): correct "multiline" and "grows" delivery

adobe · Feb 17, 2022 · fa0ac34 · fa0ac34
1 parent d200775
commit fa0ac34
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -179,7 +179,7 @@
         "typescript": "^4.5.3",
         "yargs": "^17.2.1"
     },
-    "customElements": "projects/documentation/custom-elements.json",
+    "customElements": ".storybook/custom-elements.json",
     "workspaces": [
         "packages/*",
         "projects/*",

diff --git a/packages/textfield/src/Textfield.ts b/packages/textfield/src/Textfield.ts
@@ -219,7 +219,7 @@ export class TextfieldBase extends ManageHelpText(Focusable) {
         return html`
             ${this.grows && !this.quiet
                 ? html`
-                      <div id="sizer">${this.value}</div>
+                      <div id="sizer">${this.value}&#8203;</div>
                   `
                 : nothing}
             <!-- @ts-ignore -->

diff --git a/packages/textfield/src/textfield.css b/packages/textfield/src/textfield.css
@@ -34,6 +34,10 @@ textarea {
     resize: inherit;
 }
 
+.input {
+    min-width: var(--spectrum-textfield-texticon-min-width);
+}
+
 :host([grows]) .input {
     position: absolute;
     top: 0;
@@ -44,6 +48,8 @@ textarea {
 }
 
 :host([grows]) #sizer {
+    word-break: break-word;
+    white-space: pre-wrap;
     box-sizing: border-box;
     overflow-wrap: break-word;
     border: var(--spectrum-textfield-texticon-border-size) solid;
@@ -81,3 +87,34 @@ textarea {
 .icon-workflow {
     pointer-events: none;
 }
+
+:host([multiline]) #textfield {
+    display: inline-grid;
+}
+
+:host([multiline]) textarea {
+    transition: box-shadow var(--spectrum-global-animation-duration-100, 0.13s)
+            ease-in-out,
+        border-color var(--spectrum-global-animation-duration-100, 0.13s)
+            ease-in-out;
+}
+
+:host([multiline][focused]:not([quiet])) textarea,
+:host([multiline][focused]:not([quiet]):hover) textarea {
+    box-shadow: 0 0 0
+        calc(
+            0px +
+                var(
+                    --spectrum-textfield-m-texticon-focus-ring-border-width,
+                    var(--spectrum-alias-component-focusring-size)
+                )
+        )
+        var(
+            --spectrum-textfield-m-textonly-focus-ring-border-color-key-focus,
+            var(--spectrum-alias-focus-ring-color)
+        ) !important;
+}
+
+:host([multiline]:not([quiet])) #textfield:after {
+    box-shadow: none;
+}
diff --git a/packages/textfield/stories/textarea.stories.ts b/packages/textfield/stories/textarea.stories.ts
@@ -13,6 +13,7 @@ import { html, TemplateResult } from '@spectrum-web-components/base';
 
 import '../sp-textfield.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
+import '@spectrum-web-components/help-text/sp-help-text.js';
 
 export default {
     component: 'sp-textfield',
@@ -71,6 +72,17 @@ export const Default = (): TemplateResult => {
     `;
 };
 
+export const quiet = (): TemplateResult => html`
+    <sp-field-label for="story">Enter your life story...</sp-field-label>
+    <sp-textfield
+        autofocus
+        multiline
+        id="story"
+        quiet
+        placeholder="Enter your life story"
+    ></sp-textfield>
+`;
+
 export const grows = (): TemplateResult => html`
     <sp-field-label for="story">Enter your life story...</sp-field-label>
     <sp-textfield
@@ -82,6 +94,23 @@ export const grows = (): TemplateResult => html`
     ></sp-textfield>
 `;
 
+export const growsEmpty = (): TemplateResult => html`
+    <sp-field-label for="empty">
+        This textfield hasn't been used yet
+    </sp-field-label>
+    <sp-textfield
+        multiline
+        id="empty"
+        grows
+        placeholder="You can type here"
+        autofocus
+    >
+        <sp-help-text slot="help-text">
+            Even empty Textfield display correctly while waiting for content.
+        </sp-help-text>
+    </sp-textfield>
+`;
+
 export const growsWithLargeWords = (): TemplateResult => html`
     <sp-field-label for="story">
         Enter your life story with very long words...
@@ -127,3 +156,20 @@ export const resizeControls = (): TemplateResult => html`
         placeholder="Horizontal resize control"
     ></sp-textfield>
 `;
+
+export const sized = (): TemplateResult => html`
+    <sp-field-label for="sized">
+        This textfield hasn't been used yet
+    </sp-field-label>
+    <sp-textfield
+        multiline
+        id="sized"
+        placeholder="You can type here"
+        autofocus
+        style="width: 400px"
+    >
+        <sp-help-text slot="help-text">
+            Even empty Textfield display correctly while waiting for content.
+        </sp-help-text>
+    </sp-textfield>
+`;
diff --git a/packages/textfield/stories/textfield.stories.ts b/packages/textfield/stories/textfield.stories.ts
@@ -12,6 +12,8 @@ governing permissions and limitations under the License.
 import { html, TemplateResult } from '@spectrum-web-components/base';
 
 import '../sp-textfield.js';
+import '@spectrum-web-components/field-label/sp-field-label.js';
+import '@spectrum-web-components/help-text/sp-help-text.js';
 
 export default {
     component: 'sp-textfield',
@@ -50,6 +52,18 @@ export const Default = (): TemplateResult => {
     `;
 };
 
+export const quiet = (): TemplateResult => {
+    return html`
+        <sp-field-label for="name">Enter your name</sp-field-label>
+        <sp-textfield
+            autofocus
+            id="name"
+            placeholder="This Text Field doesn't make much noise"
+            quiet
+        ></sp-textfield>
+    `;
+};
+
 export const notRequiredWithPattern = (): TemplateResult => {
     return html`
         <sp-textfield
@@ -93,3 +107,30 @@ export const types = (): TemplateResult => html`
         placeholder="password"
     ></sp-textfield>
 `;
+
+export const empty = (): TemplateResult => html`
+    <sp-field-label for="empty">
+        This textfield hasn't been used yet
+    </sp-field-label>
+    <sp-textfield id="empty" placeholder="You can type here" autofocus>
+        <sp-help-text slot="help-text">
+            Even empty Textfield display correctly while waiting for content.
+        </sp-help-text>
+    </sp-textfield>
+`;
+
+export const sized = (): TemplateResult => html`
+    <sp-field-label for="sized">
+        This textfield hasn't been used yet
+    </sp-field-label>
+    <sp-textfield
+        id="sized"
+        placeholder="You can type here"
+        autofocus
+        style="width: 400px"
+    >
+        <sp-help-text slot="help-text">
+            Even empty Textfield display correctly while waiting for content.
+        </sp-help-text>
+    </sp-textfield>
+`;