Skip to content

Commit

Permalink
feat: make #textarea support #form-row and add new property stretch
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Jul 4, 2019
1 parent c4f4397 commit 9dcdc94
Show file tree
Hide file tree
Showing 13 changed files with 167 additions and 74 deletions.
32 changes: 15 additions & 17 deletions packages/dnb-design-system-portal/src/pages/uilib/components/textarea/Examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,27 +36,25 @@ class Example extends PureComponent {
/>
`}
</ComponentBox>
<ComponentBox caption="Vertical placed label, using the `FormRow` component">
<ComponentBox caption="Vertical placed label">
{/* @jsx */ `
<FormRow vertical={true}>
<Textarea
label="Vertical:"
rows="3"
cols="33"
value="Textarea value with more than 3 lines\\nNewline\\nNewline\\nNewline\\nNewline"
/>
</FormRow>
<Textarea
label="Vertical:"
label_direction="vertical"
rows="3"
cols="33"
value="Textarea value with more than 3 lines\\nNewline\\nNewline\\nNewline\\nNewline"
/>
`}
</ComponentBox>
<ComponentBox caption="Horizontal placed label, using the `FormRow` component">
<ComponentBox caption="Stretched horizontal placed label">
{/* @jsx */ `
<FormRow>
<Textarea
label="Horizontal:"
rows="3"
value="Nec litora inceptos vestibulum id interdum donec gravida."
/>
</FormRow>
<Textarea
label="Horizontal:"
stretch="true"
rows="3"
value="Nec litora inceptos vestibulum id interdum donec gravida."
/>
`}
</ComponentBox>
<ComponentBox caption="Max length usage">
Expand Down
22 changes: 12 additions & 10 deletions ...design-system-portal/src/pages/uilib/components/textarea/textarea-properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@
draft: true
---

| Properties | Description |
| ---------------- | -------------------------------------------------------------------------------------------------------------------- |
| `value` | _(optional)_ the content value of the textarea. |
| `align` | _(optional)_ defines the `text-align` of the textarea. Defaults to `left`. |
| `placeholder` | _(optional)_ the placeholder which shows up once the textarea value is empty |
| `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. textarea. |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. |
| `status_state` | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`. |
| `textarea_state` | _(optional)_ to control the visual focus state as a prop, like `focus` or `blur`. |
| `textarea_class` | _(optional)_ in case we have to set a custom textarea class. |
| Properties | Description |
| ----------------- | -------------------------------------------------------------------------------------------------------------------- |
| `value` | _(optional)_ the content value of the textarea. |
| `align` | _(optional)_ defines the `text-align` of the textarea. Defaults to `left`. |
| `stretch` | _(optional)_ if set to `true`, then the textarea field will be 100% in `width`. |
| `placeholder` | _(optional)_ the placeholder which shows up once the textarea value is empty |
| `label` | _(optional)_ prepends the Form Label component. If no ID is provided, a random ID is created. textarea. |
| `label_direction` | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal` |
| `status` | _(optional)_ text with a status message. The style defaults to an error message. |
| `status_state` | _(optional)_ defines the state of the status. Currently there are two statuses `[error, info]`. Defaults to `error`. |
| `textarea_state` | _(optional)_ to control the visual focus state as a prop, like `focus` or `blur`. |
| `textarea_class` | _(optional)_ in case we have to set a custom textarea class. |
2 changes: 1 addition & 1 deletion packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -555,7 +555,7 @@ export default class DatePicker extends PureComponent {
opened && 'dnb-date-picker--opened',
hidden && 'dnb-date-picker--hidden',
showInput && 'dnb-date-picker--show-input',
status && `dnb-date-picker__status--${status_state}`,
// status && `dnb-date-picker__status--${status_state}`,
(isTrue(show_submit_button) || isTrue(show_cancel_button)) &&
'dnb-date-picker--show-footer'
)}
Expand Down
8 changes: 3 additions & 5 deletions ...ges/dnb-ui-lib/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ exports[`DatePicker component have to match snapshot 1`] = `
className="dnb-date-picker__wrapper dnb-date-picker__status--error"
>
<span
className="dnb-date-picker dnb-date-picker--hidden dnb-date-picker--show-input dnb-date-picker__status--error dnb-date-picker--show-footer"
className="dnb-date-picker dnb-date-picker--hidden dnb-date-picker--show-input dnb-date-picker--show-footer"
date="2019-01-01T00:00:00.000Z"
>
<span
Expand Down Expand Up @@ -1508,16 +1508,14 @@ legend.dnb-form-label {
margin-top: 0.5rem; }
.dnb-input--stretch .dnb-input {
flex: 1; }
.dnb-input--stretch .dnb-input__shell {
width: 100%; }
.dnb-input--stretch .dnb-input, .dnb-input--stretch .dnb-input__shell, .dnb-input--stretch .dnb-input__input {
width: 100%; }
.dnb-input__wrapper {
display: inline-flex;
align-items: center; }
.dnb-input__wrapper.dnb-input--vertical {
align-items: flex-start;
flex-direction: column; }
.dnb-input__wrapper.dnb-input--vertical.dnb-input--stretch .dnb-input {
width: 100%; }
.dnb-input__wrapper.dnb-input--stretch {
display: flex; }
.dnb-input__wrapper[class*='__status'] {
Expand Down
6 changes: 2 additions & 4 deletions ...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -698,16 +698,14 @@ legend.dnb-form-label {
margin-top: 0.5rem; }
.dnb-input--stretch .dnb-input {
flex: 1; }
.dnb-input--stretch .dnb-input__shell {
width: 100%; }
.dnb-input--stretch .dnb-input, .dnb-input--stretch .dnb-input__shell, .dnb-input--stretch .dnb-input__input {
width: 100%; }
.dnb-input__wrapper {
display: inline-flex;
align-items: center; }
.dnb-input__wrapper.dnb-input--vertical {
align-items: flex-start;
flex-direction: column; }
.dnb-input__wrapper.dnb-input--vertical.dnb-input--stretch .dnb-input {
width: 100%; }
.dnb-input__wrapper.dnb-input--stretch {
display: flex; }
.dnb-input__wrapper[class*='__status'] {
Expand Down
6 changes: 2 additions & 4 deletions packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1106,16 +1106,14 @@ legend.dnb-form-label {
margin-top: 0.5rem; }
.dnb-input--stretch .dnb-input {
flex: 1; }
.dnb-input--stretch .dnb-input__shell {
width: 100%; }
.dnb-input--stretch .dnb-input, .dnb-input--stretch .dnb-input__shell, .dnb-input--stretch .dnb-input__input {
width: 100%; }
.dnb-input__wrapper {
display: inline-flex;
align-items: center; }
.dnb-input__wrapper.dnb-input--vertical {
align-items: flex-start;
flex-direction: column; }
.dnb-input__wrapper.dnb-input--vertical.dnb-input--stretch .dnb-input {
width: 100%; }
.dnb-input__wrapper.dnb-input--stretch {
display: flex; }
.dnb-input__wrapper[class*='__status'] {
Expand Down
11 changes: 5 additions & 6 deletions packages/dnb-ui-lib/src/components/input/style/_input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,9 +192,11 @@
// make the input full width
&--stretch & {
flex: 1;
}
&--stretch &__shell {
width: 100%;
&,
&__shell,
&__input {
width: 100%;
}
}

// Wrapper layout handling
Expand All @@ -206,9 +208,6 @@
align-items: flex-start;
flex-direction: column;
}
&__wrapper#{&}--vertical#{&}--stretch .dnb-input {
width: 100%;
}
&__wrapper#{&}--stretch {
display: flex;
}
Expand Down
25 changes: 21 additions & 4 deletions packages/dnb-ui-lib/src/components/textarea/Textarea.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ import {
dispatchCustomElementEvent
} from '../../shared/component-helper'

import Context from '../../shared/Context'

const renderProps = {
on_change: null,
on_focus: null,
Expand All @@ -28,12 +30,14 @@ export const propTypes = {
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
id: PropTypes.string,
label: PropTypes.string,
label_direction: PropTypes.oneOf(['horizontal', 'vertical']),
status: PropTypes.string,
textarea_state: PropTypes.string,
status_state: PropTypes.string,
status_animation: PropTypes.string,
placeholder: PropTypes.string,
align: PropTypes.oneOf(['left', 'right']),
stretch: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
class: PropTypes.string,
textarea_class: PropTypes.string,
Expand Down Expand Up @@ -63,12 +67,14 @@ export const defaultProps = {
value: null,
id: null,
label: null,
label_direction: null,
status: null,
textarea_state: null,
status_state: 'error',
status_animation: null,
placeholder: null,
align: null,
stretch: null,
disabled: null,
textarea_class: null,
class: null,
Expand Down Expand Up @@ -96,6 +102,7 @@ export default class Textarea extends PureComponent {
static propTypes = propTypes
static defaultProps = defaultProps
static renderProps = renderProps
static contextType = Context

static enableWebComponent() {
registerElement(Textarea.tagName, Textarea, defaultProps)
Expand Down Expand Up @@ -176,10 +183,12 @@ export default class Textarea extends PureComponent {

const {
label,
label_direction,
status,
status_state,
status_animation,
disabled,
stretch,
placeholder,
align,
textarea_class,
Expand All @@ -205,8 +214,6 @@ export default class Textarea extends PureComponent {
`dnb-textarea--${textareaState}`,
String(value || '').length > 0 && 'dnb-textarea--has-content',
align && `dnb-textarea__align--${align}`,
showStatus && 'dnb-textarea__form-status',
status && `dnb-textarea__status--${status_state}`,
_className,
className
)
Expand Down Expand Up @@ -246,6 +253,15 @@ export default class Textarea extends PureComponent {
shellParams['aria-disabled'] = true
}

const wrapperParams = {
className: classnames(
'dnb-textarea__wrapper',
status && `dnb-textarea__status--${status_state}`,
label_direction && `dnb-textarea--${label_direction}`,
isTrue(stretch) && `dnb-textarea--stretch`
)
}

// to show the ending dots on a placeholder, if the text is longer
const placeholderStyle =
parseFloat(this.props.rows) > 0
Expand All @@ -266,13 +282,14 @@ export default class Textarea extends PureComponent {
}

return (
<>
<span {...wrapperParams}>
{label && (
<FormLabel
id={id + '-label'}
for_id={id}
text={label}
disabled={disabled}
direction={label_direction}
/>
)}
<span role="textbox" className={classes}>
Expand Down Expand Up @@ -304,7 +321,7 @@ export default class Textarea extends PureComponent {
/>
)}
</span>
</>
</span>
)
}
}
Loading

0 comments on commit 9dcdc94

Please sign in to comment.