Skip to content

Commit

Permalink
Revert "fix: pass defaultValue in to textarea and text input initia…
Browse files Browse the repository at this point in the history 
…l state" (#3106)

* Revert "fix: pass `defaultValue` in to textarea and text input initial state (#3015)"

This reverts commit d563edf.

* Revert "feat: text input and textarea character limit counter (#2745)"

This reverts commit 919ba2e.
  • Loading branch information
@emyarod @asudoh
emyarod authored and asudoh committed Jun 20, 2019
1 parent 17602f6 commit 8823fe5
Show file tree
Hide file tree
Showing 18 changed files with 1,179 additions and 4,373 deletions.
33 changes: 0 additions & 33 deletions packages/components/src/components/text-area/_text-area.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,6 @@
/// @access private
/// @group text-area
@mixin text-area {
.#{$prefix}--text-area__container {
position: relative;
}

.#{$prefix}--text-area {
@include reset;
@include type-style('body-long-01');
Expand Down Expand Up @@ -82,7 +78,6 @@
.#{$prefix}--text-area__wrapper {
position: relative;
display: flex;
width: 100%;
}

.#{$prefix}--text-area__invalid-icon {
Expand All @@ -92,34 +87,6 @@
fill: $support-01;
}

// -----------------
// Character counter
// -----------------
.#{$prefix}--text-area__character-counter-title {
display: flex;
justify-content: space-between;
width: 100%;
}

.#{$prefix}--text-area__character-counter-title .#{$prefix}--label {
margin-right: rem(16px);
}

.#{$prefix}--text-area__character-counter-title
+ .#{$prefix}--form__helper-text {
margin-top: rem(-6px);
}

.#{$prefix}--text-area--character-counter {
margin-bottom: $carbon--spacing-03;
@include type-style('label-01');
color: $text-02;
}

.#{$prefix}--text-area--character-counter--disabled {
color: $disabled-02;
}

//-----------------------------
// Disabled
//-----------------------------
Expand Down
17 changes: 0 additions & 17 deletions packages/components/src/components/text-area/text-area.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,22 +29,5 @@ module.exports = {
light: true,
},
},
{
name: 'character-counter',
label: 'Text area with character counter',
context: {
charCounter: true,
maxLength: 3500,
},
},
{
name: 'character-counter--light',
label: 'Text area with character counter (light)',
context: {
charCounter: true,
maxLength: 3500,
light: true,
},
},
],
};
92 changes: 26 additions & 66 deletions packages/components/src/components/text-area/text-area.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,87 +5,47 @@
LICENSE file in the root directory of this source tree.
-->

<div data-text-area class="{{prefix}}--form-item{{#if charCounter}} {{prefix}}--text-area__container{{/if}}">
{{#if charCounter}}
<div class="{{prefix}}--text-area__character-counter-title">
<label for="text-area-2" class="{{prefix}}--label">Text Area label</label>
<span class="{{prefix}}--text-area--character-counter">
<span class="{{prefix}}--text-area--character-counter--length">0</span>/<span
class="{{prefix}}--text-area--character-counter--maxlength">{{maxLength}}</span>
</span>
</div>
{{else}}
<label for="text-area-2" class="{{prefix}}--label">Text Area label</label>
{{/if}}
<div class="{{prefix}}--text-area__wrapper">
<textarea id="text-area-2" class="{{prefix}}--text-area {{#if light}} {{prefix}}--text-area--light{{/if}}" rows="4"
cols="50" placeholder="Placeholder text." {{#if charCounter}} maxlength="{{maxLength}}" {{/if}}></textarea>
<div class="{{@root.prefix}}--form-item">
<label for="text-area-2" class="{{@root.prefix}}--label">Text Area label</label>
<div class="{{@root.prefix}}--text-area__wrapper">
<textarea id="text-area-2"
class="{{@root.prefix}}--text-area {{@root.prefix}}--text-area--v2{{#if light}} {{@root.prefix}}--text-area--light{{/if}}"
rows="4" cols="50" placeholder="Placeholder text."></textarea>
</div>
</div>

<div data-text-area class="{{prefix}}--form-item{{#if charCounter}} {{prefix}}--text-area__container{{/if}}">
{{#if charCounter}}
<div class="{{prefix}}--text-area__character-counter-title">
<label for="text-area-3" class="{{prefix}}--label">Text Area label</label>
<span class="{{prefix}}--text-area--character-counter">
<span class="{{prefix}}--text-area--character-counter--length">0</span>/<span
class="{{prefix}}--text-area--character-counter--maxlength">{{maxLength}}</span>
</span>
</div>
{{else}}
<label for="text-area-3" class="{{prefix}}--label">Text Area label</label>
{{/if}}
<div class="{{prefix}}--text-area__wrapper" data-invalid>
{{ carbon-icon 'WarningFilled16' class=(add prefix '--text-area__invalid-icon')}}
<div class="{{@root.prefix}}--form-item">
<label for="text-area-3" class="{{@root.prefix}}--label">Text Area label</label>
<div class="{{@root.prefix}}--text-area__wrapper" data-invalid>
{{ carbon-icon 'WarningFilled16' class=(add @root.prefix '--text-area__invalid-icon')}}
<textarea id="text-area-3"
class="{{prefix}}--text-area {{prefix}}--text-area--invalid {{#if light}} {{prefix}}--text-area--light{{/if}}"
rows="4" cols="50" placeholder="Placeholder text." {{#if charCounter}} maxlength="{{maxLength}}"
{{/if}}></textarea>
class="{{@root.prefix}}--text-area {{@root.prefix}}--text-area--invalid {{@root.prefix}}--text-area--v2{{#if light}} {{@root.prefix}}--text-area--light{{/if}}"
rows="4" cols="50" placeholder="Placeholder text."></textarea>
</div>
<div class="{{prefix}}--form-requirement">
<div class="{{@root.prefix}}--form-requirement">
Validation message here
</div>
</div>

<div data-text-area class="{{prefix}}--form-item{{#if charCounter}} {{prefix}}--text-area__container{{/if}}">
{{#if charCounter}}
<div class="{{prefix}}--text-area__character-counter-title">
<label for="text-area-4" class="{{prefix}}--label">Text Area label</label>
<span class="{{prefix}}--text-area--character-counter">
<span class="{{prefix}}--text-area--character-counter--length">0</span>/<span
class="{{prefix}}--text-area--character-counter--maxlength">{{maxLength}}</span>
</span>
</div>
{{else}}
<label for="text-area-4" class="{{prefix}}--label">Text Area label</label>
{{/if}}
<div class="{{prefix}}--form__helper-text">
<div class="{{@root.prefix}}--form-item">
<label for="text-area-4" class="{{@root.prefix}}--label">Text Area label</label>
<div class="{{@root.prefix}}--form__helper-text">
Optional helper text goes here
</div>
<div class="{{prefix}}--text-area__wrapper">
<textarea id="text-area-4" class="{{prefix}}--text-area {{#if light}} {{prefix}}--text-area--light{{/if}}" rows="4"
cols="50" placeholder="Placeholder text." {{#if charCounter}} maxlength="{{maxLength}}" {{/if}}></textarea>
<div class="{{@root.prefix}}--text-area__wrapper">
<textarea id="text-area-4"
class="{{@root.prefix}}--text-area {{@root.prefix}}--text-area--v2{{#if light}} {{@root.prefix}}--text-area--light{{/if}}"
rows="4" cols="50" placeholder="Placeholder text."></textarea>
</div>
</div>

<div data-text-area class="{{prefix}}--form-item{{#if charCounter}} {{prefix}}--text-area__container{{/if}}">
{{#if charCounter}}
<div class="{{prefix}}--text-area__character-counter-title">
<label for="text-area-5" class="{{prefix}}--label {{prefix}}--label--disabled">Text Area label</label>
<span class="{{prefix}}--text-area--character-counter {{prefix}}--text-area--character-counter--disabled">
<span class="{{prefix}}--text-area--character-counter--length">0</span>/<span
class="{{prefix}}--text-area--character-counter--maxlength">{{maxLength}}</span>
</span>
</div>
{{else}}
<label for="text-area-5" class="{{prefix}}--label {{prefix}}--label--disabled">Text Area label</label>
{{/if}}
<div class="{{prefix}}--form__helper-text {{prefix}}--form__helper-text--disabled">
<div class="bx--form-item">
<label for="text-area-5" class="bx--label bx--label--disabled">Text Area label</label>
<div class="{{@root.prefix}}--form__helper-text {{@root.prefix}}--form__helper-text--disabled">
Optional helper text goes here
</div>
<div class="{{prefix}}--text-area__wrapper">
<textarea id="text-area-5" class="{{prefix}}--text-area {{#if light}} {{prefix}}--text-area--light{{/if}}" rows="4"
cols="50" placeholder="Placeholder text." disabled{{#if charCounter}} maxlength="{{maxLength}}"
{{/if}}></textarea>
<div class="{{@root.prefix}}--text-area__wrapper">
<textarea id="text-area-5" class="bx--text-area bx--text-area--v2{{#if light}} bx--text-area--light{{/if}}" rows="4"
cols="50" placeholder="Placeholder text." disabled></textarea>
</div>
</div>
74 changes: 0 additions & 74 deletions packages/components/src/components/text-area/text-area.js
View file

This file was deleted.

29 changes: 0 additions & 29 deletions packages/components/src/components/text-input/_text-input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,41 +56,12 @@
background-color: $field-02;
}

// -----------------
// Character counter
// -----------------
.#{$prefix}--text-input__character-counter-title {
display: flex;
justify-content: space-between;
width: 100%;
}

.#{$prefix}--text-input__character-counter-title
+ .#{$prefix}--form__helper-text {
margin-top: rem(-6px);
}

.#{$prefix}--text-input__character-counter-title .#{$prefix}--label {
margin-right: rem(16px);
}

.#{$prefix}--text-input--character-counter {
margin-bottom: $carbon--spacing-03;
@include type-style('label-01');
color: $text-02;
}

.#{$prefix}--text-input--character-counter--disabled {
color: $disabled-02;
}

//-----------------------------
// Disabled & Error icon spacing
//-----------------------------
.#{$prefix}--text-input__field-wrapper {
position: relative;
display: flex;
width: 100%;
align-items: center;

.#{$prefix}--text-input__invalid-icon {
Expand Down
36 changes: 0 additions & 36 deletions packages/components/src/components/text-input/text-input.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,23 +30,6 @@ module.exports = {
light: true,
},
},
{
name: 'character-counter',
label: 'Text Input with character counter',
context: {
charCounter: true,
maxLength: 100,
},
},
{
name: 'character-counter--light',
label: 'Text Input with character counter (light)',
context: {
charCounter: true,
maxLength: 100,
light: true,
},
},
{
name: 'password',
label: 'Password Input',
Expand All @@ -62,24 +45,5 @@ module.exports = {
password: true,
},
},
{
name: 'password--character-counter',
label: 'Password Input with character counter',
context: {
charCounter: true,
maxLength: 100,
password: true,
},
},
{
name: 'password--light--character-counter',
label: 'Password Input with character counter (Light)',
context: {
charCounter: true,
maxLength: 100,
light: true,
password: true,
},
},
],
};
Loading

0 comments on commit 8823fe5

Please sign in to comment.