fix: fixing file-picker width as per Yinon comment (#423)

* fixing file-picker width as per Yinon comment * adding Yinon CR remark
Vonage · Nov 3, 2020 · 6611245 · 6611245
1 parent 2df736e
commit 6611245
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/components/file-picker/src/vwc-file-picker.scss b/components/file-picker/src/vwc-file-picker.scss
@@ -1,6 +1,12 @@
 @use '@vonage/vvd-typography/scss/typography' as typography;
 @use '@vonage/vvd-foundation/scss/variable-names/color-semantic-variable-names' as color-semantic;
 
+:host {
+	display: inline-block;
+	min-inline-size: 320px;
+	max-inline-size: 100%;
+}
+
 .input-file-slot::slotted(*) {
 	display: none;
 }

diff --git a/components/file-picker/stories/file-picker-events.stories.js b/components/file-picker/stories/file-picker-events.stories.js
@@ -39,10 +39,14 @@ MultipleRestrictedChangeEvent.args = {
 const TemplateWithForm = args => html`
 	<form @submit="${onSubmit}">
 		<div>This is an example of file-picker living in form</div>
-		<vwc-file-picker ...=${spread(args.self)}>
-			<input type="file" name="file-input" ...=${spread(args.input)}/>
-			<vwc-button slot="button" type="button" layout="filled" icon="upload" trailingIcon>Add Files</vwc-button>
-		</vwc-file-picker>
+		<hr>
+		<div>
+			<vwc-file-picker ...=${spread(args.self)}>
+				<input type="file" name="file-input" ...=${spread(args.input)}/>
+				<vwc-button slot="button" type="button" layout="filled" icon="upload" trailingIcon>Add Files</vwc-button>
+			</vwc-file-picker>
+		</div>
+		<hr>
 		<vwc-button layout="filled">Submit</vwc-button>
 	</form>
 `;