Skip to content

Commit

Permalink
Add support for specifying additional parts for the ch-edit and c`h…
Browse files Browse the repository at this point in the history 
…-combo-box-render` Hosts (#437)

* Add support for specifying additional parts for the ch-edit and ch-combo-box-render Hosts

* Improve showcase

* Update readmes

* Update components.d.ts
  • Loading branch information
@ncamera
ncamera authored Oct 11, 2024
1 parent cf45db1 commit 3e51843
Show file tree
Hide file tree
Showing 7 changed files with 58 additions and 4 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 @@ -768,6 +768,10 @@ export namespace Components {
* This attribute lets you specify if the element is disabled. If disabled, it will not fire any user interaction related event (for example, click event).
*/
"disabled": boolean;
/**
* Specifies a set of parts to use in the Host element (`ch-combo-box-render`).
*/
"hostParts"?: string;
/**
* Specifies the items of the control
*/
Expand Down Expand Up @@ -1037,6 +1041,10 @@ export namespace Components {
"getImagePathCallback"?: (
imageSrc: string
) => GxImageMultiState | undefined;
/**
* Specifies a set of parts to use in the Host element (`ch-edit`).
*/
"hostParts"?: string;
/**
* This property defines the maximum string length that the user can enter into the control.
*/
Expand Down Expand Up @@ -6901,6 +6909,10 @@ declare namespace LocalJSX {
* This attribute lets you specify if the element is disabled. If disabled, it will not fire any user interaction related event (for example, click event).
*/
"disabled"?: boolean;
/**
* Specifies a set of parts to use in the Host element (`ch-combo-box-render`).
*/
"hostParts"?: string;
/**
* Specifies the items of the control
*/
Expand Down Expand Up @@ -7170,6 +7182,10 @@ declare namespace LocalJSX {
"getImagePathCallback"?: (
imageSrc: string
) => GxImageMultiState | undefined;
/**
* Specifies a set of parts to use in the Host element (`ch-edit`).
*/
"hostParts"?: string;
/**
* This property defines the maximum string length that the user can enter into the control.
*/
Expand Down
18 changes: 15 additions & 3 deletions src/components/combo-box/combo-box.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
ComboBoxSelectedIndex,
ComboBoxItemModelExtended
} from "./types";
import { isMobileDevice } from "../../common/utils";
import { isMobileDevice, tokenMap } from "../../common/utils";
import {
COMBO_BOX_PARTS_DICTIONARY,
KEY_CODES
Expand Down Expand Up @@ -307,6 +307,11 @@ export class ChComboBoxRender
*/
@Prop() readonly disabled: boolean = false;

/**
* Specifies a set of parts to use in the Host element (`ch-combo-box-render`).
*/
@Prop() readonly hostParts?: string;

/**
* Specifies the items of the control
*/
Expand Down Expand Up @@ -793,15 +798,22 @@ export class ChComboBoxRender
// - User click must open the combo-box
// - Clicking the combo-box's label should not open the popover

// TODO: Add unit tests for this feature.
const currentValueMapping = this.#getCurrentValueMapping()?.item.value;

return (
<Host
class={{
"ch-disabled": this.disabled,
"ch-combo-box--normal": !filtersAreApplied,
"ch-combo-box--suggest": filtersAreApplied
}}
// TODO: Add unit tests for this feature
part={this.#getCurrentValueMapping()?.item.value}
// TODO: Add unit tests for this feature, since it breaks custom parts
// rendered outside of the ch-combo-box-render render() method
part={tokenMap({
[currentValueMapping]: !!currentValueMapping,
[this.hostParts]: !!this.hostParts
})}
onKeyDown={
!mobileDevice &&
comboBoxIsInteractive &&
Expand Down
1 change: 1 addition & 0 deletions src/components/combo-box/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
| -------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
| `accessibleName` | `accessible-name` | Specifies a short string, typically 1 to 3 words, that authors associate with an element to provide users of assistive technologies with a label for the element. | `string` | `undefined` |
| `disabled` | `disabled` | This attribute lets you specify if the element is disabled. If disabled, it will not fire any user interaction related event (for example, click event). | `boolean` | `false` |
| `hostParts` | `host-parts` | Specifies a set of parts to use in the Host element (`ch-combo-box-render`). | `string` | `undefined` |
| `model` | -- | Specifies the items of the control | `ComboBoxItemModel[]` | `[]` |
| `multiple` | `multiple` | This attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time. When multiple is specified, the control will show a scrolling list box instead of a single line dropdown. | `boolean` | `false` |
| `name` | `name` | This property specifies the `name` of the control when used in a form. | `string` | `undefined` |
Expand Down
12 changes: 11 additions & 1 deletion src/components/edit/edit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,11 @@ export class ChEdit implements AccessibleNameComponent, DisableableComponent {
this.#computeImage();
}

/**
* Specifies a set of parts to use in the Host element (`ch-edit`).
*/
@Prop() readonly hostParts?: string;

/**
* This property defines the maximum string length that the user can enter
* into the control.
Expand Down Expand Up @@ -478,7 +483,12 @@ export class ChEdit implements AccessibleNameComponent, DisableableComponent {

[DISABLED_CLASS]: this.disabled
}}
part={!this.value ? EDIT_HOST_PARTS.EMPTY_VALUE : null}
// TODO: Add unit tests for this feature, since it breaks custom parts
// rendered outside of the ch-edit render() method
part={tokenMap({
[EDIT_HOST_PARTS.EMPTY_VALUE]: !this.value,
[this.hostParts]: !!this.hostParts
})}
style={this.#startImage?.styles ?? undefined}
// Alignment
data-text-align=""
Expand Down
1 change: 1 addition & 0 deletions src/components/edit/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ A wrapper for the input and textarea elements. It additionally provides:
| `debounce` | `debounce` | Specifies a debounce for the input event. | `number` | `0` |
| `disabled` | `disabled` | This attribute lets you specify if the element is disabled. If disabled, it will not fire any user interaction related event (for example, click event). | `boolean` | `false` |
| `getImagePathCallback` | -- | This property specifies a callback that is executed when the path for an startImgSrc needs to be resolved. | `(imageSrc: string) => GxImageMultiState` | `undefined` |
| `hostParts` | `host-parts` | Specifies a set of parts to use in the Host element (`ch-edit`). | `string` | `undefined` |
| `maxLength` | `max-length` | This property defines the maximum string length that the user can enter into the control. | `number` | `undefined` |
| `mode` | `mode` | This attribute hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. Only works when `multiline === false`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url"` | `undefined` |
| `multiline` | `multiline` | Controls if the element accepts multiline text. | `boolean` | `false` |
Expand Down
7 changes: 7 additions & 0 deletions src/showcase/assets/components/combo-box/combo-box.showcase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,12 @@ const showcaseRenderProperties: ShowcaseRenderProperties<HTMLChComboBoxRenderEle
}
]
},
{
id: "hostParts",
caption: "Host Parts",
value: undefined,
type: "string"
},
{
id: "resizable",
caption: "Resizable",
Expand Down Expand Up @@ -313,6 +319,7 @@ const showcasePropertiesInfo: ShowcaseTemplatePropertyInfo<HTMLChComboBoxRenderE
{ name: "class", fixed: true, value: "combo-box", type: "string" },
{ name: "disabled", defaultValue: false, type: "boolean" },
{ name: "filter", defaultValue: undefined, type: "string" },
{ name: "hostParts", defaultValue: undefined, type: "string" },
{ name: "model", fixed: true, value: "controlUIModel", type: "string" },
{ name: "placeholder", defaultValue: undefined, type: "string" },
{ name: "readonly", defaultValue: false, type: "boolean" },
Expand Down
7 changes: 7 additions & 0 deletions src/showcase/assets/components/edit/edit.showcase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,12 @@ const showcaseRenderProperties: ShowcaseRenderProperties<HTMLChEditElement> = [
],
value: "background"
},
{
id: "hostParts",
caption: "Host Parts",
value: undefined,
type: "string"
},
{
id: "autocapitalize",
caption: "Auto Capitalize",
Expand Down Expand Up @@ -387,6 +393,7 @@ const showcasePropertiesInfo: ShowcaseTemplatePropertyInfo<HTMLChEditElement>[]
value: "getImagePathCallback",
type: "function"
},
{ name: "hostParts", defaultValue: undefined, type: "string" },
{ name: "maxLength", defaultValue: undefined, type: "number" },
{ name: "mode", defaultValue: undefined, type: "string" },
{ name: "multiline", defaultValue: false, type: "boolean" },
Expand Down

0 comments on commit 3e51843

Please sign in to comment.