Skip to content

feat(fw-tab): adding spacing css variables to tab component #850

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: next
Choose a base branch
from
Open

feat(fw-tab): adding spacing css variables to tab component #850

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/crayons-core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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.
*/
Expand Down
6 changes: 5 additions & 1 deletion packages/crayons-core/src/components/popover/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand All @@ -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 &&
Expand Down
1 change: 1 addition & 0 deletions packages/crayons-core/src/components/popover/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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` |
Expand Down
10 changes: 10 additions & 0 deletions packages/crayons-core/src/components/select-option/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,16 @@ Type: `Promise<any>`



## 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
Expand Down
22 changes: 18 additions & 4 deletions packages/crayons-core/src/components/select-option/select-option.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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
);
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/crayons-core/src/components/select-option/select-option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ') +
Expand Down
3 changes: 3 additions & 0 deletions packages/crayons-core/src/components/tab/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |


----------------------------------------------
Expand Down
9 changes: 6 additions & 3 deletions packages/crayons-core/src/components/tab/tab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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 */
Expand Down