Skip to content

Commit

Permalink
feat(ld-input): add resize prop
Browse files Browse the repository at this point in the history 
Resolves #223
  • Loading branch information
@borisdiakur
borisdiakur committed Jan 12, 2022
1 parent b68f995 commit 8d699c0
Show file tree
Hide file tree
Showing 7 changed files with 128 additions and 32 deletions.
26 changes: 26 additions & 0 deletions screenshot/builds/master.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5685,6 +5685,19 @@
"isLandscape": false,
"isMobile": false
},
{
"id": "29473521",
"image": "aac575ef4227c83422c0cb5c177045d8.png",
"userAgent": "default",
"desc": "ld-input multiline css component resize",
"testPath": "./src/liquid/components/ld-input/test/ld-input.e2e.ts",
"width": 600,
"height": 600,
"deviceScaleFactor": 1,
"hasTouch": false,
"isLandscape": false,
"isMobile": false
},
{
"id": "fdd9fe79",
"image": "8ea54fac3f833befad027158419e51cf.png",
Expand All @@ -5698,6 +5711,19 @@
"isLandscape": false,
"isMobile": false
},
{
"id": "1cc78539",
"image": "aac575ef4227c83422c0cb5c177045d8.png",
"userAgent": "default",
"desc": "ld-input multiline web component resize",
"testPath": "./src/liquid/components/ld-input/test/ld-input.e2e.ts",
"width": 600,
"height": 600,
"deviceScaleFactor": 1,
"hasTouch": false,
"isLandscape": false,
"isMobile": false
},
{
"id": "db9080ce",
"image": "f063bbae55a3e0af086a49487af3d576.png",
Expand Down
1 change: 1 addition & 0 deletions src/docs/components/docs-main/docs-main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@
background-color: transparent !important;
box-shadow: none !important;
padding: 0;
font-size: inherit;
}
}

Expand Down
25 changes: 25 additions & 0 deletions src/liquid/components/ld-input/ld-input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,6 +216,31 @@
}
}

:host(.ld-input--resize-both),
.ld-input--resize-both {
> textarea {
resize: both;
}
}
:host(.ld-input--resize-horizontal),
.ld-input--resize-horizontal {
> textarea {
resize: horizontal;
}
}
:host(.ld-input--resize-vertical),
.ld-input--resize-vertical {
> textarea {
resize: vertical;
}
}
:host(.ld-input--resize-none),
.ld-input--resize-none {
> textarea {
resize: none;
}
}

:host(.ld-input--sm),
.ld-input--sm {
min-height: var(--ld-input-min-height-sm);
Expand Down
4 changes: 4 additions & 0 deletions src/liquid/components/ld-input/ld-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,9 @@ export class LdInput implements InnerFocusable, ClonesAttributes {
/** A value is required for the form to be submittable. */
@Prop() required?: boolean

/** Whether the multiline input is resizable, and if so, in which directions. */
@Prop() resize?: 'none' | 'both' | 'horizontal' | 'vertical' = 'both'

/** The number of rows. */
@Prop() rows?: number

Expand Down Expand Up @@ -335,6 +338,7 @@ export class LdInput implements InnerFocusable, ClonesAttributes {
this.size && `ld-input--${this.size}`,
this.tone && `ld-input--${this.tone}`,
this.invalid && 'ld-input--invalid',
this.multiline && this.resize && `ld-input--resize-${this.resize}`,
])

if (this.multiline) {
Expand Down
83 changes: 52 additions & 31 deletions src/liquid/components/ld-input/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,26 @@ The `multiline` attribute transforms the component to a textarea element instead
</div>
{% endexample %}

#### Resizing

You can change the way how the multiline input element can be resized by the user by applying the `resize` prop on the `ld-input` element.

{% example %}
<ld-input resize="horizontal" placeholder="Tell us your story..." multiline rows="5" cols="33"></ld-input>

<ld-input resize="vertical" placeholder="Tell us your story..." multiline rows="5" cols="33"></ld-input>

<!-- CSS component -->

<div class="ld-input ld-input--resize-horizontal">
<textarea placeholder="Tell us your story..." rows="5" cols="33"></textarea>
</div>

<div class="ld-input ld-input--resize-vertical">
<textarea placeholder="Tell us your story..." rows="5" cols="33"></textarea>
</div>
{% endexample %}

### Size

{% example %}
Expand Down Expand Up @@ -995,37 +1015,38 @@ The `ld-input` Web Component does not provide any properties or methods for vali

## Properties

| Property | Attribute | Description | Type | Default |
| -------------- | -------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
| `accept` | `accept` | Hint for expected file type in file upload controls. | `string` | `undefined` |
| `autocomplete` | `autocomplete` | Hint for form autofill feature. | `string` | `undefined` |
| `autofocus` | `autofocus` | Automatically focus the form control when the page is loaded. | `boolean` | `false` |
| `capture` | `capture` | Media capture input method in file upload controls. | `string` | `undefined` |
| `cols` | `cols` | The number of columns. | `number` | `undefined` |
| `dirname` | `dirname` | Name of form field to use for sending the element's directionality in form submission. | `string` | `undefined` |
| `disabled` | `disabled` | Whether the form control is disabled. | `boolean` | `undefined` |
| `form` | `form` | Associates the control with a form element. | `string` | `undefined` |
| `invalid` | `invalid` | Set this property to `true` in order to mark the field visually as invalid. | `boolean` | `undefined` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `list` | `list` | Value of the id attribute of the `<datalist>` of autocomplete options. | `string` | `undefined` |
| `max` | `max` | Maximum value. | `number \| string` | `undefined` |
| `maxlength` | `maxlength` | Maximum length (number of characters) of `value`. | `string` | `undefined` |
| `min` | `min` | Minimum value. | `number \| string` | `undefined` |
| `minlength` | `minlength` | Minimum length (number of characters) of `value`. | `string` | `undefined` |
| `multiline` | `multiline` | Uses textarea instead of input internally. Setting this attribute to true disables the attribute type and both slots. | `boolean` | `undefined` |
| `multiple` | `multiple` | Boolean. Whether to allow multiple values. | `boolean` | `undefined` |
| `name` | `name` | Used to specify the name of the control. | `string` | `undefined` |
| `pattern` | `pattern` | Pattern the `value` must match to be valid. | `string` | `undefined` |
| `placeholder` | `placeholder` | The input placeholder. | `string` | `undefined` |
| `readonly` | `readonly` | The value is not editable. | `boolean` | `undefined` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| `required` | `required` | A value is required for the form to be submittable. | `boolean` | `undefined` |
| `rows` | `rows` | The number of rows. | `number` | `undefined` |
| `size` | `size` | Size of the input. | `"lg" \| "sm"` | `undefined` |
| `step` | `step` | Incremental values that are valid. | `string` | `undefined` |
| `tone` | `tone` | Input tone. Use `'dark'` on white backgrounds. Default is a light tone. | `"dark"` | `undefined` |
| `type` | `type` | The input type. | `string` | `undefined` |
| `value` | `value` | The input value. | `string` | `undefined` |
| Property | Attribute | Description | Type | Default |
| -------------- | -------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------- |
| `accept` | `accept` | Hint for expected file type in file upload controls. | `string` | `undefined` |
| `autocomplete` | `autocomplete` | Hint for form autofill feature. | `string` | `undefined` |
| `autofocus` | `autofocus` | Automatically focus the form control when the page is loaded. | `boolean` | `false` |
| `capture` | `capture` | Media capture input method in file upload controls. | `string` | `undefined` |
| `cols` | `cols` | The number of columns. | `number` | `undefined` |
| `dirname` | `dirname` | Name of form field to use for sending the element's directionality in form submission. | `string` | `undefined` |
| `disabled` | `disabled` | Whether the form control is disabled. | `boolean` | `undefined` |
| `form` | `form` | Associates the control with a form element. | `string` | `undefined` |
| `invalid` | `invalid` | Set this property to `true` in order to mark the field visually as invalid. | `boolean` | `undefined` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `list` | `list` | Value of the id attribute of the `<datalist>` of autocomplete options. | `string` | `undefined` |
| `max` | `max` | Maximum value. | `number \| string` | `undefined` |
| `maxlength` | `maxlength` | Maximum length (number of characters) of `value`. | `string` | `undefined` |
| `min` | `min` | Minimum value. | `number \| string` | `undefined` |
| `minlength` | `minlength` | Minimum length (number of characters) of `value`. | `string` | `undefined` |
| `multiline` | `multiline` | Uses textarea instead of input internally. Setting this attribute to true disables the attribute type and both slots. | `boolean` | `undefined` |
| `multiple` | `multiple` | Boolean. Whether to allow multiple values. | `boolean` | `undefined` |
| `name` | `name` | Used to specify the name of the control. | `string` | `undefined` |
| `pattern` | `pattern` | Pattern the `value` must match to be valid. | `string` | `undefined` |
| `placeholder` | `placeholder` | The input placeholder. | `string` | `undefined` |
| `readonly` | `readonly` | The value is not editable. | `boolean` | `undefined` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| `required` | `required` | A value is required for the form to be submittable. | `boolean` | `undefined` |
| `resize` | `resize` | Whether the multiline input is resizable, and if so, in which directions. | `"both" \| "horizontal" \| "none" \| "vertical"` | `'both'` |
| `rows` | `rows` | The number of rows. | `number` | `undefined` |
| `size` | `size` | Size of the input. | `"lg" \| "sm"` | `undefined` |
| `step` | `step` | Incremental values that are valid. | `string` | `undefined` |
| `tone` | `tone` | Input tone. Use `'dark'` on white backgrounds. Default is a light tone. | `"dark"` | `undefined` |
| `type` | `type` | The input type. | `string` | `undefined` |
| `value` | `value` | The input value. | `string` | `undefined` |


## Events
Expand Down
2 changes: 1 addition & 1 deletion src/liquid/components/ld-input/test/__snapshots__/ld-input.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ exports[`ld-input renders as dark input with prop tone set to "dark" 1`] = `
`;
exports[`ld-input renders type file (multiline) 1`] = `
<ld-input class="ld-input" multiline="" type="file">
<ld-input class="ld-input ld-input--resize-both" multiline="" type="file">
<mock:shadow-root><textarea part="input focusable"></textarea>
<span class="ld-input__placeholder" part="placeholder"></span>
</mock:shadow-root>
Expand Down
19 changes: 19 additions & 0 deletions src/liquid/components/ld-input/test/ld-input.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,14 @@ describe('ld-input', () => {
expect(accessibilityReport).toHaveNoAccessibilityIssues()
})

it('web component resize', async () => {
const page = await getPageWithContent(
`<ld-input resize="none" class="resize-none" placeholder="Placeholder" multiline rows="5" cols="33"></ld-input>`
)
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot()
})

it('css component', async () => {
const page = await getPageWithContent(
`<div class="ld-input">
Expand All @@ -270,6 +278,17 @@ describe('ld-input', () => {
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot()
})

it('css component resize', async () => {
const page = await getPageWithContent(
`<div class="ld-input ld-input--resize-none">
<textarea placeholder="Placeholder" rows="5" cols="33"></textarea>
</div>`,
{ components: LdInput }
)
const results = await page.compareScreenshot()
expect(results).toMatchScreenshot()
})
})

describe('aria-disabled', () => {
Expand Down

0 comments on commit 8d699c0

Please sign in to comment.