Merge pull request #2811 from mi6/data-table-dark-mode

Data table dark mode

packages/canary-react/src/component-tests/IcDataTable/IcDataTableTestData.tsx

@@ -1,12 +1,14 @@
 import { IcDataTableColumnObject } from "@ukic/canary-web-components";
 import { DATA } from "@ukic/canary-web-components/src/components/ic-data-table/story-data";
 
+const FIRST_NAME_TITLE = "First name";
+
 export const singleColumnWidth = (
   firstNameWidth: string
 ): IcDataTableColumnObject[] => [
   {
     key: "firstName",
-    title: "First name",
+    title: FIRST_NAME_TITLE,
     dataType: "string",
     columnWidth: firstNameWidth,
   },
@@ -28,7 +30,7 @@ export const multipleColumnWidth = (
 ): IcDataTableColumnObject[] => [
   {
     key: "firstName",
-    title: "First name",
+    title: FIRST_NAME_TITLE,
     dataType: "string",
     columnWidth: firstNameWidth,
   },
@@ -50,7 +52,7 @@ export const singleMinWidthColumn = (
 ): IcDataTableColumnObject[] => [
   {
     key: "firstName",
-    title: "First name",
+    title: FIRST_NAME_TITLE,
     dataType: "string",
     columnWidth: {
       minWidth: minWidth,
@@ -73,7 +75,7 @@ export const singleColumnTruncationWidth = (
 ): IcDataTableColumnObject[] => [
   {
     key: "firstName",
-    title: "First name",
+    title: FIRST_NAME_TITLE,
     dataType: "string",
   },
   {
@@ -89,7 +91,8 @@ export const singleColumnTruncationWidth = (
   },
 ];
 
-export const newData = () => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const newData = (): { [key: string]: any }[] => {
   return DATA.map((d) => ({
     firstName: d.firstName,
     lastName: d.lastName,

packages/canary-react/src/stories/ic-data-table.stories.mdx

@@ -969,7 +969,6 @@ export default DataTable;
 When a user wants to fetch their data asynchronously, a `loading` prop can be set to `true`, which then renders a circular variant of the `IcLoadingIndicator`.
 The loading indicator can be customised using the `loadingOptions` prop:
 
-- `appearance` can be `light` or `dark`
 - `description` sets the aria-label of the component
 - `label` sets the visual message
 - `labelDuration` is the number of milliseconds before the label changes
@@ -1777,7 +1776,6 @@ export const UpdatingData = () => {
           showItemsPerPageControl: true,
           showGoToPageControl: true,
           rangeLabelType: "page",
-          appearance: "default"
         }}
       />
       <div style={{ display: "flex", gap: "8px", marginTop: "8px" }}>
@@ -1886,7 +1884,6 @@ export const defaultPaginationBarArgs = {
   showItemsPerPageControl: true,
   showGoToPageControl: true,
   alignment: "right",
-  appearance: "default",
   itemLabel: "Item",
   pageLabel: "Page",
   hideRangeLabel: false
@@ -2092,7 +2089,6 @@ export const defaultArgs = {
   height: "",
   hideColumnHeaders: false,
   loading: false,
-  loadingAppearance: "dark",
   loadingDesc: "loading",
   loadingLabel: "Loading data...",
   loadingLabelDuration: 20, 
@@ -2111,7 +2107,6 @@ export const defaultArgs = {
   paginationShowItemsPerPageControl: true,
   paginationShowGoToPageControl: true,
   paginationAlignment: "right",
-  paginationAppearance: "default",
   paginationItemLabel: "Item",
   paginationPageLabel: "Page",
   paginationHideRangeLabel: false,
@@ -2122,7 +2117,6 @@ export const defaultArgs = {
   stickyColumnHeaders: false,
   stickyRowHeaders: false,
   updating: false,
-  updatingAppearance: "dark",
   updatingDesc: "loading",
   updatingMax: 100,
   updatingMin: 0,
@@ -2136,7 +2130,8 @@ export const defaultArgs = {
   titleBarMetadata: "128 items | 32gb | Updated: 01/02/03",
   titleBarPrimaryActionSlot: true,
   titleBarCustomActionSlot: true,
-  width: ""
+  width: "",
+  theme: "inherit",
 };
 
 <Canvas withSource="none">
@@ -2147,14 +2142,6 @@ export const defaultArgs = {
         options: ["default", "dense", "spacious"],
         control: { type: "inline-radio" },
       },
-      loadingAppearance: {
-        options: ["dark", "light"],
-        control: { type: "inline-radio" },
-      },
-      paginationAppearance: {
-        options: ["default", "dark", "light"],
-        control: { type: "inline-radio" },
-      },
       paginationRangeLabelType: {
         options: ["page", "data"],
         control: { type: "inline-radio" },
@@ -2175,10 +2162,6 @@ export const defaultArgs = {
         options: ["tooltip", "show-hide"],
         control: { type: "inline-radio" },
       },
-      updatingAppearance: {
-        options: ["dark", "light"],
-        control: { type: "inline-radio" },
-      },
       titleBarSlot: {
         mapping: {
           true: "title-bar",
@@ -2197,6 +2180,10 @@ export const defaultArgs = {
           false: "",
         }
       },
+      theme: {
+        options: ["inherit", "light", "dark"],
+        control: { type: "inline-radio" },
+      },
     }}
     name="Playground example"
   >
@@ -2213,7 +2200,6 @@ export const defaultArgs = {
         hideColumnHeaders={args.hideColumnHeaders}
         loading={args.loading}
         loadingOptions={{
-          appearance: args.loadingAppearance,
           description: args.loadingDesc,
           label: args.loadingLabel,
           labelDuration: args.loadingLabelDuration,
@@ -2228,8 +2214,7 @@ export const defaultArgs = {
           rangeLabelType: args.paginationRangeLabelType,
           type: args.paginationType,
           showItemsPerPageControl: args.paginationShowItemsPerPageControl,
-          showGoToPageControl: args.paginationShowGoToPageControl,          
-          appearance: args.paginationAppearance,
+          showGoToPageControl: args.paginationShowGoToPageControl,
           alignment: args.paginationAlignment,
           pageLabel: args.paginationPageLabel,
           itemLabel: args.paginationItemLabel,
@@ -2247,13 +2232,13 @@ export const defaultArgs = {
         truncationPattern={args.truncationPattern}
         updating={args.updating}
         updatingOptions={{
-          appearance: args.updatingAppearance,
           description: args.updatingDesc,
           max: args.updatingMax,
           min: args.updatingMin,
           progress: args.updatingProgress
         }}
         width={args.width}
+        theme={args.theme}
       >
         <IcDataTableTitleBar
           slot={args.titleBarSlot}

packages/canary-web-components/src/components.d.ts

@@ -8,19 +8,13 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
 import { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeMode, IcWeekDays } from "./utils/types";
 import { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
-import { IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
 import { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
-import { IcThemeMode as IcThemeMode1 } from "@ukic/web-components/dist/types/interface";
 import { IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
-import { IcThemeMode as IcThemeMode2 } from "@ukic/web-components";
 export { IcCardSizes } from "./components/ic-card-horizontal/ic-card-horizontal.types";
 export { IcDateFormat, IcInformationStatusOrEmpty, IcPaginationBarOptions, IcSizes, IcThemeMode, IcWeekDays } from "./utils/types";
 export { IcDataTableColumnObject, IcDataTableDataType, IcDataTableDensityOptions, IcDataTableRowHeights, IcDataTableSortOrderOptions, IcDataTableTruncationTypes, IcDensityUpdateEventDetail, IcSortEventDetail } from "./components/ic-data-table/ic-data-table.types";
-export { IcThemeForegroundNoDefault } from "@ukic/web-components/dist/types/utils/types";
 export { IcPaginationAlignmentOptions, IcPaginationLabelTypes, IcPaginationTypes } from "@ukic/web-components/dist/types/components/ic-pagination/ic-pagination.types";
-export { IcThemeMode as IcThemeMode1 } from "@ukic/web-components/dist/types/interface";
 export { IcPageChangeEventDetail } from "./components/ic-pagination-bar/ic-pagination-bar.types";
-export { IcThemeMode as IcThemeMode2 } from "@ukic/web-components";
 export namespace Components {
     interface IcCardHorizontal {
         /**
@@ -117,7 +111,6 @@ export namespace Components {
           * Sets the props for the circular loading indicator used in the loading state.
          */
         "loadingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
     description?: string;
     label?: string;
     labelDuration?: number;
@@ -174,6 +167,10 @@ export namespace Components {
           * Sets the layout of the table
          */
         "tableLayout"?: "fixed" | "auto";
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.
          */
@@ -186,7 +183,6 @@ export namespace Components {
           * Sets the props for the linear loading indicator used in the updating state.
          */
         "updatingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
     description?: string;
     max?: number;
     min?: number;
@@ -487,7 +483,7 @@ export namespace Components {
         /**
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "theme"?: IcThemeMode1;
+        "theme"?: IcThemeMode;
         /**
           * Total number of items to be displayed across all pages.
          */
@@ -545,7 +541,7 @@ export namespace Components {
         /**
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "theme"?: IcThemeMode2;
+        "theme"?: IcThemeMode;
         "updateAriaLabel": () => Promise<void>;
     }
     interface IcTreeView {
@@ -564,7 +560,7 @@ export namespace Components {
         /**
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "theme"?: IcThemeMode2;
+        "theme"?: IcThemeMode;
     }
 }
 export interface IcDataTableCustomEvent<T> extends CustomEvent<T> {
@@ -814,7 +810,6 @@ declare namespace LocalJSX {
           * Sets the props for the circular loading indicator used in the loading state.
          */
         "loadingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
     description?: string;
     label?: string;
     labelDuration?: number;
@@ -875,6 +870,10 @@ declare namespace LocalJSX {
           * Sets the layout of the table
          */
         "tableLayout"?: "fixed" | "auto";
+        /**
+          * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
+         */
+        "theme"?: IcThemeMode;
         /**
           * Sets the method used to truncate long text in cells where textWrap is `false`. The `tooltip` truncation pattern allows the overflowing text to be seen in a tooltip. The `show-hide` truncation pattern allows the overflowing text to be shown and hidden using the ic-typography "See more"/"See less" buttons.
          */
@@ -887,7 +886,6 @@ declare namespace LocalJSX {
           * Sets the props for the linear loading indicator used in the updating state.
          */
         "updatingOptions"?: {
-    appearance?: IcThemeForegroundNoDefault;
     description?: string;
     max?: number;
     min?: number;
@@ -1209,7 +1207,7 @@ declare namespace LocalJSX {
         /**
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "theme"?: IcThemeMode1;
+        "theme"?: IcThemeMode;
         /**
           * Total number of items to be displayed across all pages.
          */
@@ -1267,7 +1265,7 @@ declare namespace LocalJSX {
         /**
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "theme"?: IcThemeMode2;
+        "theme"?: IcThemeMode;
     }
     interface IcTreeView {
         /**
@@ -1285,7 +1283,7 @@ declare namespace LocalJSX {
         /**
           * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
          */
-        "theme"?: IcThemeMode2;
+        "theme"?: IcThemeMode;
     }
     interface IntrinsicElements {
         "ic-card-horizontal": IcCardHorizontal;

packages/canary-web-components/src/components/ic-data-table-title-bar/ic-data-table-title-bar.css

@@ -15,7 +15,8 @@
 .title-bar-wrapper {
   flex-direction: column;
   padding: var(--ic-space-sm) var(--ic-space-xs);
-  border-bottom: var(--ic-space-1px) solid var(--ic-architectural-300);
+  border-bottom: var(--ic-space-1px) solid
+    var(--ic-data-table-title-bar-keyline);
 }
 
 .full-width {
@@ -28,7 +29,7 @@ ic-typography.heading h3 {
 }
 
 ic-typography.ic-typography-subtitle-small {
-  --ic-typography-color: var(--ic-color-text-tertiary);
+  --ic-typography-color: var(--ic-data-table-title-bar-information);
 }
 
 ic-typography.ic-typography-h3,
@@ -38,9 +39,9 @@ ic-typography.ic-typography-h3,
 
 ic-typography.ic-typography-body,
 ::slotted([slot="description"]) {
-  color: var(--ic-color-text-secondary);
+  color: var(--ic-data-table-title-bar-description);
 
-  --ic-typography-color: var(--ic-color-text-secondary);
+  --ic-typography-color: var(--ic-data-table-title-bar-description);
 }
 
 ic-typography.ic-typography-body,

packages/canary-web-components/src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx

@@ -60,11 +60,11 @@ export class DataTableTitleBar {
   componentWillLoad(): void {
     const parentEl = this.el.parentElement;
     if (parentEl.tagName === "IC-DATA-TABLE") {
-      const dataTable = parentEl as HTMLIcDataTableElement;
-      this.initialDensitySelectOption = dataTable.density;
-      this.isEmbedded = dataTable.embedded;
+      const { caption, density, embedded } = parentEl as HTMLIcDataTableElement;
+      this.initialDensitySelectOption = density;
+      this.isEmbedded = embedded;
       if (this.heading === DEFAULT_TITLE_BAR_HEADING) {
-        this.heading = dataTable.caption;
+        this.heading = caption;
       }
     }
   }
@@ -101,7 +101,7 @@ export class DataTableTitleBar {
       >
         <div class="header-container">
           <slot name="heading">
-            <ic-typography variant="h3" className="heading">
+            <ic-typography variant="h3" class="heading">
               <h3>{heading}</h3>
             </ic-typography>
           </slot>