Skip to content

Commit

Permalink
feat(textarea): add new bq-textarea component (#393)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dgonzalezr
dgonzalezr committed Aug 18, 2023
1 parent 5e0eddc commit f51b25f
Show file tree
Hide file tree
Showing 11 changed files with 1,061 additions and 2 deletions.
2 changes: 1 addition & 1 deletion packages/bee-q/project.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"configPath": "packages/bee-q/stencil.config.ts",
"outputPath": "dist/bee-q",
"watch": true,
"dev": true
"dev": false
}
},
"storybook-start": {
Expand Down
193 changes: 193 additions & 0 deletions packages/bee-q/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { TSpinnerSize, TSpinnerTextPosition } from "./components/spinner/bq-spin
import { TStatusType } from "./components/status/bq-status.types";
import { TSwitchInnerLabel, TSwitchJustifyContent } from "./components/switch/bq-swithc.types";
import { TTabSize } from "./components/tab/bq-tab.types";
import { TTextareaAutoCapitalize, TTextareaWrap } from "./components/textarea/bq-textarea.types";
import { TToastPlacement, TToastType } from "./components/toast/bq-toast.types";
import { FloatingUIPlacement } from "./services/interfaces";
export { TAvatarShape, TAvatarSize } from "./components/avatar/bq-avatar.types";
Expand All @@ -37,6 +38,7 @@ export { TSpinnerSize, TSpinnerTextPosition } from "./components/spinner/bq-spin
export { TStatusType } from "./components/status/bq-status.types";
export { TSwitchInnerLabel, TSwitchJustifyContent } from "./components/switch/bq-swithc.types";
export { TTabSize } from "./components/tab/bq-tab.types";
export { TTextareaAutoCapitalize, TTextareaWrap } from "./components/textarea/bq-textarea.types";
export { TToastPlacement, TToastType } from "./components/toast/bq-toast.types";
export { FloatingUIPlacement } from "./services/interfaces";
export namespace Components {
Expand Down Expand Up @@ -741,6 +743,85 @@ export namespace Components {
*/
"value": string;
}
interface BqTextarea {
/**
* If `true`, the textarea will automatically grow and shrink to fit its contents. If `false`, the textarea will have a fixed height specified by the `rows` property.
*/
"autoGrow": boolean;
/**
* Controls whether or not the textarea field should be capitalized and how. Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
*/
"autocapitalize": TTextareaAutoCapitalize;
/**
* Specifies whether or not the textarea field should have autocomplete enabled. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
*/
"autocomplete": string;
/**
* Controls whether or not the textarea field should have autocorrect enabled. Possible values are 'on' and 'off'.
*/
"autocorrect": 'on' | 'off';
/**
* If true, the textarea will be focused on component render
*/
"autofocus": boolean;
/**
* The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes. A value of 0 means no debouncing will occur.
*/
"debounceTime"?: number;
/**
* If `true`, it will block the user's ability to resize the textarea.
*/
"disableResize"?: boolean;
/**
* If `true`, the user cannot interact with the textarea.
*/
"disabled": boolean;
/**
* The ID of the form that the textarea field belongs to.
*/
"form"?: string;
/**
* The maximum number of characters that can be entered into the textarea (`0`: no limit). When enabled, a character counter will be shown underneath the textarea.
*/
"maxlength": number;
/**
* The name of the textarea element.
*/
"name": string;
/**
* The placeholder text to show when there is no value.
*/
"placeholder": string;
/**
* If true, the textarea field cannot be modified.
*/
"readonly"?: boolean;
/**
* Indicates whether or not the textarea field is required to be filled out before submitting the form.
*/
"required"?: boolean;
/**
* The number of visible text lines for the control. It must be a positive integer.
*/
"rows": number;
/**
* If true, the textarea content may be checked for spelling errors.
*/
"spellcheck": boolean;
/**
* The validation status of the textarea.
* @remarks This property is used to indicate the validation status of the textarea. It can be set to one of the following values: - `'none'`: No validation status is set. - `'error'`: The textarea has a validation error. - `'warning'`: The textarea has a validation warning. - `'success'`: The textarea has passed validation.
*/
"validationStatus": TInputValidation;
/**
* The value of the textarea. It can be used to reset the textarea to a previous value.
*/
"value": string;
/**
* Specifies how the text in a text area is to be wrapped when submitted in a form
*/
"wrap": TTextareaWrap;
}
interface BqToast {
/**
* Method to be called to hide the toast component
Expand Down Expand Up @@ -879,6 +960,10 @@ export interface BqTabGroupCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLBqTabGroupElement;
}
export interface BqTextareaCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLBqTextareaElement;
}
export interface BqToastCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLBqToastElement;
Expand Down Expand Up @@ -1044,6 +1129,12 @@ declare global {
prototype: HTMLBqTabGroupElement;
new (): HTMLBqTabGroupElement;
};
interface HTMLBqTextareaElement extends Components.BqTextarea, HTMLStencilElement {
}
var HTMLBqTextareaElement: {
prototype: HTMLBqTextareaElement;
new (): HTMLBqTextareaElement;
};
interface HTMLBqToastElement extends Components.BqToast, HTMLStencilElement {
}
var HTMLBqToastElement: {
Expand Down Expand Up @@ -1081,6 +1172,7 @@ declare global {
"bq-switch": HTMLBqSwitchElement;
"bq-tab": HTMLBqTabElement;
"bq-tab-group": HTMLBqTabGroupElement;
"bq-textarea": HTMLBqTextareaElement;
"bq-toast": HTMLBqToastElement;
"bq-tooltip": HTMLBqTooltipElement;
}
Expand Down Expand Up @@ -1911,6 +2003,105 @@ declare namespace LocalJSX {
*/
"value"?: string;
}
interface BqTextarea {
/**
* If `true`, the textarea will automatically grow and shrink to fit its contents. If `false`, the textarea will have a fixed height specified by the `rows` property.
*/
"autoGrow"?: boolean;
/**
* Controls whether or not the textarea field should be capitalized and how. Possible values are 'off', 'none', 'on', 'sentences', 'words', and 'characters'. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize
*/
"autocapitalize"?: TTextareaAutoCapitalize;
/**
* Specifies whether or not the textarea field should have autocomplete enabled. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values
*/
"autocomplete"?: string;
/**
* Controls whether or not the textarea field should have autocorrect enabled. Possible values are 'on' and 'off'.
*/
"autocorrect"?: 'on' | 'off';
/**
* If true, the textarea will be focused on component render
*/
"autofocus"?: boolean;
/**
* The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the textarea value changes. A value of 0 means no debouncing will occur.
*/
"debounceTime"?: number;
/**
* If `true`, it will block the user's ability to resize the textarea.
*/
"disableResize"?: boolean;
/**
* If `true`, the user cannot interact with the textarea.
*/
"disabled"?: boolean;
/**
* The ID of the form that the textarea field belongs to.
*/
"form"?: string;
/**
* The maximum number of characters that can be entered into the textarea (`0`: no limit). When enabled, a character counter will be shown underneath the textarea.
*/
"maxlength"?: number;
/**
* The name of the textarea element.
*/
"name": string;
/**
* Callback handler emitted when the textarea loses focus
*/
"onBqBlur"?: (event: BqTextareaCustomEvent<HTMLBqTextareaElement>) => void;
/**
* Callback handler emitted when the textarea value has changed and the textarea loses focus. This handler is called whenever the user finishes typing or pasting text into the textarea field and then clicks outside of the textarea field.
*/
"onBqChange"?: (event: BqTextareaCustomEvent<{ value: string; el: HTMLBqTextareaElement }>) => void;
/**
* Callback handler emitted when the textarea value has been cleared
*/
"onBqClear"?: (event: BqTextareaCustomEvent<HTMLBqTextareaElement>) => void;
/**
* Callback handler emitted when the textarea has received focus
*/
"onBqFocus"?: (event: BqTextareaCustomEvent<HTMLBqTextareaElement>) => void;
/**
* Callback handler emitted when the textarea value changes. This handler is called whenever the user types or pastes text into the textarea field.
*/
"onBqInput"?: (event: BqTextareaCustomEvent<{ value: string; el: HTMLBqTextareaElement }>) => void;
/**
* The placeholder text to show when there is no value.
*/
"placeholder": string;
/**
* If true, the textarea field cannot be modified.
*/
"readonly"?: boolean;
/**
* Indicates whether or not the textarea field is required to be filled out before submitting the form.
*/
"required"?: boolean;
/**
* The number of visible text lines for the control. It must be a positive integer.
*/
"rows"?: number;
/**
* If true, the textarea content may be checked for spelling errors.
*/
"spellcheck"?: boolean;
/**
* The validation status of the textarea.
* @remarks This property is used to indicate the validation status of the textarea. It can be set to one of the following values: - `'none'`: No validation status is set. - `'error'`: The textarea has a validation error. - `'warning'`: The textarea has a validation warning. - `'success'`: The textarea has passed validation.
*/
"validationStatus"?: TInputValidation;
/**
* The value of the textarea. It can be used to reset the textarea to a previous value.
*/
"value"?: string;
/**
* Specifies how the text in a text area is to be wrapped when submitted in a form
*/
"wrap"?: TTextareaWrap;
}
interface BqToast {
/**
* If true will hide toast icon
Expand Down Expand Up @@ -1989,6 +2180,7 @@ declare namespace LocalJSX {
"bq-switch": BqSwitch;
"bq-tab": BqTab;
"bq-tab-group": BqTabGroup;
"bq-textarea": BqTextarea;
"bq-toast": BqToast;
"bq-tooltip": BqTooltip;
}
Expand Down Expand Up @@ -2037,6 +2229,7 @@ declare module "@stencil/core" {
"bq-switch": LocalJSX.BqSwitch & JSXBase.HTMLAttributes<HTMLBqSwitchElement>;
"bq-tab": LocalJSX.BqTab & JSXBase.HTMLAttributes<HTMLBqTabElement>;
"bq-tab-group": LocalJSX.BqTabGroup & JSXBase.HTMLAttributes<HTMLBqTabGroupElement>;
"bq-textarea": LocalJSX.BqTextarea & JSXBase.HTMLAttributes<HTMLBqTextareaElement>;
"bq-toast": LocalJSX.BqToast & JSXBase.HTMLAttributes<HTMLBqToastElement>;
"bq-tooltip": LocalJSX.BqTooltip & JSXBase.HTMLAttributes<HTMLBqTooltipElement>;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/bee-q/src/components/input/scss/bq-input.variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
* @prop --bq-input--text-size - Input text size
* @prop --bq-input--text-placeholder-color - Input placeholder text color
*/
--bq-input--background-color: var(--bq-neutral-white);
--bq-input--background-color: theme('colors.ui.primary');

--bq-input--border-color: theme('colors.stroke.tiertary');
--bq-input--border-color-hover: theme('colors.stroke.brand-hover');
Expand Down
Loading

0 comments on commit f51b25f

Please sign in to comment.