Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(textarea): add horizontal and vertical resize variants #2331

Merged
merged 2 commits into from Oct 10, 2019
Merged

feat(textarea): add horizontal and vertical resize variants #2331

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
649f7f2
feat(formcontrol): add horizontal and vertical resize variants
mcoker Oct 10, 2019
30b3f48
chore(formcontrol): update to new MDX format
mcoker Oct 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
38 changes: 27 additions & 11 deletions src/patternfly/components/FormControl/examples/FormControl.md
View file
Open in desktop
Expand Up @@ -6,16 +6,16 @@ cssPrefix: pf-c-form-control

## Examples
```hbs title=Input
{{#> form-control controlType="input" input="true" form-control--attribute='disabled type="text" value="disabled" id="textInput1" aria-label="disabled input example"'}}
{{#> form-control controlType="input" input="true" form-control--attribute='type="text" value="Standard" id="textInput2" aria-label="Standard input example"'}}
{{/form-control}}
<br />
{{#> form-control controlType="input" input="true" form-control--attribute='type="text" value="standard" id="textInput2" aria-label="standard input example"'}}
<br /><br />
{{#> form-control controlType="input" input="true" form-control--attribute='readonly type="text" value="Readonly" id="textInput3" aria-label="Readonly input example"'}}
{{/form-control}}
<br />
{{#> form-control controlType="input" input="true" form-control--attribute='readonly type="text" value="readonly" id="textInput3" aria-label="readonly input example"'}}
<br /><br />
{{#> form-control controlType="input" input="true" form-control--attribute='required type="text" value="Error" id="textInput4" aria-invalid="true" aria-label="Error state input example"'}}
{{/form-control}}
<br />
{{#> form-control controlType="input" input="true" form-control--attribute='required type="text" value="error" id="textInput4" aria-invalid="true" aria-label="Error state input example"'}}
<br /><br />
{{#> form-control controlType="input" input="true" form-control--attribute='disabled type="text" value="Disabled" id="textInput1" aria-label="Disabled input example"'}}
{{/form-control}}
```

Expand All @@ -29,7 +29,7 @@ cssPrefix: pf-c-form-control
<option value="Dr">Dr</option>
<option value="Other">Other</option>
{{/form-control}}
<br />
<br /><br />
{{#> form-control controlType="select" form-control--attribute='id="selectExample2" name="selectExample2" aria-label="select group example"'}}
<optgroup label="Group 1">
<option value="Option 1">The first option</option>
Expand All @@ -40,7 +40,7 @@ cssPrefix: pf-c-form-control
<option value="Option 4">The fourth option</option>
</optgroup>
{{/form-control}}
<br />
<br /><br />
{{#> form-control controlType="select" form-control--attribute='required aria-invalid="true" id="selectExample3" name="selectExample3" aria-label="error state select group example"'}}
<option value="">Make selection</option>
<optgroup label="Group 1">
Expand All @@ -55,10 +55,24 @@ cssPrefix: pf-c-form-control
```

```hbs title=Textarea
{{#> form-control controlType="textarea" form-control--attribute='name="textarea" id="textarea1" aria-label="textarea example"'}}
{{#> form-control controlType="textarea" form-control--attribute='name="textarea" id="textarea1" aria-label="Standard textarea example"'}}
Standard
{{/form-control}}
<br />
<br /><br />
{{#> form-control controlType="textarea" form-control--attribute='readonly name="textarea" id="textarea2" aria-label="Readonly textarea example"'}}
Readonly
{{/form-control}}
<br /><br />
{{#> form-control controlType="textarea" form-control--attribute='required name="textarea" id="textarea2" aria-label="Error state textarea example" aria-invalid="true"'}}
Error
{{/form-control}}
<br /><br />
{{#> form-control controlType="textarea" form-control--attribute='name="textarea" id="textarea3" aria-label="Resize vertical textarea example"' form-control--modifier="pf-m-resize-vertical"}}
Resizes vertically
{{/form-control}}
<br /><br />
{{#> form-control controlType="textarea" form-control--attribute='name="textarea" id="textarea4" aria-label="Resize horizontal textarea example"' form-control--modifier="pf-m-resize-horizontal"}}
Resizes horizontally
{{/form-control}}
```

Expand All @@ -70,3 +84,5 @@ Input, textarea, and select are provided in the form controls component for use
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-c-form-control` | `<input>`,`<textarea>`, `<select>` | Initiates an input, textarea or select. For styling of checkboxes or radios see the [check component](../../Check/examples/). **Required** |
| `.pf-m-resize-vertical` | `textarea.pf-m-form-control` | Modifies a `<textarea>` element to resize vertically. |
| `.pf-m-resize-horizontal` | `textarea.pf-m-form-control` | Modifies a `<textarea>` element to resize horizontally. |
8 changes: 8 additions & 0 deletions src/patternfly/components/FormControl/form-control.scss
View file
Open in desktop
Expand Up @@ -151,4 +151,12 @@ $pf-c-form-control__select--ViewBox: "320" !default;
--pf-c-form-control--invalid--Background: var(--pf-c-form-control__select--invalid--Background);
}
}

&.pf-m-resize-vertical {
resize: vertical;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe a min-height here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mceledonia what about a min-height when you can resize it vertically to prevent sizing it down too short?


&.pf-m-resize-horizontal {
resize: horizontal;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add max-width: 100% and a min-width to this?

Copy link
Contributor Author

@mcoker mcoker Oct 9, 2019 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mceledonia should we add a min-width to the textarea when you can resize it horizontally, to prevent sizing it down too narrow?

}