@loomhq/lens 10.51.3 → 10.51.5

package/dist/components/modal/modal.d.ts

@@ -26,6 +26,7 @@ declare type ModalProps = {
 };
 declare type ModalCardProps = {
     children?: React.ReactNode;
+    id?: string;
     isOpen?: boolean;
     onKeyDown?: React.ReactEventHandler;
     onCloseClick?: React.ReactEventHandler;

package/dist/components/modal/modal.js

@@ -129,7 +129,7 @@ export const ModalCard = (_a) => {
             React.createElement(ModalCardChildrenSection, null, children))));
 };
 const Modal = React.forwardRef((_a, ref) => {
-    var { children, isOpen, mainButton, secondaryButton, alternativeButton, title, noPadding, onCloseClick, onBackgroundClick, onKeyDown, hasDividers, maxWidth = 60, zIndex = 1000 } = _a, props = __rest(_a, ["children", "isOpen", "mainButton", "secondaryButton", "alternativeButton", "title", "noPadding", "onCloseClick", "onBackgroundClick", "onKeyDown", "hasDividers", "maxWidth", "zIndex"]);
+    var { children, id, isOpen, mainButton, secondaryButton, alternativeButton, title, noPadding, onCloseClick, onBackgroundClick, onKeyDown, hasDividers, maxWidth = 60, zIndex = 1000 } = _a, props = __rest(_a, ["children", "id", "isOpen", "mainButton", "secondaryButton", "alternativeButton", "title", "noPadding", "onCloseClick", "onBackgroundClick", "onKeyDown", "hasDividers", "maxWidth", "zIndex"]);
     const hasButtons = mainButton || secondaryButton || alternativeButton ? true : false;
     const closeClickHandler = e => {
         if (onBackgroundClick) {
@@ -144,7 +144,7 @@ const Modal = React.forwardRef((_a, ref) => {
             React.createElement(ModalCard, { ref: ref, 
                 // TODO: LNS-148: Add aria labelling for screenreader support
                 // ariaLabelledBy={title}
-                isOpen: isOpen, maxWidth: maxWidth, onCloseClick: onCloseClick },
+                id: id, isOpen: isOpen, maxWidth: maxWidth, onCloseClick: onCloseClick },
                 React.createElement(ContentWrapper, { rows: `${title ? 'auto ' : ''} ${children ? '1fr ' : ''} ${hasButtons ? 'auto' : ''}` },
                     title && (React.createElement(TitleSection, { bottom: children
                             ? 'var(--lns-space-medium)'

package/dist/components/select/select.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import Menu, { MenuItem } from '../menu/menu';
 import React, { useEffect, useState } from 'react';
-import { getColorValue, getSize, getSizeValue, u } from '../../utilities';
+import { getColorValue, getSize, u } from '../../utilities';
 import Downshift from 'downshift';
 import Icon from '../icon/icon';
 import ResizeObserver from 'resize-observer-polyfill';
@@ -35,7 +35,7 @@ const SelectHeaderWrapper = styled.button `
   cursor: pointer;
   width: 100%;
   min-height: ${u(4.5)};
-  padding: 0 ${u(1)} 0 ${props => props.paddingLeft};
+  padding: 0 ${u(1.5)} 0 var(--lns-formFieldHorizontalPadding);
   color: ${getColorValue('body')};
   border: none;
   background-color: ${getColorValue('formFieldBackground')};
@@ -93,7 +93,7 @@ const SelectHeader = ({ getToggleButtonProps, inputValue, selectedItem, selected
                 event.nativeEvent.preventDownshiftDefault = true;
             }
         },
-    }), { hasValue: inputValue || selectedOptionValue, disabled: isDisabled, columns: columns, paddingLeft: getSizeValue(hasIcon ? 'small' : 1.5) }),
+    }), { hasValue: inputValue || selectedOptionValue, disabled: isDisabled, columns: columns }),
         hasIcon && (React.createElement(Icon, { icon: getIcon({ options, selectedItem, selectedOptionValue }), color: color })),
         React.createElement(Text, { hasEllipsis: true, color: hasPlaceholder ? 'grey5' : 'inherit' }, getTitle({
             options,

package/dist/components/text-button/text-button.js

@@ -46,7 +46,7 @@ const TextButtonWrapper = styled.button `
   ${props => getTextSize(sizeStyles[props.size].textSize)};
   padding: 0 ${props => sizeStyles[props.size].xSpace};
   ${props => props.offsetSide &&
-    `margin-${props.offsetSide}: -${sizeStyles[props.size].xSpace}`};
+    `margin-${props.offsetSide}: calc(-1 * ${sizeStyles[props.size].xSpace})`};
 
   &:focus {
     outline: none;

package/dist/components/text-input/text-input.js

@@ -16,16 +16,18 @@ import styled from '@emotion/styled';
 const sizesStyles = {
     small: {
         height: u(4),
+        width: u(5),
         iconSize: 2,
-        padding: u(1.25),
-        withIconPadding: u(4),
+        padding: u(1.75),
+        withIconPadding: u(4.5),
         textSize: 'small',
     },
     medium: {
-        height: `var(--lns-formFieldHeight)`,
+        height: 'var(--lns-formFieldHeight)',
+        width: u(6),
         iconSize: 3,
         padding: 'var(--lns-formFieldHorizontalPadding)',
-        withIconPadding: u(4.5),
+        withIconPadding: u(5.5),
         textSize: 'medium',
     },
 };
@@ -43,7 +45,9 @@ const InputField = styled.input `
   padding-left: ${props => props.icon
     ? sizesStyles[props.inputSize].withIconPadding
     : sizesStyles[props.inputSize].padding};
-  padding-right: var(--lns-formFieldHorizontalPadding);
+  padding-right: ${props => props.icon
+    ? sizesStyles[props.inputSize].withIconPadding
+    : sizesStyles[props.inputSize].padding};
   border-radius: var(--lns-formFieldRadius);
   box-shadow: inset 0 0 0
     ${props => props.hasError
@@ -83,7 +87,8 @@ const InputFieldWrapper = styled.div `
 const IconSection = styled.div `
   position: absolute;
   pointer-events: none;
-  width: ${props => sizesStyles[props.size].height};
+  width: ${props => sizesStyles[props.size].width};
+  // Width isn't equal to iconPadding because we want more space on the left than the right
   height: ${props => sizesStyles[props.size].height};
   display: flex;
   align-items: center;

package/dist/components/textarea/textarea.js

@@ -14,11 +14,11 @@ import { getColorValue, getRadius, getTextSize, u } from '../../utilities';
 import styled from '@emotion/styled';
 const sizesStyles = {
     small: {
-        padding: `${u(0.875)} ${u(1.25)}`,
+        padding: `${u(1.5)} ${u(1.75)}`,
         textSize: 'small',
     },
     medium: {
-        padding: `${u(0.875)} var(--lns-formFieldHorizontalPadding)`,
+        padding: `${u(1.5)} var(--lns-formFieldHorizontalPadding)`,
         textSize: 'medium',
     },
 };

package/dist/css-variables/index.js

@@ -60,8 +60,8 @@ export const formFieldVariables = getCssVarsFromObject(undefined, {
     formFieldBorderWidth: '1px',
     formFieldBorderWidthFocus: '2px',
     formFieldHeight: u(4.5),
-    formFieldRadius: 'var(--lns-radius-thread-xlarge)',
-    formFieldHorizontalPadding: u(1.5),
+    formFieldRadius: 'var(--lns-radius-medium)',
+    formFieldHorizontalPadding: u(2),
     formFieldBorderShadow: `
     inset 0 0 0 var(--lns-formFieldBorderWidth) var(--lns-color-formFieldBorder)
   `,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.51.3",
+  "version": "10.51.5",
   "scripts": {
     "dev": "next",
     "build:next": "next build",