@inglorious/ui 7.6.0 → 7.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "7.6.0",
+  "version": "7.7.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",

package/src/controls/button/style.css

@@ -38,7 +38,6 @@
         var(--iw-button-color) 10%,
         transparent
       );
-      color: var(--iw-button-bg);
       box-shadow: none;
     }
   }
@@ -74,7 +73,7 @@
   }
 
   &.iw-button-primary {
-    --iw-button-color: var(--iw-color-primary-text);
+    --iw-button-color: var(--iw-color-primary);
     --iw-button-bg: var(--iw-color-primary);
     --iw-button-bg-hover: var(--iw-color-primary-hover);
     --iw-button-bg-active: var(--iw-color-primary-active);

package/src/controls/combobox/combobox.stories.js

@@ -33,6 +33,10 @@ export default {
     isLoading: { control: "boolean", description: "Show loading state." },
     searchTerm: { control: "text", description: "Current search filter." },
     placeholder: { control: "text", description: "Placeholder text." },
+    searchPlaceholder: {
+      control: "text",
+      description: "Placeholder of the search box in the panel.",
+    },
     noOptionsMessage: { control: "text", description: "No results message." },
     loadingMessage: { control: "text", description: "Loading message." },
     isFullWidth: {

package/src/controls/combobox/template.js

@@ -291,12 +291,17 @@ export const Combobox = {
    * @returns {TemplateResult}
    */
   renderSearchInput(props) {
-    const { searchTerm, isOpen, onSearchChange } = props
+    const {
+      searchTerm,
+      searchPlaceholder = "Search...",
+      isOpen,
+      onSearchChange,
+    } = props
 
     return html`<input
       class="iw-combobox-dropdown-search"
       type="text"
-      placeholder="Search..."
+      placeholder=${searchPlaceholder}
       .value=${searchTerm ?? ""}
       @input=${(event) => onSearchChange?.(event.target.value)}
       @keydown=${(event) => handleKeyDown(props, event)}

package/src/navigation/bottom-navigation/style.css

@@ -29,4 +29,11 @@
 
 .iw-bottom-navigation-label {
   font-size: var(--iw-font-size-sm);
+  /* One line, like its neighbours: a label too long for its tab is cut short
+     rather than wrapping, which in languages that break between any two
+     characters (Japanese, Chinese) splits a word and makes the bar taller. */
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

package/types/controls/combobox.d.ts

@@ -32,6 +32,8 @@ export interface ComboboxProps {
   isClearable?: boolean
 
   placeholder?: string
+  /** Placeholder of the search box in the panel. Defaults to "Search...". */
+  searchPlaceholder?: string
   noOptionsMessage?: string
   loadingMessage?: string