@inglorious/ui 8.1.0 → 8.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.1.0",
+  "version": "8.2.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -301,7 +301,6 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/charts": "10.0.7",
     "@inglorious/store": "11.0.4",
     "@inglorious/utils": "5.0.0",
     "@inglorious/web": "6.6.1"
@@ -311,7 +310,8 @@
     "@iconify-icons/fa7-regular": "^2.0.0",
     "@iconify-icons/fa7-solid": "^2.0.0",
     "@iconify-icons/material-symbols": "^2.0.6",
-    "@inglorious/eslint-config": "1.1.2",
+    "@inglorious/charts": "11.1.0",
+    "@inglorious/eslint-config": "1.1.3",
     "@inglorious/store": "11.0.4",
     "@inglorious/vite-plugin-jsx": "2.0.4",
     "@inglorious/vite-plugin-vue": "1.0.5",

package/src/controls/button/style.css

@@ -8,6 +8,8 @@
   font-size: var(--iw-font-size-base);
   font-weight: var(--iw-font-weight-normal);
   line-height: var(--iw-line-height-normal);
+  text-transform: var(--iw-label-text-transform);
+  letter-spacing: var(--iw-label-letter-spacing);
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;

package/src/data-display/table/style.css

@@ -15,6 +15,15 @@
     width: 100%;
   }
 
+  &.iw-table-wrapping {
+    min-width: 0;
+
+    .iw-table-header-cell,
+    .iw-table-cell {
+      overflow-wrap: anywhere;
+    }
+  }
+
   &.iw-table-striped {
     .iw-table-row-even {
       background: color-mix(

package/src/data-display/table/table.stories.js

@@ -10,6 +10,11 @@ export default {
     rows: { control: "object", description: "Row records." },
     isFullWidth: { control: "boolean", description: "Stretch table width." },
     isStriped: { control: "boolean", description: "Enable zebra rows." },
+    isWrapping: {
+      control: "boolean",
+      description:
+        "Wrap cell content to fit the container instead of scrolling.",
+    },
     onRowClick: { action: "onRowClick" },
   },
   parameters: {

package/src/data-display/table/template.js

@@ -37,6 +37,7 @@ export const Table = {
       rows = [],
       isFullWidth = false,
       isStriped = false,
+      isWrapping = false,
       onRowClick,
       ...rest
     } = props
@@ -45,6 +46,7 @@ export const Table = {
       "iw-table": true,
       "iw-table-full-width": isFullWidth,
       "iw-table-striped": isStriped,
+      "iw-table-wrapping": isWrapping,
     }
 
     return html`

package/src/examples/dashboard/social-card.js

@@ -1,4 +1,4 @@
-import { Chart } from "@inglorious/charts"
+import { Area, Chart } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
 import { Divider } from "../../data-display/divider"
@@ -55,7 +55,7 @@ export const SocialCard = {
         height: 200,
         padding: 0,
         children: [
-          Chart.Area({
+          Area({
             dataKey: "value",
             stroke: "rgba(255,255,255,0.9)",
             fill: "rgba(255,255,255,0.35)",

package/src/examples/dashboard/stat-card.js

@@ -1,5 +1,5 @@
 import moreVertOutline from "@iconify-icons/material-symbols/more-vert-outline"
-import { Chart } from "@inglorious/charts"
+import { Area, Bar, Chart, Dots, Line } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
 import { Button } from "../../controls/button"
@@ -66,20 +66,16 @@ export const StatCard = {
     const children = []
 
     if (entity.chartType === "area") {
-      children.push(
-        Chart.Area({ dataKey: "value", fill: "rgba(255,255,255,0.3)" }),
-      )
+      children.push(Area({ dataKey: "value", fill: "rgba(255,255,255,0.3)" }))
     } else if (entity.chartType === "bar") {
-      children.push(
-        Chart.Bar({ dataKey: "value", fill: "rgba(255,255,255,0.3)" }),
-      )
+      children.push(Bar({ dataKey: "value", fill: "rgba(255,255,255,0.3)" }))
     } else if (entity.chartType === "line") {
-      children.push(Chart.Line({ dataKey: "value", stroke: "white" }))
+      children.push(Line({ dataKey: "value", stroke: "white" }))
     }
 
     if (entity.hasDots) {
       children.push(
-        Chart.Dots({ dataKey: "value", stroke: "white", fill: "#39a2f1" }),
+        Dots({ dataKey: "value", stroke: "white", fill: "#39a2f1" }),
       )
     }
 

package/src/examples/dashboard/traffic-card.js

@@ -1,5 +1,12 @@
 import downloadOutline from "@iconify-icons/material-symbols/download-outline"
-import { Chart } from "@inglorious/charts"
+import {
+  Area,
+  CartesianGrid,
+  Chart,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
 import { Button } from "../../controls/button"
@@ -94,15 +101,15 @@ export const TrafficCard = {
         height: 320,
         dataKeys: ["visits", "unique"],
         children: [
-          Chart.CartesianGrid({
+          CartesianGrid({
             stroke: "rgba(255,255,255,0.08)",
             strokeDasharray: "4 4",
           }),
-          Chart.XAxis({ dataKey: "month" }),
-          Chart.YAxis({ width: "auto" }),
-          Chart.Area({ dataKey: "visits", stroke: "#39a2f1", strokeWidth: 3 }),
-          Chart.Area({ dataKey: "unique", stroke: "#2eb85c", strokeWidth: 3 }),
-          Chart.Tooltip({}),
+          XAxis({ dataKey: "month" }),
+          YAxis(),
+          Area({ dataKey: "visits", stroke: "#39a2f1", strokeWidth: 3 }),
+          Area({ dataKey: "unique", stroke: "#2eb85c", strokeWidth: 3 }),
+          Tooltip({}),
         ],
       },
       api,

package/src/feedback/progress/template.js

@@ -77,6 +77,7 @@ export function render(props) {
     class=${classMap({
       "iw-progress": true,
       "iw-progress-linear": true,
+      [`iw-progress-${color}`]: true,
       "iw-progress-indeterminate": progress == null,
       ...extraClasses,
     })}

package/src/navigation/tabs/style.css

@@ -22,6 +22,8 @@
   align-items: center;
   gap: var(--iw-space-2);
   padding: var(--iw-space-3) var(--iw-space-4);
+  text-transform: var(--iw-label-text-transform);
+  letter-spacing: var(--iw-label-letter-spacing);
   cursor: pointer;
 }
 

package/src/styles/themes/material.css

@@ -33,6 +33,10 @@
   --iw-color-accent-hover: #c2185b;
   --iw-color-accent-active: #ad1457;
 
+  /* Buttons and tabs carry their labels in capitals, as Material does. */
+  --iw-label-text-transform: uppercase;
+  --iw-label-letter-spacing: 0.06em;
+
   /* ========================================
      COMPONENT TOKENS
      ======================================== */

package/src/styles/tokens.css

@@ -125,6 +125,10 @@
   --iw-line-height-normal: 1.5;
   --iw-line-height-relaxed: 1.75;
 
+  /* Labels of buttons and tabs: a theme can set them in capitals. */
+  --iw-label-text-transform: none;
+  --iw-label-letter-spacing: normal;
+
   /* ========================================
      SHADOWS
      ======================================== */

package/types/controls/button-group.d.ts

@@ -7,7 +7,14 @@ export interface ButtonGroupItem {
   children?: TemplateResult | string | number
   isDisabled?: boolean
   variant?: "default" | "outline" | "ghost"
-  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
   size?: "sm" | "md" | "lg"
   icon?: string
   iconAfter?: string
@@ -23,7 +30,14 @@ export interface ButtonGroupProps {
   isAttached?: boolean
   size?: "sm" | "md" | "lg"
   variant?: "default" | "outline" | "ghost"
-  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
   isDisabled?: boolean
   onChange?: (value?: string | string[]) => void
   [key: string]: unknown

package/types/controls/button.d.ts

@@ -5,7 +5,14 @@ export interface ButtonProps {
   type: "Button"
   children?: TemplateResult | string | number
   variant?: "default" | "outline" | "ghost"
-  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
   size?: "sm" | "md" | "lg"
   shape?: "rectangle" | "pill" | "round" | "square"
   isDisabled?: boolean

package/types/controls/fab.d.ts

@@ -3,7 +3,14 @@ import type { TemplateResult } from "@inglorious/web"
 export interface FabProps {
   id?: string
   children?: TemplateResult | string | number
-  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
   size?: "sm" | "md" | "lg"
   isDisabled?: boolean
   type?: "button" | "submit" | "reset" | "menu"

package/types/controls/icon-button.d.ts

@@ -9,7 +9,14 @@ export interface IconButtonProps {
   direction?: "row" | "column"
   ariaLabel?: string
   variant?: "default" | "outline" | "ghost"
-  color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
   size?: "sm" | "md" | "lg"
   isDisabled?: boolean
   isFullWidth?: boolean

package/types/data-display/table.d.ts

@@ -17,6 +17,7 @@ export interface TableProps {
   rows?: TableRow[]
   isFullWidth?: boolean
   isStriped?: boolean
+  isWrapping?: boolean
   onRowClick?: (row: TableRow) => void
   [key: string]: unknown
 }

package/types/data-display/tooltip.d.ts

@@ -9,7 +9,7 @@ export interface TooltipProps {
   isOpen?: boolean
   maxWidth?: string
   className?: string
-  onClick: () => void
+  onClick?: () => void
   [key: string]: unknown
 }
 

package/types/feedback/progress.d.ts

@@ -5,6 +5,14 @@ export interface ProgressProps {
   type?: string
   variant?: "linear" | "circular"
   value?: number
+  color?:
+    | "default"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "info"
   size?: number
   thickness?: number
   className?: string

package/types/navigation/tabs.d.ts

@@ -15,7 +15,7 @@ export interface TabsProps {
   id?: string
   type?: string
   items?: TabItem[]
-  value?: string | number
+  value?: string | number | null
   isCentered?: boolean
   isFullWidth?: boolean
   onChange?: (value: string | number) => void