Skip to content

Commit 92b8581

Browse files
metonymmetonym
authored
fix(text-area)!: disallow resize if cols is specified (#2230)
Fixes #1661
1 parent 97a1261 commit 92b8581

File tree

6 files changed

+57
-28
lines changed

6 files changed

+57
-28
lines changed

‎COMPONENT_INDEX.md‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4066,26 +4066,26 @@ None.
40664066

40674067
### Props
40684068

4069-
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4070-
| :---------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
4071-
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLTextAreaElement</code> | <code>null</code> | Obtain a reference to the textarea HTML element |
4072-
| value | No | <code>let</code> | Yes | <code>null &#124; string</code> | <code>""</code> | Specify the textarea value. |
4073-
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
4074-
| cols | No | <code>let</code> | No | <code>number</code> | <code>50</code> | Specify the number of cols |
4075-
| rows | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Specify the number of rows |
4076-
| maxCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the max character count |
4077-
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
4078-
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
4079-
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant |
4080-
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
4081-
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
4082-
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
4083-
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
4084-
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the text for the invalid state |
4085-
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate a warning state |
4086-
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
4087-
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the textarea element |
4088-
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
4069+
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
4070+
| :---------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
4071+
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLTextAreaElement</code> | <code>null</code> | Obtain a reference to the textarea HTML element |
4072+
| value | No | <code>let</code> | Yes | <code>null &#124; string</code> | <code>""</code> | Specify the textarea value. |
4073+
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
4074+
| cols | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the number of cols.<br />If specified, the textarea will not be resizable.<br />Override this using the `resize` style attribute. |
4075+
| rows | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Specify the number of rows |
4076+
| maxCount | No | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the max character count |
4077+
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
4078+
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the input |
4079+
| readonly | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the read-only variant |
4080+
| helperText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
4081+
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
4082+
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
4083+
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
4084+
| invalidText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the text for the invalid state |
4085+
| warn | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate a warning state |
4086+
| warnText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
4087+
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the textarea element |
4088+
| name | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a name attribute for the input |
40894089

40904090
### Slots
40914091

‎docs/src/COMPONENT_API.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15296,9 +15296,8 @@
1529615296
{
1529715297
"name": "cols",
1529815298
"kind": "let",
15299-
"description": "Specify the number of cols",
15299+
"description": "Specify the number of cols.\nIf specified, the textarea will not be resizable.\nOverride this using the `resize` style attribute.",
1530015300
"type": "number",
15301-
"value": "50",
1530215301
"isFunction": false,
1530315302
"isFunctionDeclaration": false,
1530415303
"isRequired": false,

‎src/TextArea/TextArea.svelte‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,13 @@
88
/** Specify the placeholder text */
99
export let placeholder = "";
1010
11-
/** Specify the number of cols */
12-
export let cols = 50;
11+
/**
12+
* Specify the number of cols.
13+
* If specified, the textarea will not be resizable.
14+
* Override this using the `resize` style attribute.
15+
* @type {number}
16+
*/
17+
export let cols = undefined;
1318
1419
/** Specify the number of rows */
1520
export let rows = 4;
@@ -129,6 +134,7 @@
129134
class:bx--text-area--light={light}
130135
class:bx--text-area--invalid={invalid}
131136
class:bx--text-area--warning={warn}
137+
style:resize={typeof cols === "number" ? "none" : undefined}
132138
maxlength={maxCount ?? undefined}
133139
{...$$restProps}
134140
on:change

‎tests/TextArea/TextArea.test.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
55
export let value: ComponentProps<TextArea>["value"] = "";
66
export let placeholder = "";
7-
export let cols = 50;
7+
export let cols: ComponentProps<TextArea>["cols"] = undefined;
88
export let rows = 4;
99
export let maxCount: ComponentProps<TextArea>["maxCount"] = undefined;
1010
export let light = false;

‎tests/TextArea/TextArea.test.ts‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ describe("TextArea", () => {
88
render(TextArea);
99

1010
expect(screen.getByLabelText("App description")).toBeInTheDocument();
11-
expect(screen.getByRole("textbox")).toHaveAttribute("cols", "50");
11+
expect(screen.getByRole("textbox")).not.toHaveAttribute("cols");
1212
expect(screen.getByRole("textbox")).toHaveAttribute("rows", "4");
1313
});
1414

@@ -149,4 +149,26 @@ describe("TextArea", () => {
149149
"bx--form__helper-text--disabled",
150150
);
151151
});
152+
153+
it("should disable resize when cols is specified", () => {
154+
render(TextArea, { props: { cols: 30 } });
155+
156+
const textarea = screen.getByRole("textbox");
157+
expect(textarea).toHaveStyle({ resize: "none" });
158+
});
159+
160+
it("should allow resize when cols is not specified", () => {
161+
render(TextArea, { props: { cols: undefined } });
162+
163+
const textarea = screen.getByRole("textbox");
164+
const style = window.getComputedStyle(textarea);
165+
expect(style.resize).not.toBe("none");
166+
});
167+
168+
it("should not have default cols value", () => {
169+
render(TextArea, { props: { cols: undefined } });
170+
171+
const textarea = screen.getByRole("textbox");
172+
expect(textarea).not.toHaveAttribute("cols");
173+
});
152174
});

‎types/TextArea/TextArea.svelte.d.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,10 @@ type $Props = {
1717
placeholder?: string;
1818

1919
/**
20-
* Specify the number of cols
21-
* @default 50
20+
* Specify the number of cols.
21+
* If specified, the textarea will not be resizable.
22+
* Override this using the `resize` style attribute.
23+
* @default undefined
2224
*/
2325
cols?: number;
2426

0 commit comments

Comments
 (0)