Skip to content

Commit

Permalink
Merge pull request #637 from takenet/bugfix/fixing-input-chips
Browse files Browse the repository at this point in the history 
fix(input-chips): fixing maxlenght on component
  • Loading branch information
@lucasMurtaVI
lucasMurtaVI authored Jul 21, 2023
2 parents 4ed09f8 + a432beb commit 8272cd2
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 34 deletions.
16 changes: 16 additions & 0 deletions src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -848,6 +848,10 @@ export namespace Components {
* Clear all chips
*/
"clear": () => Promise<void>;
/**
* Passing true to display a counter of available size, it is necessary to pass another maxlength property.
*/
"counterLength"?: boolean;
/**
* Add state danger on input, use for use feedback.
*/
Expand Down Expand Up @@ -900,6 +904,10 @@ export namespace Components {
* label in input, with he the input size increases.
*/
"label"?: string;
/**
* Set maximum length value for chips
*/
"maxChipsLength"?: number;
/**
* Set maximum length value for the chip content
*/
Expand Down Expand Up @@ -3550,6 +3558,10 @@ declare namespace LocalJSX {
* The chips on the component Should be passed this way: chips='["chip1", "chip2"]'
*/
"chips"?: string[] | string;
/**
* Passing true to display a counter of available size, it is necessary to pass another maxlength property.
*/
"counterLength"?: boolean;
/**
* Add state danger on input, use for use feedback.
*/
Expand Down Expand Up @@ -3594,6 +3606,10 @@ declare namespace LocalJSX {
* label in input, with he the input size increases.
*/
"label"?: string;
/**
* Set maximum length value for chips
*/
"maxChipsLength"?: number;
/**
* Set maximum length value for the chip content
*/
Expand Down
2 changes: 2 additions & 0 deletions src/components/counter-text/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
### Used by

- [bds-input](../input)
- [bds-input-chips](../input-chips)

### Depends on

Expand All @@ -31,6 +32,7 @@
graph TD;
bds-counter-text --> bds-typo
bds-input --> bds-counter-text
bds-input-chips --> bds-counter-text
style bds-counter-text fill:#f9f,stroke:#333,stroke-width:4px
```

Expand Down
42 changes: 28 additions & 14 deletions src/components/input-chips/input-chips.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@ export class InputChips {
*/
@Prop() maxlength?: number;

/**
* Set maximum length value for chips
*/
@Prop() maxChipsLength?: number;
/**
* used for add icon in input left. Uses the bds-icon component.
*/
Expand Down Expand Up @@ -112,6 +116,11 @@ export class InputChips {
*/
@Prop() placeholder?: string = '';

/**
* Passing true to display a counter of available size, it is necessary to
* pass another maxlength property.
*/
@Prop() counterLength? = false;
/**
* Data test is the prop to specifically test the component action object.
*/
Expand Down Expand Up @@ -501,22 +510,27 @@ export class InputChips {
{this.renderLabel()}
<div class={{ input__container__wrapper: true }}>
{this.internalChips.length > 0 && <span class="inside-input-left">{this.renderChips()}</span>}
<input
ref={(input) => (this.nativeInput = input)}
class={{ input__container__text: true }}
name={this.inputName}
maxlength={this.maxlength}
placeholder={this.placeholder}
onInput={this.onInput}
onFocus={this.onFocus}
onBlur={() => this.handleOnBlur()}
onChange={() => this.handleChange}
value={this.value}
disabled={this.disabled}
data-test={this.dataTest}
></input>
{this.internalChips.length < this.maxChipsLength && (
<input
ref={(input) => (this.nativeInput = input)}
class={{ input__container__text: true }}
name={this.inputName}
maxlength={this.maxlength}
placeholder={this.placeholder}
onInput={this.onInput}
onFocus={this.onFocus}
onBlur={() => this.handleOnBlur()}
onChange={() => this.handleChange}
value={this.value}
disabled={this.disabled}
data-test={this.dataTest}
></input>
)}
</div>
</div>
{this.counterLength && (
<bds-counter-text length={this.internalChips.length} max={this.maxChipsLength} active={isPressed} />
)}
{this.success && <bds-icon class="icon-success" name="checkball" theme="solid" size="xxx-small" />}
<slot name="input-right"></slot>
</div>
Expand Down
45 changes: 25 additions & 20 deletions src/components/input-chips/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,28 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ---------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------- | -------------------- | ----------- |
| `chips` | `chips` | The chips on the component Should be passed this way: chips='["chip1", "chip2"]' | `string \| string[]` | `[]` |
| `danger` | `danger` | Add state danger on input, use for use feedback. | `boolean` | `false` |
| `dataTest` | `data-test` | Data test is the prop to specifically test the component action object. | `string` | `null` |
| `delimiters` | -- | The delimiter is used to add multiple chips in the same string. | `RegExp` | `/,\|;/` |
| `disableSubmit` | `disable-submit` | If `true`, the user cannot modify the value. | `boolean` | `false` |
| `disabled` | `disabled` | Disabled input | `boolean` | `false` |
| `duplicated` | `duplicated` | Do not accept duplicate chip elements. | `boolean` | `false` |
| `errorMessage` | `error-message` | Indicated to pass an feedback to user. | `string` | `''` |
| `helperMessage` | `helper-message` | Indicated to pass a help the user in complex filling. | `string` | `''` |
| `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` |
| `inputName` | `input-name` | Prop to insert the name of the input | `string` | `''` |
| `label` | `label` | label in input, with he the input size increases. | `string` | `''` |
| `maxlength` | `maxlength` | Set maximum length value for the chip content | `number` | `undefined` |
| `placeholder` | `placeholder` | A tip for the user who can enter no controls. | `string` | `''` |
| `success` | `success` | Add state success on input, use for use feedback. | `boolean` | `false` |
| `successMessage` | `success-message` | Indicated to pass an feeback to user. | `string` | `''` |
| `type` | `type` | Defining the type is important so that it is possible to carry out validations. Can be one of: 'text' and 'email; | `"email" \| "text"` | `'text'` |
| `value` | `value` | The value of the input. | `string` | `''` |
| Property | Attribute | Description | Type | Default |
| ---------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------- | ----------- |
| `chips` | `chips` | The chips on the component Should be passed this way: chips='["chip1", "chip2"]' | `string \| string[]` | `[]` |
| `counterLength` | `counter-length` | Passing true to display a counter of available size, it is necessary to pass another maxlength property. | `boolean` | `false` |
| `danger` | `danger` | Add state danger on input, use for use feedback. | `boolean` | `false` |
| `dataTest` | `data-test` | Data test is the prop to specifically test the component action object. | `string` | `null` |
| `delimiters` | -- | The delimiter is used to add multiple chips in the same string. | `RegExp` | `/,\|;/` |
| `disableSubmit` | `disable-submit` | If `true`, the user cannot modify the value. | `boolean` | `false` |
| `disabled` | `disabled` | Disabled input | `boolean` | `false` |
| `duplicated` | `duplicated` | Do not accept duplicate chip elements. | `boolean` | `false` |
| `errorMessage` | `error-message` | Indicated to pass an feedback to user. | `string` | `''` |
| `helperMessage` | `helper-message` | Indicated to pass a help the user in complex filling. | `string` | `''` |
| `icon` | `icon` | used for add icon in input left. Uses the bds-icon component. | `string` | `''` |
| `inputName` | `input-name` | Prop to insert the name of the input | `string` | `''` |
| `label` | `label` | label in input, with he the input size increases. | `string` | `''` |
| `maxChipsLength` | `max-chips-length` | Set maximum length value for chips | `number` | `undefined` |
| `maxlength` | `maxlength` | Set maximum length value for the chip content | `number` | `undefined` |
| `placeholder` | `placeholder` | A tip for the user who can enter no controls. | `string` | `''` |
| `success` | `success` | Add state success on input, use for use feedback. | `boolean` | `false` |
| `successMessage` | `success-message` | Indicated to pass an feeback to user. | `string` | `''` |
| `type` | `type` | Defining the type is important so that it is possible to carry out validations. Can be one of: 'text' and 'email; | `"email" \| "text"` | `'text'` |
| `value` | `value` | The value of the input. | `string` | `''` |


## Events
Expand Down Expand Up @@ -124,6 +126,7 @@ Type: `Promise<void>`
- [bds-tooltip](../tooltip)
- [bds-icon](../icon)
- [bds-typo](../typo)
- [bds-counter-text](../counter-text)

### Graph
```mermaid
Expand All @@ -132,12 +135,14 @@ graph TD;
bds-input-chips --> bds-tooltip
bds-input-chips --> bds-icon
bds-input-chips --> bds-typo
bds-input-chips --> bds-counter-text
bds-chip-clickable --> bds-icon
bds-chip-clickable --> bds-avatar
bds-chip-clickable --> bds-typo
bds-avatar --> bds-typo
bds-avatar --> bds-icon
bds-tooltip --> bds-typo
bds-counter-text --> bds-typo
bds-test-component --> bds-input-chips
style bds-input-chips fill:#f9f,stroke:#333,stroke-width:4px
```
Expand Down
1 change: 1 addition & 0 deletions src/components/test-component/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ graph TD;
bds-input-chips --> bds-tooltip
bds-input-chips --> bds-icon
bds-input-chips --> bds-typo
bds-input-chips --> bds-counter-text
bds-tooltip --> bds-typo
bds-input-editable --> bds-icon
bds-input-editable --> bds-typo
Expand Down

0 comments on commit 8272cd2

Please sign in to comment.