@lumx/react 2.1.6 → 2.1.9-alpha-thumbnail

package/esm/_internal/mosaic.js

@@ -7,12 +7,9 @@ import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
-import './constants.js';
 import './mergeRefs.js';
 import './Icon2.js';
 import 'lodash/take';
 export { M as Mosaic } from './Mosaic2.js';
-import './clamp.js';
 import './Thumbnail2.js';
-import 'lodash';
 //# sourceMappingURL=mosaic.js.map

package/esm/_internal/mosaic.js.map

@@ -1 +1 @@
-{"version":3,"file":"mosaic.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}
+{"version":3,"file":"mosaic.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/esm/_internal/post-block.js

@@ -7,13 +7,10 @@ import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
-import './constants.js';
 import './mergeRefs.js';
 import './Icon2.js';
 import 'lodash/isObject';
 export { P as PostBlock } from './PostBlock.js';
-import './clamp.js';
 import './Thumbnail2.js';
-import 'lodash';
 import './types.js';
 //# sourceMappingURL=post-block.js.map

package/esm/_internal/post-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"post-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"post-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/esm/_internal/slider.js

@@ -9,6 +9,5 @@ import 'lodash/kebabCase';
 import 'lodash/noop';
 import './InputHelper.js';
 import './InputLabel.js';
-export { S as Slider } from './Slider2.js';
-export { c as clamp } from './clamp.js';
+export { S as Slider, c as clamp } from './Slider2.js';
 //# sourceMappingURL=slider.js.map

package/esm/_internal/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"slider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/esm/_internal/thumbnail.js

@@ -7,11 +7,8 @@ import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
-import './constants.js';
 import './mergeRefs.js';
 import './Icon2.js';
-import './clamp.js';
 export { T as Thumbnail } from './Thumbnail2.js';
-import 'lodash';
 export { T as ThumbnailAspectRatio, a as ThumbnailVariant } from './types.js';
 //# sourceMappingURL=thumbnail.js.map

package/esm/_internal/thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"thumbnail.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/esm/_internal/user-block.js

@@ -7,12 +7,10 @@ import 'lodash/isBoolean';
 import 'lodash/isEmpty';
 import 'lodash/kebabCase';
 import 'lodash/noop';
-import './constants.js';
 import './mergeRefs.js';
 import './Avatar2.js';
 import './renderLink.js';
 import './Icon2.js';
-import './clamp.js';
 import './Thumbnail2.js';
 import 'lodash';
 export { U as UserBlock } from './UserBlock.js';

package/esm/_internal/user-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/esm/index.js

@@ -74,19 +74,18 @@ export { R as RadioButton, a as RadioGroup } from './_internal/RadioGroup.js';
 export { a as Select, c as SelectMultiple, b as SelectMultipleField, S as SelectVariant } from './_internal/SelectMultiple.js';
 export { S as SideNavigation, a as SideNavigationItem } from './_internal/SideNavigationItem.js';
 export { S as SkeletonCircle, b as SkeletonRectangle, a as SkeletonRectangleVariant, c as SkeletonTypography } from './_internal/SkeletonTypography.js';
-export { S as Slider } from './_internal/Slider2.js';
-export { c as clamp } from './_internal/clamp.js';
+export { S as Slider, c as clamp } from './_internal/Slider2.js';
 export { S as Slideshow, b as SlideshowControls, a as SlideshowItem } from './_internal/SlideshowControls.js';
 export { S as Switch } from './_internal/Switch2.js';
 export { T as Table, a as TableBody, d as TableCell, c as TableCellVariant, e as TableHeader, f as TableRow, b as ThOrder } from './_internal/TableRow.js';
 export { c as Tab, b as TabList, a as TabListLayout, d as TabPanel, T as TabProvider } from './_internal/TabPanel.js';
 export { T as TextField } from './_internal/TextField.js';
 export { T as Thumbnail } from './_internal/Thumbnail2.js';
-import 'lodash';
 export { T as ThumbnailAspectRatio, a as ThumbnailVariant } from './_internal/types.js';
 export { T as Toolbar } from './_internal/Toolbar2.js';
 export { T as Tooltip } from './_internal/Tooltip2.js';
 import 'lodash/debounce';
 export { a as Uploader, U as UploaderVariant } from './_internal/Uploader2.js';
+import 'lodash';
 export { U as UserBlock } from './_internal/UserBlock.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.6",
-        "@lumx/icons": "^2.1.6",
+        "@lumx/core": "^2.1.9-alpha-thumbnail",
+        "@lumx/icons": "^2.1.9-alpha-thumbnail",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.1.6",
-    "gitHead": "239840a0fcbfe1dd0fe8b3bb09a9c640964bd1e1"
+    "version": "2.1.9-alpha-thumbnail",
+    "gitHead": "e89e3ca2d44ff4b4aeb73af5662aea190d93f8a3"
 }

package/src/components/drag-handle/DragHandle.tsx

@@ -40,11 +40,7 @@ export const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((pro
             {...forwardedProps}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
         >
-            <Icon
-                icon={mdiDragVertical}
-                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}
-                size={Size.xs}
-            />
+            <Icon icon={mdiDragVertical} color={theme === Theme.dark ? ColorPalette.light : undefined} size={Size.xs} />
         </div>
     );
 });

package/src/components/flag/Flag.test.tsx

@@ -69,8 +69,9 @@ describe(`<${Flag.displayName} />`, () => {
 
         it('should use the color', () => {
             const color = ColorPalette.green;
-            const { wrapper } = setup({ icon: mdiAbTesting, color });
+            const { wrapper, iconEl } = setup({ icon: mdiAbTesting, color });
 
+            expect(iconEl.prop('color')).toEqual(color);
             expect(wrapper).toHaveClassName(
                 getBasicClass({
                     prefix: CLASSNAME,

package/src/components/flag/Flag.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
-import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
+import { ColorPalette, ColorVariant, Icon, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
 export interface FlagProps extends GenericProps {
@@ -38,7 +38,15 @@ export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) =>
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}
             ref={ref}
         >
-            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}
+            {icon && (
+                <Icon
+                    icon={icon}
+                    color={color}
+                    colorVariant={ColorVariant.D2}
+                    size={Size.xxs}
+                    className={`${CLASSNAME}__icon`}
+                />
+            )}
             <span className={`${CLASSNAME}__label`}>{label}</span>
         </div>
     );

package/src/components/flag/__snapshots__/Flag.test.tsx.snap

@@ -19,6 +19,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="blue"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -33,6 +35,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="dark"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -47,6 +51,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="green"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -61,6 +67,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="primary"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -75,6 +83,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="red"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -89,6 +99,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="secondary"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -103,6 +115,8 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
+      color="yellow"
+      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -121,6 +135,7 @@ exports[`<Flag /> Snapshots and structure should render story 'withIcon' 1`] = `
 >
   <Icon
     className="lumx-flag__icon"
+    colorVariant="D2"
     icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
     size="xxs"
   />

package/src/components/message/Message.tsx

@@ -62,8 +62,8 @@ export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, re
             )}
             {...forwardedProps}
         >
-            {(customIcon || icon) && <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} />}
-            <div className={`${CLASSNAME}__text`}>{children}</div>
+            {(customIcon || icon) && <Icon className="lumx-message__icon" icon={customIcon || icon} size={Size.xs} />}
+            <div className="lumx-message__text">{children}</div>
         </div>
     );
 });

package/src/components/text-field/TextField.stories.tsx

@@ -137,3 +137,33 @@ export const WithAfterElement = ({ theme }: any) => {
         />
     );
 };
+
+export const WithMaxLengthNoLabel = ({ theme }: any) => {
+    const [value, onChange] = React.useState('Value');
+    const multiline = boolean('Multiline', true);
+    const minimumRows = number('Minimum number of rows', 2, { min: 0, max: 100 });
+    const isClearable = boolean('Clearable', true);
+    const hasError = boolean('Has error', true);
+    return (
+        <TextField
+            value={value}
+            placeholder={text('Placeholder', 'Placeholder')}
+            theme={theme}
+            onChange={onChange}
+            multiline={multiline}
+            minimumRows={minimumRows}
+            hasError={hasError}
+            maxLength={200}
+            clearButtonProps={isClearable ? { label: 'Clear' } : undefined}
+            helper={<span>{text('Helper', 'Helper')}</span>}
+            afterElement={
+                <IconButton
+                    label="foo"
+                    emphasis={emphasis('Button emphasis', Emphasis.medium, 'After element')}
+                    size={buttonSize('Button size', Size.s, 'After element')}
+                    icon={mdiTranslate}
+                />
+            }
+        />
+    );
+};

package/src/components/text-field/TextField.tsx

@@ -307,16 +307,18 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                 }),
             )}
         >
-            {label && (
+            {(label || maxLength) && (
                 <div className={`${CLASSNAME}__header`}>
-                    <InputLabel
-                        htmlFor={textFieldId}
-                        className={`${CLASSNAME}__label`}
-                        isRequired={isRequired}
-                        theme={theme}
-                    >
-                        {label}
-                    </InputLabel>
+                    {label && (
+                        <InputLabel
+                            htmlFor={textFieldId}
+                            className={`${CLASSNAME}__label`}
+                            isRequired={isRequired}
+                            theme={theme}
+                        >
+                            {label}
+                        </InputLabel>
+                    )}
 
                     {maxLength && (
                         <div className={`${CLASSNAME}__char-counter`}>