diff --git a/packages/crayons-core/src/components.d.ts b/packages/crayons-core/src/components.d.ts index 25285675c..106c3b73e 100644 --- a/packages/crayons-core/src/components.d.ts +++ b/packages/crayons-core/src/components.d.ts @@ -1497,6 +1497,10 @@ export namespace Components { * Option to prevent the tooltip from being clipped when the component is placed inside a container with `overflow: auto|hidden|scroll`. */ "hoist": boolean; + /** + * Indicates if popup must open on interacting. + */ + "isActive": boolean; /** * Placement of the popover content with respect to the popover trigger. */ @@ -4416,6 +4420,10 @@ declare namespace LocalJSX { * Option to prevent the tooltip from being clipped when the component is placed inside a container with `overflow: auto|hidden|scroll`. */ "hoist"?: boolean; + /** + * Indicates if popup must open on interacting. + */ + "isActive"?: boolean; /** * Triggered whenever the popover contents is closed/hidden. */ diff --git a/packages/crayons-core/src/components/popover/popover.tsx b/packages/crayons-core/src/components/popover/popover.tsx index 29c4e2418..fc82878c3 100644 --- a/packages/crayons-core/src/components/popover/popover.tsx +++ b/packages/crayons-core/src/components/popover/popover.tsx @@ -95,6 +95,10 @@ export class Popover { * Indicates the delay after which popover will be hidden. */ @Prop() hideAfter = 0; + /** + * Indicates if popup must open on interacting. + */ + @Prop() isActive = true; /** * Triggered whenever the popover contents is open/displayed. */ @@ -118,7 +122,7 @@ export class Popover { @Method() async show() { - if (!this.isOpen) { + if (!this.isOpen && this.isActive) { clearTimeout(this.timerId); if (this.showAfter > 0) await this.delay(this.showAfter); this.sameWidth && diff --git a/packages/crayons-core/src/components/popover/readme.md b/packages/crayons-core/src/components/popover/readme.md index eb1d70e81..578492cbf 100644 --- a/packages/crayons-core/src/components/popover/readme.md +++ b/packages/crayons-core/src/components/popover/readme.md @@ -592,6 +592,7 @@ A simple dropdown button can be achieved as shown below. | `hideAfter` | `hide-after` | Indicates the delay after which popover will be hidden. | `number` | `0` | | `hideOnTab` | `hide-on-tab` | Indicates whether popover contents should be hidden on pressing Tab. | `boolean` | `true` | | `hoist` | `hoist` | Option to prevent the tooltip from being clipped when the component is placed inside a container with `overflow: auto\|hidden\|scroll`. | `boolean` | `false` | +| `isActive` | `is-active` | Indicates if popup must open on interacting. | `boolean` | `true` | | `placement` | `placement` | Placement of the popover content with respect to the popover trigger. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom'` | | `sameWidth` | `same-width` | Whether the popover-content width to be same as that of the popover-trigger. | `boolean` | `true` | | `showAfter` | `show-after` | Indicates the delay after which popover will be shown. | `number` | `0` | diff --git a/packages/crayons-core/src/components/select-option/readme.md b/packages/crayons-core/src/components/select-option/readme.md index dceeed962..17abe4cc9 100644 --- a/packages/crayons-core/src/components/select-option/readme.md +++ b/packages/crayons-core/src/components/select-option/readme.md @@ -146,6 +146,16 @@ Type: `Promise` +## CSS Custom Properties + +| Name | Description | +| ------------------------------------------------- | ----------------------------------------------------- | +| `--fw-select-option-color` | to adjust color of select option | +| `--fw-select-option-font-weight` | to adjust font weight of select option | +| `--fw-select-option-icon-margin-inline-start` | to adjust margin in the icon variant | +| `--fw-select-option-standard-margin-inline-start` | to adjust margin inline start in the standard variant | + + ## Dependencies ### Used by diff --git a/packages/crayons-core/src/components/select-option/select-option.scss b/packages/crayons-core/src/components/select-option/select-option.scss index fd5403324..4a3f93fb2 100644 --- a/packages/crayons-core/src/components/select-option/select-option.scss +++ b/packages/crayons-core/src/components/select-option/select-option.scss @@ -1,3 +1,10 @@ +/** + @prop --fw-select-option-icon-margin-inline-start: to adjust margin in the icon variant + @prop --fw-select-option-standard-margin-inline-start: to adjust margin inline start in the standard variant + @prop --fw-select-option-color: to adjust color of select option + @prop --fw-select-option-font-weight: to adjust font weight of select option +*/ + $primary-color: $color-elephant-900; $selected-color: $color-azure-800; $disabled-color: $color-smoke-300; @@ -14,8 +21,9 @@ $bg-color-disabled: $color-smoke-25; cursor: pointer; display: flex; align-items: center; - color: $primary-color; - font-size: $font-size-14; + color: var(--fw-select-option-color, $primary-color); + font-size: var(--fw-select-option-font-weight, $font-size-14); + font-weight: 400; border-radius: 4px; list-style: none; line-height: $line-height-label; @@ -84,11 +92,17 @@ $bg-color-disabled: $color-smoke-25; } &.icon-margin { - margin-inline-start: 18px; + margin-inline-start: var( + --fw-select-option-icon-margin-inline-start, + 18px + ); } &.standard-margin { - margin-inline-start: 12px; + margin-inline-start: var( + --fw-select-option-standard-margin-inline-start, + 12px + ); } } diff --git a/packages/crayons-core/src/components/select-option/select-option.tsx b/packages/crayons-core/src/components/select-option/select-option.tsx index ade220d72..062d6675b 100644 --- a/packages/crayons-core/src/components/select-option/select-option.tsx +++ b/packages/crayons-core/src/components/select-option/select-option.tsx @@ -234,7 +234,7 @@ export class SelectOption { class={ 'select-option ' + (this.selected && !this.checkbox ? 'selected ' : '') + - (this.disabled ? 'disabled ' : '') + + (this.disabled && !this.selected ? 'disabled ' : '') + (this.html ? '' : (this.subText ? 'multi-line ' : 'single-line ') + diff --git a/packages/crayons-core/src/components/tab/readme.md b/packages/crayons-core/src/components/tab/readme.md index 05342b83b..dba198175 100644 --- a/packages/crayons-core/src/components/tab/readme.md +++ b/packages/crayons-core/src/components/tab/readme.md @@ -53,6 +53,9 @@ function App() { | Name | Description | | --------------------------- | -------------------------- | | `--fw-tab-border-block-end` | border bottom style of tab | +| `--fw-tab-margin-inline` | margin inline of the tab | +| `--fw-tab-padding-block` | padding block of the tab | +| `--fw-tab-padding-inline` | padding inline of the tab | ---------------------------------------------- diff --git a/packages/crayons-core/src/components/tab/tab.scss b/packages/crayons-core/src/components/tab/tab.scss index 4efef3c00..fcd00e32b 100644 --- a/packages/crayons-core/src/components/tab/tab.scss +++ b/packages/crayons-core/src/components/tab/tab.scss @@ -1,5 +1,8 @@ /** @prop --fw-tab-border-block-end: border bottom style of tab + @prop --fw-tab-margin-inline: margin inline of the tab + @prop --fw-tab-padding-block: padding block of the tab + @prop --fw-tab-padding-inline: padding inline of the tab */ :host(:focus-visible) { @@ -19,13 +22,13 @@ white-space: nowrap; cursor: pointer; align-items: center; - padding-inline: 8px; - padding-block: 10px; + padding-inline: var(--fw-tab-padding-inline, 8px); + padding-block: var(--fw-tab-padding-block, 10px); line-height: 20px; color: $color-smoke-700; font-size: $font-size-14; font-weight: $font-weight-400; - margin-inline: 4px; + margin-inline: var(--fw-tab-margin-inline, 4px); margin-block: 0; /* stylelint-disable */