@lumx/core 3.20.1-alpha.8 → 3.21.0

package/package.json

@@ -6,7 +6,6 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "3.19.0",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.21",
@@ -34,7 +33,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.8",
+    "version": "3.21.0",
     "devDependencies": {
         "@rollup/plugin-commonjs": "^19.0.2",
         "@rollup/plugin-terser": "^0.4.4",

package/scss/components/text-field/_index.scss

@@ -104,7 +104,9 @@
     }
 
     &__input-native {
-        #{$self}--theme-light & {
+        resize: none;
+
+        #{$self}--theme-light &, &--theme-light {
             @include lumx-text-field-input-native(lumx-base-const("theme", "LIGHT"));
             @include lumx-text-field-input-content-color(
                 lumx-base-const("state", "DEFAULT"),
@@ -119,7 +121,7 @@
             }
         }
 
-        #{$self}--theme-dark & {
+        #{$self}--theme-dark &, &--theme-dark {
             @include lumx-text-field-input-native(lumx-base-const("theme", "DARK"));
             @include lumx-text-field-input-content-color(
                 lumx-base-const("state", "DEFAULT"),
@@ -140,10 +142,6 @@
             min-width: $lumx-text-field-min-width;
             line-height: var(--lumx-material-chip-size-s-height);
         }
-
-        &--textarea {
-            resize: none;
-        }
     }
 
     &__input-clear,

package/js/components/Icon/index.tsx

@@ -1,136 +0,0 @@
-import classNames from 'classnames';
-
-import { mdiAlertCircle } from '@lumx/icons';
-
-import { GenericProps, HasTheme } from '../../types';
-import { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '../../utils/className';
-import { ColorPalette, ColorVariant, ColorWithVariants, Size, Theme } from '../../constants';
-import { InputHelper } from '../InputHelper';
-
-export type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
-
-/**
- * Defines the props of the component.
- */
-export interface IconProps extends GenericProps, HasTheme {
-    /** Color variant. */
-    color?: ColorWithVariants;
-    /** Lightened or darkened variant of the selected icon color. */
-    colorVariant?: ColorVariant;
-    /** Whether the icon has a shape. */
-    hasShape?: boolean;
-    /**
-     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).
-     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
-     */
-    icon: string;
-    /** Size variant. */
-    size?: IconSizes;
-    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */
-    alt?: string;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'Icon';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<IconProps> = {};
-
-/**
- * Icon component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const Icon = (props: IconProps) => {
-    console.log(props);
-    const {
-        className,
-        color: propColor,
-        colorVariant: propColorVariant,
-        hasShape,
-        icon,
-        size,
-        theme,
-        alt,
-        ref,
-        ...forwardedProps
-    } = props;
-    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
-
-    // Color
-    let iconColor = color;
-    if (!iconColor && (hasShape || theme)) {
-        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
-    }
-
-    // Color variant
-    let iconColorVariant = colorVariant;
-    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
-        iconColorVariant = 'L2';
-    }
-
-    // Size
-    let iconSize = size;
-    if (size && hasShape) {
-        if (size === Size.xxs || size === Size.xs) {
-            iconSize = Size.s;
-        } else if (size === Size.xxl) {
-            iconSize = Size.xl;
-        }
-    } else if (hasShape) {
-        iconSize = Size.m;
-    }
-
-    return (
-        <i
-            ref={ref}
-            {...forwardedProps}
-            className={classNames(
-                className,
-                handleBasicClasses({
-                    color: iconColor,
-                    colorVariant: iconColorVariant,
-                    hasShape,
-                    prefix: CLASSNAME,
-                    theme,
-                    size: iconSize,
-                }),
-                !hasShape && `${CLASSNAME}--no-shape`,
-                !hasShape &&
-                    iconColor === ColorPalette.yellow &&
-                    icon === mdiAlertCircle &&
-                    `${CLASSNAME}--has-dark-layer`,
-                `${CLASSNAME}--path`,
-            )}
-        >
-            <InputHelper>test</InputHelper>
-            <svg
-                aria-hidden={alt ? undefined : 'true'}
-                role={alt ? 'img' : undefined}
-                aria-label={alt}
-                height="1em"
-                preserveAspectRatio="xMidYMid meet"
-                style={{ verticalAlign: '-0.125em' }}
-                viewBox="0 0 24 24"
-                width="1em"
-            >
-                <path d={icon} fill="currentColor" />
-            </svg>
-        </i>
-    );
-};
-
-Icon.displayName = COMPONENT_NAME;
-Icon.className = CLASSNAME;
-Icon.defaultProps = DEFAULT_PROPS;

package/js/components/InputHelper/index.tsx

@@ -1,69 +0,0 @@
-import classNames from 'classnames';
-
-import { Theme, Kind } from '../../constants';
-import { GenericProps, HasTheme } from '../../types';
-import { getRootClassName, handleBasicClasses } from '../../utils/className';
-
-export const INPUT_HELPER_CONFIGURATION: Record<string, { color: string }> = {
-    error: {
-        color: 'red',
-    },
-    success: {
-        color: 'green',
-    },
-    warning: {
-        color: 'yellow',
-    },
-};
-
-/**
- * Defines the props of the component.
- */
-export interface InputHelperProps extends GenericProps, HasTheme {
-    /** Helper variant. */
-    kind?: Kind;
-}
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'InputHelper';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS: Partial<InputHelperProps> = {
-    kind: Kind.info,
-};
-
-/**
- * InputHelper component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-export const InputHelper = (props: InputHelperProps, options) => {
-    const defaultTheme = Theme.light;
-    const { className, kind = DEFAULT_PROPS.kind, theme = defaultTheme, ...forwardedProps } = props;
-    const childrenToRender = options && options.slots && options.slots.default ? options.slots.default() : props.children;
-    const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};
-
-    return (
-        <p
-            {...forwardedProps}
-            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color, theme }))}
-        >
-            {childrenToRender}
-        </p>
-    );
-};
-
-InputHelper.displayName = COMPONENT_NAME;
-InputHelper.className = CLASSNAME;
-InputHelper.defaultProps = DEFAULT_PROPS;