Skip to content

Commit

Permalink
fix(table-cell): cleanup indicator colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@alisonailea
alisonailea committed Jun 21, 2024
1 parent 787a552 commit 9341dff
Show file tree
Hide file tree
Showing 2 changed files with 56 additions and 37 deletions.
18 changes: 18 additions & 0 deletions packages/calcite-components/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4562,6 +4562,10 @@ export namespace Components {
* Accessible name for the dropdown menu.
*/
"dropdownLabel": string;
/**
* Defines the available placements that can be used when a flip occurs.
*/
"flipPlacements": FlipPlacement[];
/**
* Specifies the kind of the component, which will apply to border and background, if applicable.
*/
Expand All @@ -4574,6 +4578,11 @@ export namespace Components {
* Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
*/
"overlayPositioning": OverlayPositioning;
/**
* Determines where the component will be positioned relative to the container element.
* @default "bottom-end"
*/
"placement": MenuPlacement;
/**
* Specifies an icon to display at the end of the primary button.
*/
Expand Down Expand Up @@ -12509,6 +12518,10 @@ declare namespace LocalJSX {
* Accessible name for the dropdown menu.
*/
"dropdownLabel"?: string;
/**
* Defines the available placements that can be used when a flip occurs.
*/
"flipPlacements"?: FlipPlacement[];
/**
* Specifies the kind of the component, which will apply to border and background, if applicable.
*/
Expand All @@ -12529,6 +12542,11 @@ declare namespace LocalJSX {
* Determines the type of positioning to use for the overlaid content. Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
*/
"overlayPositioning"?: OverlayPositioning;
/**
* Determines where the component will be positioned relative to the container element.
* @default "bottom-end"
*/
"placement"?: MenuPlacement;
/**
* Specifies an icon to display at the end of the primary button.
*/
Expand Down
75 changes: 38 additions & 37 deletions packages/calcite-components/src/components/table-cell/table-cell.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,14 @@
*
* @prop --calcite-table-cell-background: [Deprecated] Use `--calcite-table-cell-background-color` instead. Specifies the background color of the component.
* @prop --calcite-table-cell-background-color: Specifies the background color of the component.
* @prop --calcite-table-cell-background-color-selected: Specifies the background color of the selected cell.
* @prop --calcite-table-cell-background-color-selected: Specifies the background color of the component in a selected row.
* @prop --calcite-table-cell-border-color: Specifies the border color of the component.
* @prop --calcite-table-cell-text-color: Specifies the text color of the component.
* @prop --calcite-table-cell-number-background-color: Specifies the background color of the number cell.
* @prop --calcite-table-cell-number-background-color: Specifies the background color of the number cell when "numbered" is set on the parent table.
* @prop --calcite-table-cell-footer-background-color: Specifies the background color of the footer cell.
* @prop --calcite-table-cell-text-color-selected: Specifies the text color of the selected cell.
* @prop --calcite-table-cell-shadow-selected: Specifies the shadow of the selected cell.
* @prop --calcite-table-cell-text-color-selected: Specifies the text color of the component in a selected row.
* @prop --calcite-table-cell-indicator-color-highlight: Specifies the selection indicator color when selection-mode is set on the parent table.
* @prop --calcite-table-cell-indicator-color-selected: Specifies the selection indicator color of the component in a selected row.
*/

/**
Expand Down Expand Up @@ -50,17 +51,19 @@ td {
--calcite-table-cell-background-color,
var(--calcite-table-cell-background, transparent)
);
--calcite-internal-table-cell-text-color: var(--calcite-table-cell-text-color, var(--calcite-color-text-1));

@apply text-start align-middle whitespace-normal;
background-color: var(--calcite-internal-table-cell-background-color);
font-size: var(--calcite-internal-table-cell-font-size);
border-inline-end: 1px solid
var(
--calcite-table-cell-border-color,
var(--calcite-table-row-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3)))
);
border-color: var(
--calcite-table-cell-border-color,
var(--calcite-table-row-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3)))
);
border-style: solid;
border-inline-end-width: var(--calcite-border-width-sm);
padding: var(--calcite-internal-table-cell-padding);
color: var(--calcite-table-cell-text-color, var(--calcite-color-text-1));
color: var(--calcite-internal-table-cell-text-color);

&:not(.static-cell) {
@apply focus-base;
Expand All @@ -83,41 +86,46 @@ td.last-cell {
}

.number-cell {
background-color: var(
--calcite-internal-table-cell-background-color: var(
--calcite-table-cell-number-background-color,
var(--calcite-table-cell-background-color, var(--calcite-color-foreground-2))
var(--calcite-color-foreground-2)
);
}

.footer-cell {
@apply font-medium text-color-1;
border-block-start: 1px solid
var(
--calcite-table-cell-border-color,
var(--calcite-table-row-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3)))
);
background-color: var(--calcite-table-cell-footer-background-color, var(--calcite-color-background));
--calcite-internal-table-cell-background-color: var(
--calcite-table-cell-footer-background-color,
var(--calcite-color-background)
);

@apply font-medium;
border-block-start-width: var(--calcite-border-width-sm);
}

.number-cell,
.selection-cell {
@apply text-center;
border-inline-end: 1px solid
var(
--calcite-table-cell-border-color,
var(--calcite-table-row-border-color, var(--calcite-table-border-color, var(--calcite-color-border-3)))
);

inline-size: 2rem;
min-inline-size: 2rem;
}

.selection-cell {
@apply align-middle;
inset-inline-start: 2rem;
color: var(--calcite-table-cell-text-color-selected, var(--calcite-color-text-3));

&:not(.footer-cell) {
@apply cursor-pointer;
}

calcite-icon,
::slotted(calcite-icon) {
--calcite-icon-color: var(--calcite-table-cell-indicator-color-highlight, var(--calcite-color-text-3));
}

::slotted(calcite-icon) {
@apply pointer-events-none mt-1;
}
}

.selected-cell:not(.number-cell):not(.footer-cell) {
Expand All @@ -128,22 +136,15 @@ td.last-cell {
}

.selection-cell.selected-cell {
box-shadow: var(--calcite-table-cell-shadow-selected, inset 0.25rem 0 0 0 var(--calcite-color-brand));
color: var(--calcite-table-cell-text-color-selected, var(--calcite-color-brand));
& calcite-icon {
--calcite-icon-color: var(--calcite-table-cell-text-color-selected, var(--calcite-color-brand));
box-shadow: inset 0.25rem 0 0 0 var(--calcite-table-cell-indicator-color-selected, var(--calcite-color-brand));

calcite-icon {
--calcite-icon-color: var(--calcite-table-cell-indicator-color-selected, var(--calcite-color-brand));
}
}

.calcite--rtl.selection-cell.selected-cell {
box-shadow: var(--calcite-table-cell-shadow-selected, inset -0.25rem 0 0 0 var(--calcite-color-brand));
}

.selection-cell {
@apply align-middle;
& ::slotted(calcite-icon) {
@apply pointer-events-none mt-1;
}
box-shadow: inset -0.25rem 0 0 0 var(--calcite-table-cell-indicator-color-selected, var(--calcite-color-brand));
}

@include disabled();

0 comments on commit 9341dff

Please sign in to comment.