@lumx/core 4.3.2-alpha.0 → 4.3.2-alpha.1

package/CONTRIBUTING.md

@@ -41,18 +41,6 @@ Before opening a Pull Request, please see the Submission Guidelines below.
 You can request a new feature by submitting an issue to our [GitHub Repository](https://github.com/lumapps/design-system/issues).
 If you would like to implement a new feature then consider what kind of change it is, discuss it with us before hand in your issue, so that we can better coordinate our efforts, prevent duplication of work, and help you to craft the change so that it is successfully accepted into the project.
 
-## <a name="create-a-new-react-component-"></a> Want to create a new React Component?
-
-The first step to create a new React component is to run:
-
-```
-yarn scaffold
-```
-
-This script will generate a TSX file for the component code, a TSX file for the component tests and an MDX file to demo this component.
-
-To export your component into the `@lumx/react` NPM package, you also have to make sure to update the `src/index.tsx` file.
-
 ## <a name="submission-guidelines"></a> Submission guidelines
 
 ### Submitting an issue

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

@@ -198,12 +198,3 @@ 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,14 +151,5 @@ 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, REAL_SIZE_FOR_LUMX_SIZE, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace };
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, 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, REAL_SIZE_FOR_LUMX_SIZE, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace } from './enums/index.js';
+export { Alignment, AspectRatio, ColorPalette, ColorVariant, Emphasis, Kind, Orientation, Size, Theme, Typography, TypographyCustom, TypographyInterface, TypographyTitleCustom, WhiteSpace } from './enums/index.js';
 export { VISUALLY_HIDDEN } from './className/index.js';

package/js/types/HasChecked.d.ts

@@ -0,0 +1,6 @@
+export interface HasChecked<C = boolean> {
+    /** Component checked state. */
+    isChecked?: C;
+    /** @alias isChecked */
+    checked?: boolean;
+}

package/js/types/HasDisabled.d.ts

@@ -0,0 +1,6 @@
+export interface HasDisabled {
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** @alias isDisabled */
+    disabled?: boolean;
+}

package/js/types/index.d.ts

@@ -21,6 +21,7 @@ export type { HasRequiredLinkHref } from './HasRequiredLinkHref';
 export type { HasPolymorphicAs } from './HasPolymorphicAs';
 export type { CommonRef } from './CommonRef';
 export type { HasAriaDisabled } from './HasAriaDisabled';
+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,4 +1,3 @@
-import { ClassValue } from 'classnames/types';
 import { type Modifier } from './modifier';
 /**
  * Generates a BEM block + modifier class name string.
@@ -12,5 +11,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: ClassValue[]): string;
-export declare function block(baseName: string, modifiers?: Modifier, additionalClasses?: ClassValue[]): string;
+export declare function block(baseName: string, additionalClasses: string[]): string;
+export declare function block(baseName: string, modifiers?: Modifier, additionalClasses?: string[]): string;

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

@@ -1,4 +1,3 @@
-import { ClassValue } from 'classnames/types';
 import type { Modifier } from './modifier';
 /**
  * Creates a BEM element class generator function for the given base class.
@@ -13,5 +12,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: ClassValue[]): string;
-export declare function element(baseClass: string, elem: string, modifiers?: Modifier, additionalClasses?: ClassValue[]): string;
+export declare function element(baseClass: string, elem: string, additionalClasses: string[]): string;
+export declare function element(baseClass: string, elem: string, modifiers?: Modifier, additionalClasses?: string[]): string;

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

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

package/lumx.css

@@ -685,18 +685,6 @@
  * 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 */
 /**
@@ -5069,88 +5057,6 @@ 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.0",
+        "@lumx/icons": "^4.3.2-alpha.1",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.23",
@@ -37,7 +37,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.3.2-alpha.0",
+    "version": "4.3.2-alpha.1",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",
@@ -61,5 +61,5 @@
         "vite-tsconfig-paths": "^5.1.4",
         "vitest": "^4.0.18"
     },
-    "stableVersion": "4.3.0"
+    "stableVersion": "4.3.1"
 }

package/scss/_components.scss

@@ -3,7 +3,6 @@
 @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/lumx.scss

@@ -20,7 +20,6 @@
 @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";

package/js/types/PartialBy.d.ts

@@ -1,12 +0,0 @@
-/**
- * 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/scss/components/combobox/_index.scss

@@ -1,86 +0,0 @@
-/* ==========================================================================
-   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

@@ -1,63 +0,0 @@
-/**
- * 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;
-      }
-    }
-  }
-}