feat: allow disabling textarea resize

hperrin · Apr 15, 2021 · ebb84af · ebb84af
1 parent 7b06afa
commit ebb84af
Show file tree

Hide file tree

Showing 11 changed files with 383 additions and 2 deletions.
diff --git a/packages/select/Select.svelte b/packages/select/Select.svelte
@@ -86,6 +86,7 @@
         bind:this={floatingLabel}
         id={inputId + '-smui-label'}
         floatAbove={value !== ''}
+        {required}
         {...prefixFilter($$restProps, 'label$')}
         >{label == null ? '' : label}<slot name="label" /></FloatingLabel
       >
@@ -101,6 +102,7 @@
             bind:this={floatingLabel}
             id={inputId + '-smui-label'}
             floatAbove={value !== ''}
+            {required}
             {...prefixFilter($$restProps, 'label$')}
             >{label == null ? '' : label}<slot name="label" /></FloatingLabel
           >

diff --git a/packages/textfield/Textarea.svelte b/packages/textfield/Textarea.svelte
@@ -6,6 +6,7 @@
     [className]: true,
     'mdc-text-field__input': true,
   })}
+  style={`${resizable ? '' : 'resize: none; '}${style}`}
   on:change={changeHandler}
   bind:value
   {...internalAttrs}
@@ -29,10 +30,12 @@
   export let use = [];
   let className = '';
   export { className as class };
+  export let style = '';
   export let value = '';
   export let dirty = false;
   export let invalid = false;
   export let updateInvalid = true;
+  export let resizable = true;
 
   let element;
   let internalAttrs = {};

diff --git a/packages/textfield/Textfield.svelte b/packages/textfield/Textfield.svelte
@@ -91,7 +91,12 @@
     </ContextFragment>
     <slot />
     {#if textarea}
-      <span class="mdc-text-field__resizer">
+      <span
+        class={classMap({
+          'mdc-text-field__resizer':
+            !('input$resizable' in $$restProps) || $$restProps.input$resizable,
+        })}
+      >
         <Textarea
           bind:this={input}
           {disabled}
@@ -224,7 +229,6 @@
 <script>
   import { MDCTextFieldFoundation } from '@material/textfield';
   import { applyPassive } from '@material/dom/events';
-  import { matches } from '@material/dom/ponyfill';
   import { onMount, onDestroy, getContext, tick } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import {

diff --git a/site/src/routes/demo/select/_Disabled.svelte b/site/src/routes/demo/select/_Disabled.svelte
@@ -0,0 +1,63 @@
+<div class="columns margins">
+  <div>
+    <Select bind:value={valueA} label="Standard" disabled>
+      <Option value="" />
+      {#each fruits as fruit}
+        <Option value={fruit}>{fruit}</Option>
+      {/each}
+    </Select>
+
+    <pre class="status">Selected: {valueA}</pre>
+  </div>
+
+  <div>
+    <Select variant="filled" bind:value={valueB} label="Filled" disabled>
+      <Option value="" />
+      {#each fruits as fruit}
+        <Option value={fruit}>{fruit}</Option>
+      {/each}
+    </Select>
+
+    <pre class="status">Selected: {valueB}</pre>
+  </div>
+
+  <div>
+    <Select variant="outlined" bind:value={valueC} label="Outlined" disabled>
+      <Option value="" />
+      {#each fruits as fruit}
+        <Option value={fruit}>{fruit}</Option>
+      {/each}
+    </Select>
+
+    <pre class="status">Selected: {valueC}</pre>
+  </div>
+</div>
+
+<script>
+  import Select, { Option } from '@smui/select';
+
+  let fruits = ['Apple', 'Orange', 'Banana', 'Mango'];
+
+  let valueA = '';
+  let valueB = '';
+  let valueC = '';
+</script>
+
+<style>
+  .margins {
+    margin: 18px 0 24px;
+  }
+
+  .columns {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .columns > * {
+    margin-left: 12px;
+  }
+  .columns > *:first-child {
+    margin-left: 0;
+  }
+</style>
diff --git a/site/src/routes/demo/select/_Required.svelte b/site/src/routes/demo/select/_Required.svelte
@@ -0,0 +1,63 @@
+<div class="columns margins">
+  <div>
+    <Select bind:value={valueA} label="Standard" required>
+      <Option value="" />
+      {#each fruits as fruit}
+        <Option value={fruit}>{fruit}</Option>
+      {/each}
+    </Select>
+
+    <pre class="status">Selected: {valueA}</pre>
+  </div>
+
+  <div>
+    <Select variant="filled" bind:value={valueB} label="Filled" required>
+      <Option value="" />
+      {#each fruits as fruit}
+        <Option value={fruit}>{fruit}</Option>
+      {/each}
+    </Select>
+
+    <pre class="status">Selected: {valueB}</pre>
+  </div>
+
+  <div>
+    <Select variant="outlined" bind:value={valueC} label="Outlined" required>
+      <Option value="" />
+      {#each fruits as fruit}
+        <Option value={fruit}>{fruit}</Option>
+      {/each}
+    </Select>
+
+    <pre class="status">Selected: {valueC}</pre>
+  </div>
+</div>
+
+<script>
+  import Select, { Option } from '@smui/select';
+
+  let fruits = ['Apple', 'Orange', 'Banana', 'Mango'];
+
+  let valueA = '';
+  let valueB = '';
+  let valueC = '';
+</script>
+
+<style>
+  .margins {
+    margin: 18px 0 24px;
+  }
+
+  .columns {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .columns > * {
+    margin-left: 12px;
+  }
+  .columns > *:first-child {
+    margin-left: 0;
+  }
+</style>
diff --git a/site/src/routes/demo/select/index.svelte b/site/src/routes/demo/select/index.svelte
@@ -22,6 +22,10 @@
     Shaped Outlined
     <svelte:fragment slot="subtitle">Styled with CSS</svelte:fragment>
   </Demo>
+
+  <Demo component={Disabled} file="select/_Disabled.svelte">Disabled</Demo>
+
+  <Demo component={Required} file="select/_Required.svelte">Required</Demo>
 </section>
 
 <script>
@@ -32,4 +36,6 @@
   import Outlined from './_Outlined.svelte';
   import ShapedFilled from './_ShapedFilled.svelte';
   import ShapedOutlined from './_ShapedOutlined.svelte';
+  import Disabled from './_Disabled.svelte';
+  import Required from './_Required.svelte';
 </script>
diff --git a/site/src/routes/demo/textfield/_FixedSizeTextarea.svelte b/site/src/routes/demo/textfield/_FixedSizeTextarea.svelte
@@ -0,0 +1,25 @@
+<div class="margins">
+  <Textfield
+    textarea
+    bind:value
+    label="Label"
+    input$rows="6"
+    input$cols="18"
+    input$resizable={false}
+  >
+    <HelperText slot="helper">Helper Text</HelperText>
+  </Textfield>
+</div>
+
+<script>
+  import Textfield from '@smui/textfield';
+  import HelperText from '@smui/textfield/helper-text/index';
+
+  let value = '';
+</script>
+
+<style>
+  .margins {
+    margin: 18px 0 24px;
+  }
+</style>
diff --git a/site/src/routes/demo/textfield/_Prefixed.svelte b/site/src/routes/demo/textfield/_Prefixed.svelte
@@ -0,0 +1,69 @@
+<div class="columns margins">
+  <div>
+    <Textfield
+      bind:value={valueA}
+      label="Standard"
+      prefix="$"
+      input$pattern={'\\d+(\\.\\d{2})?'}
+    />
+
+    <pre class="status">Value: {valueA}</pre>
+  </div>
+  <div>
+    <Textfield
+      variant="filled"
+      bind:value={valueB}
+      label="Filled"
+      prefix="$"
+      input$pattern={'\\d+(\\.\\d{2})?'}
+    />
+
+    <pre class="status">Value: {valueB}</pre>
+  </div>
+  <div>
+    <Textfield
+      variant="outlined"
+      bind:value={valueC}
+      label="Outlined"
+      prefix="$"
+      input$pattern={'\\d+(\\.\\d{2})?'}
+    />
+
+    <pre class="status">Value: {valueC}</pre>
+  </div>
+</div>
+
+<script>
+  import Textfield from '@smui/textfield';
+
+  let valueA = '';
+  let valueB = '';
+  let valueC = '';
+</script>
+
+<style>
+  .margins {
+    margin: 18px 0 24px;
+  }
+
+  .columns {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .columns > * {
+    flex-basis: 0;
+    min-width: 218px;
+  }
+
+  .columns :global(.mdc-text-field) {
+    width: 218px;
+  }
+
+  .columns .status {
+    width: auto;
+    word-break: break-all;
+    overflow-wrap: break-word;
+  }
+</style>
diff --git a/site/src/routes/demo/textfield/_Required.svelte b/site/src/routes/demo/textfield/_Required.svelte
@@ -0,0 +1,57 @@
+<div class="columns margins">
+  <div>
+    <Textfield bind:value={valueA} label="Standard" required />
+
+    <pre class="status">Value: {valueA}</pre>
+  </div>
+  <div>
+    <Textfield variant="filled" bind:value={valueB} label="Filled" required />
+
+    <pre class="status">Value: {valueB}</pre>
+  </div>
+  <div>
+    <Textfield
+      variant="outlined"
+      bind:value={valueC}
+      label="Outlined"
+      required
+    />
+
+    <pre class="status">Value: {valueC}</pre>
+  </div>
+</div>
+
+<script>
+  import Textfield from '@smui/textfield';
+
+  let valueA = '';
+  let valueB = '';
+  let valueC = '';
+</script>
+
+<style>
+  .margins {
+    margin: 18px 0 24px;
+  }
+
+  .columns {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+
+  .columns > * {
+    flex-basis: 0;
+    min-width: 218px;
+  }
+
+  .columns :global(.mdc-text-field) {
+    width: 218px;
+  }
+
+  .columns .status {
+    width: auto;
+    word-break: break-all;
+    overflow-wrap: break-word;
+  }
+</style>