@lumx/core 4.3.2-alpha.6 → 4.3.2-alpha.7

package/js/constants/enums/index.d.ts

@@ -198,3 +198,12 @@ export declare const ColorVariant: {
 export type ColorVariant = ValueOf<typeof ColorVariant>;
 /** ColorPalette with all possible color variant combination */
 export type ColorWithVariants = ColorPalette | Exclude<`${ColorPalette}-${ColorVariant}`, `light-D${number}` | `dark-D${number}`>;
+export declare const REAL_SIZE_FOR_LUMX_SIZE: {
+    xxs: number;
+    xs: number;
+    s: number;
+    m: number;
+    l: number;
+    xl: number;
+    xxl: number;
+};

package/js/constants/enums/index.js

@@ -151,5 +151,14 @@ const ColorVariant = {
     L6: 'L6',
     N: 'N',
 };
+const REAL_SIZE_FOR_LUMX_SIZE = {
+    [Size.xxs]: 14,
+    [Size.xs]: 20,
+    [Size.s]: 24,
+    [Size.m]: 36,
+    [Size.l]: 64,
+    [Size.xl]: 128,
+    [Size.xxl]: 256,
+};
 
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace };
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, REAL_SIZE_FOR_LUMX_SIZE, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace };

package/js/constants/index.js

@@ -1,4 +1,4 @@
 export { BACKSPACE_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESCAPE_KEY_CODE, LEFT_KEY_CODE, RIGHT_KEY_CODE, SPACE_KEY_CODE, TAB_KEY_CODE, UP_KEY_CODE } from './keycodes/index.js';
 export { DIALOG_TRANSITION_DURATION, EXPANSION_PANEL_TRANSITION_DURATION, NOTIFICATION_TRANSITION_DURATION, SLIDESHOW_TRANSITION_DURATION, TOOLTIP_HOVER_DELAY, TOOLTIP_LONG_PRESS_DELAY } from './components/index.js';
-export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace } from './enums/index.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, REAL_SIZE_FOR_LUMX_SIZE, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace } from './enums/index.js';
 export { VISUALLY_HIDDEN } from './className/index.js';

package/js/types/PartialBy.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Same as `Partial` but for one property only.
+ *
+ * @example PartialBy<Foo, 'bar'> => produces a type almost identical to `Foo` but with the `bar` property as optional.
+ */
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+/**
+ * Same as `Partial` but for all except some properties only.
+ *
+ * @example PartialExcept<Foo, 'bar'> => produces a type almost identical to `Foo` but with the `bar` property as it is on the original type.
+ */
+export type PartialExcept<T, K extends keyof T> = Pick<T, K> & Partial<Omit<T, K>>;

package/js/types/index.d.ts

@@ -25,3 +25,4 @@ export type { HasChecked } from './HasChecked';
 export type { HasDisabled } from './HasDisabled';
 export type { AriaAttributes } from './AriaAttributes';
 export type { Selector } from './Selector';
+export type { PartialBy, PartialExcept } from './PartialBy';

package/js/utils/classNames/bem/block.d.ts

@@ -1,3 +1,4 @@
+import { ClassValue } from 'classnames/types';
 import { type Modifier } from './modifier';
 /**
  * Generates a BEM block + modifier class name string.
@@ -11,5 +12,5 @@ import { type Modifier } from './modifier';
  * block('button'); // 'button'
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
-export declare function block(baseName: string, additionalClasses: string[]): string;
-export declare function block(baseName: string, modifiers?: Modifier, additionalClasses?: string[]): string;
+export declare function block(baseName: string, additionalClasses: ClassValue[]): string;
+export declare function block(baseName: string, modifiers?: Modifier, additionalClasses?: ClassValue[]): string;

package/js/utils/classNames/bem/element.d.ts

@@ -1,3 +1,4 @@
+import { ClassValue } from 'classnames/types';
 import type { Modifier } from './modifier';
 /**
  * Creates a BEM element class generator function for the given base class.
@@ -12,5 +13,5 @@ import type { Modifier } from './modifier';
  * element('my-button', 'icon'); // 'my-button__icon'
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
-export declare function element(baseClass: string, elem: string, additionalClasses: string[]): string;
-export declare function element(baseClass: string, elem: string, modifiers?: Modifier, additionalClasses?: string[]): string;
+export declare function element(baseClass: string, elem: string, additionalClasses: ClassValue[]): string;
+export declare function element(baseClass: string, elem: string, modifiers?: Modifier, additionalClasses?: ClassValue[]): string;

package/js/utils/classNames/bem/index.d.ts

@@ -1,3 +1,4 @@
+import { ClassValue } from 'classnames/types';
 import { block } from './block';
 import { element } from './element';
 import { type Modifier } from './modifier';
@@ -6,12 +7,12 @@ import { type Modifier } from './modifier';
  */
 export declare function bem(baseName: string): {
     block: {
-        (additionalClasses: string[]): string;
-        (modifiers?: Modifier, additionalClasses?: string[]): string;
+        (additionalClasses: ClassValue[]): string;
+        (modifiers?: Modifier, additionalClasses?: ClassValue[]): string;
     };
     element: {
-        (elem: string, additionalClasses: string[]): string;
-        (elem: string, modifiers?: Modifier, additionalClasses?: string[]): string;
+        (elem: string, additionalClasses: ClassValue[]): string;
+        (elem: string, modifiers?: Modifier, additionalClasses?: ClassValue[]): string;
     };
     modifier: (modifiers: Modifier) => string;
 };

package/lumx.css

@@ -685,6 +685,18 @@
  * List of deprecated v2 variables that have been removed or renamed.
  * Warning: These will be removed in the next major version.
  */
+/**
+ * Add styles before & after an element while avoiding having a "before" section display if an "after" section was
+ displayed.
+ */
+/**
+ * Automatic divider between elements of a list using border before and after the element
+ *
+ * @param $orientation  Required 'vertical'/'horizontal' orientation
+ * @param $selector     Optional element selector to apply to (default to parent '&' selector)
+ * @param $theme        Optional 'theme-light'/'theme-dark' (defaults to 'theme-light')
+ * @param $spacing      Optional spacing around dividers (defaults to $lumx-spacing-unit-regular)
+ */
 /* stylelint-disable custom-property-pattern */
 /** @deprecated: replaced with $lumx-progress-circular-size-map */
 /**
@@ -5057,6 +5069,88 @@ table {
   width: 100%;
 }
 
+/* ==========================================================================
+   Combobox Divider
+   ========================================================================== */
+.lumx-combobox-divider:last-child, .lumx-combobox-divider:first-child {
+  display: none;
+}
+
+/* ==========================================================================
+   Combobox Option
+   ========================================================================== */
+.lumx-combobox-option {
+  position: relative;
+}
+.lumx-combobox-option__content {
+  gap: 0;
+}
+.lumx-combobox-option__content--is-disabled {
+  opacity: 0.5;
+}
+.lumx-combobox-option__trigger {
+  color: rgba(0, 0, 0, 0.87);
+  text-decoration: none;
+  overflow: hidden;
+  overflow-wrap: break-word;
+}
+.lumx-combobox-option__trigger::before {
+  content: "";
+  cursor: pointer;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  z-index: 2;
+}
+.lumx-combobox-option__after {
+  z-index: 3;
+}
+
+/* ==========================================================================
+   Combobox Listbox
+   ========================================================================== */
+.lumx-combobox-listbox:empty {
+  padding: 0;
+}
+.lumx-combobox-listbox__state {
+  text-align: center;
+  margin: 8px;
+}
+
+/* ==========================================================================
+   Combobox Option more Info
+   ========================================================================== */
+.lumx-combobox-option-more-info__popover {
+  padding: 16px;
+  max-width: 256px;
+}
+
+/* ==========================================================================
+   Combobox Section
+   ========================================================================== */
+.lumx-combobox-section:not(:first-child):not(.lumx-combobox-section + .lumx-combobox-section):not(.visually-hidden + .lumx-combobox-section)::before {
+  content: "";
+  display: block;
+  height: 1px;
+  margin: 0;
+  border: none;
+  background-color: var(--lumx-color-dark-L5);
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+.lumx-combobox-section:not(:last-child):not(:has(+ .visually-hidden)):not(:has(+ [aria-hidden=true]))::after {
+  content: "";
+  display: block;
+  height: 1px;
+  margin: 0;
+  border: none;
+  background-color: var(--lumx-color-dark-L5);
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
 /* ==========================================================================
    Checkbox
    ========================================================================== */

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^4.3.2-alpha.6",
+        "@lumx/icons": "^4.3.2-alpha.7",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.23",
@@ -22,11 +22,6 @@
     "license": "MIT",
     "type": "module",
     "name": "@lumx/core",
-    "exports": {
-        "./src/js/constants/*": "./src/js/constants/*",
-        "./src/js/types/*": "./src/js/types/*",
-        "./src/js/utils/*": "./src/js/utils/*"
-    },
     "publishConfig": {
         "directory": "dist"
     },
@@ -42,7 +37,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.3.2-alpha.6",
+    "version": "4.3.2-alpha.7",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",

package/scss/_components.scss

@@ -3,6 +3,7 @@
 @import "./components/checkbox/mixins";
 @import "./components/chip/variables";
 @import "./components/chip/mixins";
+@import "./components/combobox/mixins";
 @import "./components/dialog/variables";
 @import "./components/divider/variables";
 @import "./components/divider/mixins";

package/scss/components/combobox/_index.scss

@@ -0,0 +1,86 @@
+/* ==========================================================================
+   Combobox Divider
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-combobox-divider {
+    // Hide if first or last in list
+    &:last-child,
+    &:first-child {
+        display: none;
+    }
+}
+
+/* ==========================================================================
+   Combobox Option
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-combobox-option {
+    position: relative;
+
+    &__content {
+        // TODO: migrate away from using lumx-list-item styles https://lumapps.atlassian.net/browse/DSW-288
+        gap: 0;
+
+        &--is-disabled {
+            opacity: .5;
+        }
+    }
+
+    &__trigger {
+        color: $lumx-color-dark-N;
+        text-decoration: none;
+        overflow: hidden;
+        overflow-wrap: break-word;
+
+        // Make the whole item clickable
+        &::before {
+            content: '';
+            cursor: pointer;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            top: 0;
+            z-index: 2;
+        }
+    }
+
+    &__after {
+        z-index: 3;
+    }
+}
+
+/* ==========================================================================
+   Combobox Listbox
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-combobox-listbox {
+  &:empty {
+    padding: 0;
+  }
+
+  &__state {
+    text-align: center;
+    margin: $lumx-spacing-unit-regular;
+  }
+}
+
+/* ==========================================================================
+   Combobox Option more Info
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-combobox-option-more-info {
+  &__popover {
+    padding: $lumx-spacing-unit-big;
+    max-width: $lumx-size-xxl;
+  }
+}
+
+
+/* ==========================================================================
+   Combobox Section
+   ========================================================================== */
+
+.#{$lumx-base-prefix}-combobox-section {
+  @include auto-list-divider($orientation: 'vertical');
+}

package/scss/components/combobox/_mixins.scss

@@ -0,0 +1,63 @@
+/**
+ * Add styles before & after an element while avoiding having a "before" section display if an "after" section was
+ displayed.
+ */
+@mixin between($selector) {
+  &:not(:first-child):not(#{$selector} + #{$selector}):not(.visually-hidden + #{$selector}) {
+    @content('before')
+  }
+  &:not(:last-child):not(:has(+ .visually-hidden)):not(:has(+ [aria-hidden=true])) {
+    @content('after')
+  }
+}
+
+@mixin vertical-divider($color: 'theme-light') {
+  @include lumx-divider($color);
+  height: 20px;
+  margin: auto 0;
+  width: 1px;
+}
+
+/**
+ * Automatic divider between elements of a list using border before and after the element
+ *
+ * @param $orientation  Required 'vertical'/'horizontal' orientation
+ * @param $selector     Optional element selector to apply to (default to parent '&' selector)
+ * @param $theme        Optional 'theme-light'/'theme-dark' (defaults to 'theme-light')
+ * @param $spacing      Optional spacing around dividers (defaults to $lumx-spacing-unit-regular)
+ */
+@mixin auto-list-divider($orientation, $selector: &, $theme: 'theme-light', $spacing: $lumx-spacing-unit-regular) {
+  $start: if($orientation == 'vertical', 'top', 'left');
+  $end: if($orientation == 'vertical', 'bottom', 'right');
+
+  @include between($selector) using($position) {
+    @if $position == 'before' {
+      &::before {
+        content: '';
+        display: block;
+        @if $orientation == 'horizontal' {
+          @include vertical-divider($theme);
+        }
+        @if $orientation == 'vertical' {
+          @include lumx-divider($theme);
+        }
+        margin-#{$start}: $spacing;
+        margin-#{$end}: $spacing;
+      }
+    }
+    @if $position == 'after' {
+      &::after {
+        content: '';
+        display: block;
+        @if $orientation == 'horizontal' {
+          @include vertical-divider($theme);
+        }
+        @if $orientation == 'vertical' {
+          @include lumx-divider($theme);
+        }
+        margin-#{$start}: $spacing;
+        margin-#{$end}: $spacing;
+      }
+    }
+  }
+}

package/scss/lumx.scss

@@ -20,6 +20,7 @@
 @import "./components/avatar/index";
 @import "./components/badge/index";
 @import "./components/button/index";
+@import "./components/combobox/index";
 @import "./components/checkbox/index";
 @import "./components/chip/index";
 @import "./components/comment-block/index";