Fix: ensure controls for text-field and text-area span the full width…

… of host (microsoft#14492) Co-authored-by: Seth Donohue <sethdonohue@Admins-MBP.guest.corp.microsoft.com>
levithomason · Aug 24, 2020 · b266ae0 · b266ae0
1 parent 4012a18
commit b266ae0
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 2 deletions.
diff --git a/change/@fluentui-web-components-2020-08-12-11-41-04-master.json b/change/@fluentui-web-components-2020-08-12-11-41-04-master.json
@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix: add full width to text-area and text-field controls to expand properly with component",
+  "packageName": "@fluentui/web-components",
+  "email": "sethdonohue@Admins-MBP.guest.corp.microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T18:41:04.074Z"
+}
diff --git a/packages/web-components/src/text-area/fixtures/text-area.html b/packages/web-components/src/text-area/fixtures/text-area.html
@@ -6,6 +6,9 @@ <h4>Default</h4>
     <span>label</span>
   </fluent-text-area>
 
+  <h4>Full Width</h4>
+  <fluent-text-area style="width: 100%;"></fluent-text-area>
+
   <h4>Placeholder</h4>
   <fluent-text-area placeholder="Placeholder"></fluent-text-area>
 

diff --git a/packages/web-components/src/text-area/text-area.stories.ts b/packages/web-components/src/text-area/text-area.stories.ts
@@ -7,7 +7,7 @@ FluentTextArea;
 FluentDesignSystemProvider;
 
 export default {
-  title: 'Text area',
+  title: 'Text Area',
 };
 
 export const TextArea = (): string => Examples;
diff --git a/packages/web-components/src/text-area/text-area.styles.ts b/packages/web-components/src/text-area/text-area.styles.ts
@@ -31,7 +31,7 @@ export const TextAreaStyles = css`
         font-size: var(--type-ramp-base-font-size);
         line-height: var(--type-ramp-base-line-height);
         padding: calc(var(--design-unit) * 1.5px) calc(var(--design-unit) * 2px + 1px);
-        max-width: 100%;
+        width: 100%;
         resize: none;
     }
 

diff --git a/packages/web-components/src/text-field/fixtures/text-field.html b/packages/web-components/src/text-field/fixtures/text-field.html
@@ -4,6 +4,9 @@ <h4>Default</h4>
   <fluent-text-field></fluent-text-field>
   <fluent-text-field>Label</fluent-text-field>
 
+  <h4>Full Width</h4>
+  <fluent-text-field style="width: 100%;"></fluent-text-field>
+
   <h4>Placeholder</h4>
   <fluent-text-field placeholder="Placeholder"></fluent-text-field>
 

diff --git a/packages/web-components/src/text-field/text-field.styles.ts b/packages/web-components/src/text-field/text-field.styles.ts
@@ -37,6 +37,7 @@ export const TextFieldStyles = css`
         background: transparent;
         border: 0;
         height: calc(100% - 4px);
+        width: 100%;
         margin-top: auto;
         margin-bottom: auto;
         border: none;