@redsift/design-system 9.0.0 → 9.1.0

package/index.d.ts

@@ -1672,14 +1672,19 @@ type PillSize = ValueOf<typeof PillSize>;
 interface PillProps extends ComponentProps<'div'>, StylingProps {
     /** Whether the badge should automatically break content. */
     autoBreak?: boolean;
+    /** Right button. Usually used to remove the pill but can be used for anything else. An icon should be provided as the only content. By default the icon is an cross. No action is automated here, an onClick should be provided. */
+    rightButton?: Omit<IconButtonProps, 'ref' | 'color'>;
     /** Color variant. The product colors are available but should only be used to display the Pill in the color of another product. To display a Pill with a color of the current product, use `default`. */
-    color?: PresentationColorPalette | 'white' | 'black' | 'no-data' | 'error' | 'warning' | 'success' | 'error-dark' | 'warning-dark' | 'success-dark';
+    color?: PresentationColorPalette | 'white' | 'black' | 'no-data' | 'error' | 'warning' | 'success' | 'error-dark' | 'warning-dark' | 'success-dark' | (string & {});
+    /** Color to use on hover. */
+    hoverColor?: string;
     /** Size of the Pill. */
     size?: PillSize;
 }
 type StyledPillProps = Omit<PillProps, 'color' | 'autoBreak'> & {
     $autoBreak: PillProps['autoBreak'];
     $color: PillProps['color'];
+    $hoverColor: PillProps['hoverColor'];
     $size: PillProps['size'];
 };
 
@@ -2759,6 +2764,11 @@ interface TextFieldProps extends Omit<ComponentProps<'div'>, 'onChange'>, Stylin
     onChange?(value?: string, name?: string, event?: ChangeEvent<HTMLInputElement>): void;
     /** Method to handle component clear. */
     onClear?(): void;
+    /** List of Pills. */
+    pills?: {
+        label: string;
+        value: string;
+    }[];
     /** Placeholder. */
     placeholder?: string;
     /** Input type. */

package/index.js

@@ -5039,7 +5039,7 @@ const StyledCheckbox = styled.label`
   width: fit-content;
   ${baseStyling}
 
-  align-items: center;
+  align-items: flex-start;
   background: none;
   border: none;
   display: inline-flex;
@@ -5075,6 +5075,7 @@ const StyledCheckbox = styled.label`
     line-height: var(--redsift-typography-body-line-height);
     padding-left: 4px;
     padding-right: 16px;
+    padding-top: 2px;
 
     [dir='rtl'] & {
       padding-left: 16px;
@@ -5793,11 +5794,50 @@ const PillSize = {
  * Component props.
  */
 
+const pickTextColorBasedOnBgColorAdvanced = (bgColor, lightColor, darkColor) => {
+  var color = bgColor.charAt(0) === '#' ? bgColor.substring(1, 7) : bgColor;
+  var r = parseInt(color.substring(0, 2), 16); // hexToR
+  var g = parseInt(color.substring(2, 4), 16); // hexToG
+  var b = parseInt(color.substring(4, 6), 16); // hexToB
+  var uicolors = [r / 255, g / 255, b / 255];
+  var c = uicolors.map(col => {
+    if (col <= 0.03928) {
+      return col / 12.92;
+    }
+    return Math.pow((col + 0.055) / 1.055, 2.4);
+  });
+  var L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+  return L > 0.179 ? darkColor : lightColor;
+};
+const nameToHex = color => {
+  return [...Object.keys(PresentationColorPalette), 'white', 'black', 'no-data', 'error', 'warning', 'success', 'error-dark', 'warning-dark', 'success-dark'].includes(color) ? {
+    green: RedsiftColorPresentationGreenLight,
+    pink: RedsiftColorPresentationPinkLight,
+    aqua: RedsiftColorPresentationAquaLight,
+    brown: RedsiftColorPresentationBrownLight,
+    red: RedsiftColorPresentationRedLight,
+    yellow: RedsiftColorPresentationYellowLight,
+    purple: RedsiftColorPresentationPurpleLight,
+    orange: RedsiftColorPresentationOrangeLight,
+    blue: RedsiftColorPresentationBlueLight,
+    grey: RedsiftColorPresentationGreyLight,
+    white: RedsiftColorNeutralWhite,
+    black: RedsiftColorNeutralBlack,
+    'no-data': RedsiftColorNeutralMidgrey,
+    error: RedsiftColorPresentationRedLighter,
+    warning: RedsiftColorPresentationOrangeLighter,
+    success: RedsiftColorPresentationGreenLighter,
+    'error-dark': RedsiftColorPresentationRedDefault,
+    'warning-dark': RedsiftColorPresentationOrangeDefault,
+    'success-dark': RedsiftColorPresentationGreenDefault
+  }[color] : color;
+};
+
 /**
  * Component style.
  */
 const StyledPill = styled.div`
-  align-items: center;
+  align-items: stretch;
   display: inline-flex;
   gap: 4px;
   width: fit-content;
@@ -5806,65 +5846,94 @@ const StyledPill = styled.div`
   border-radius: 2px;
   padding: 2px 8px;
   text-align: center;
-  
-  ${_ref => {
+
+  .redsift-pill-content {
+    ${_ref => {
   let {
     $autoBreak
   } = _ref;
   return !$autoBreak ? css`
-          text-wrap: nowrap;
-        ` : css`
-          word-break: break-word;
-        `;
+            text-wrap: nowrap;
+          ` : css`
+            word-break: break-word;
+          `;
 }};
 
+    align-items: center;
+    display: inline-flex;
+    gap: 4px;
+    width: fit-content;
+  }
+
   ${_ref2 => {
   let {
-    $color
+    $color,
+    $hoverColor,
+    $size
   } = _ref2;
   return css`
     ${$color === 'black' ? 'background-color: var(--redsift-color-neutral-black);' : $color === 'white' ? css`
           background-color: var(--redsift-color-neutral-white);
           border: 1px solid #d6d6d6;
-        ` : $color === 'no-data' ? 'background-color: var(--redsift-color-neutral-midgrey);' : $color === 'error' ? 'background-color: var(--redsift-color-presentation-red-lighter);' : $color === 'warning' ? 'background-color: var(--redsift-color-presentation-orange-lighter);' : $color === 'success' ? 'background-color: var(--redsift-color-presentation-green-lighter);' : $color === 'error-dark' ? 'background-color: var(--redsift-color-presentation-red-default);' : $color === 'warning-dark' ? 'background-color: var(--redsift-color-presentation-orange-default);' : $color === 'success-dark' ? 'background-color: var(--redsift-color-presentation-green-default);' : `background-color: var(--redsift-color-presentation-${$color}-light);`}
+        ` : $color === 'no-data' ? 'background-color: var(--redsift-color-neutral-midgrey);' : $color === 'error' ? 'background-color: var(--redsift-color-presentation-red-lighter);' : $color === 'warning' ? 'background-color: var(--redsift-color-presentation-orange-lighter);' : $color === 'success' ? 'background-color: var(--redsift-color-presentation-green-lighter);' : $color === 'error-dark' ? 'background-color: var(--redsift-color-presentation-red-default);' : $color === 'warning-dark' ? 'background-color: var(--redsift-color-presentation-orange-default);' : $color === 'success-dark' ? 'background-color: var(--redsift-color-presentation-green-default);' : Object.keys(PresentationColorPalette).includes($color) ? `background-color: var(--redsift-color-presentation-${$color}-light);` : `background-color: ${$color};`}
 
     &,
     .redsift-icon {
-      color: var(--redsift-color-neutral-${['black', 'no-data', 'error-dark'].includes($color) ? 'white' : 'black'});
+      color: ${pickTextColorBasedOnBgColorAdvanced(nameToHex($color), RedsiftColorNeutralWhite, RedsiftColorNeutralBlack)};
+    }
+
+    button {
+      cursor: pointer;
+      background: none;
+      border: none;
+      border-radius: 0 2px 2px 0;
+      margin: -2px -8px -2px 2px;
+      border-left: 1px solid ${$color === 'white' ? '#d6d6d6' : css`var(--redsift-color-neutral-white)`};
+      font-size: ${$size === PillSize.large ? css`15px` : css`14px`};
+    }
+
+    button:hover {
+      ${$color === 'black' ? 'background-color: var(--redsift-color-neutral-darkgrey);' : $color === 'white' ? 'background-color: var(--redsift-color-neutral-xlightgrey);' : $color === 'no-data' ? 'background-color: var(--redsift-color-neutral-darkgrey);' : $color === 'error' ? 'background-color: var(--redsift-color-presentation-red-light);' : $color === 'warning' ? 'background-color: var(--redsift-color-presentation-orange-light);' : $color === 'success' ? 'background-color: var(--redsift-color-presentation-green-light);' : $color === 'error-dark' ? 'background-color: var(--redsift-color-presentation-red-dark);' : $color === 'warning-dark' ? 'background-color: var(--redsift-color-presentation-orange-dark);' : $color === 'success-dark' ? 'background-color: var(--redsift-color-presentation-green-dark);' : Object.keys(PresentationColorPalette).includes($color) ? `background-color: var(--redsift-color-presentation-${$color}-default);` : ''}
+      background-color: ${$hoverColor};
     }
   `;
 }}}
 
   &,
-  .redsift-icon {
-    font-family: var(--redsift-typography-pill-font-family);
-    font-size: ${_ref3 => {
+  .redsift-pill-content {
+    &,
+    .redsift-icon,
+    .redsift-text,
+    .redsift-number {
+      font-family: var(--redsift-typography-pill-font-family);
+      font-size: ${_ref3 => {
   let {
     $size
   } = _ref3;
   return $size === PillSize.large ? css`var(--redsift-typography-chip-font-size)` : css`var(--redsift-typography-pill-font-size)`;
 }}};
-    font-weight: var(--redsift-typography-pill-font-weight);
-    line-height: ${_ref4 => {
+      font-weight: var(--redsift-typography-pill-font-weight);
+      line-height: ${_ref4 => {
   let {
     $size
   } = _ref4;
   return $size === PillSize.large ? css`var(--redsift-typography-chip-line-height)` : css`var(--redsift-typography-pill-line-height)`;
 }}};
-  }
+    }
 
-  .redsift-icon {
-    width: unset;
-    height: unset;
+    .redsift-icon {
+      width: unset;
+      height: unset;
 
-    > svg {
-      width: 1em;
-      height: 1em;
+      > svg {
+        width: 1em;
+        height: 1em;
+      }
     }
   }
 `;
 
-const _excluded$g = ["autoBreak", "children", "className", "color", "size"];
+const _excluded$g = ["autoBreak", "children", "className", "color", "hoverColor", "rightButton", "size"];
 const COMPONENT_NAME$h = 'Pill';
 const CLASSNAME$h = 'redsift-pill';
 const DEFAULT_PROPS$h = {
@@ -5882,16 +5951,28 @@ const Pill = /*#__PURE__*/forwardRef((props, ref) => {
       children,
       className,
       color,
+      hoverColor,
+      rightButton,
       size
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$g);
   return /*#__PURE__*/React__default.createElement(StyledPill, _extends$1({}, forwardedProps, {
     $autoBreak: autoBreak,
     $color: color,
+    $hoverColor: hoverColor,
     $size: size,
     className: classNames(Pill.className, className),
     ref: ref
-  }), children);
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: `${Pill.className}-content`
+  }, children), rightButton ? /*#__PURE__*/React__default.createElement("button", _extends$1({
+    "aria-label": "Clear",
+    color: "question"
+  }, rightButton, {
+    className: "right clear"
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiClose$1
+  })) : null);
 });
 Pill.className = CLASSNAME$h;
 Pill.defaultProps = DEFAULT_PROPS$h;
@@ -12441,7 +12522,7 @@ const StyledTextField = styled.div`
       pointer-events: none;
       position: absolute;
       text-overflow: ellipsis;
-      top: -8px;
+      top: ${$hasContent ? '-8px' : '-5px'};
       transform-origin: top left;
       transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
         max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
@@ -12468,31 +12549,44 @@ const StyledTextField = styled.div`
     }
 
     .redsift-text-field__input-wrapper {
-      align-items: center;
+      align-items: flex-start;
       box-sizing: border-box;
       cursor: text;
       display: inline-flex;
       position: relative;
-      position: relative;
+    }
+
+    .redsift-text-field__pills {
+      align-items: center;
+      box-sizing: border-box;
+      display: flex;
+      flex-wrap: wrap;
+      flex: 1 1 auto;
+      padding-bottom: 6px;
+      ${$variant !== TextFieldVariant.underline && !$hasLeftIcon ? css`
+            padding-left: 16px;
+          ` : ''}
+      padding-top: 10px;
+
+      .redsift-pill {
+        margin: 3px 6px 3px 0;
+      }
     }
 
     .redsift-text-field-input-wrapper__input {
       background: none;
       border: 0;
       box-sizing: content-box;
-      display: block;
+      display: flex;
+      flex: 1 1 auto;
       font-family: var(--redsift-typography-input-text-font-family);
       font-size: var(--redsift-typography-input-text-font-size);
       font-weight: var(--redsift-typography-input-text-font-weight);
       line-height: var(--redsift-typography-input-text-line-height);
       min-width: 0;
-      padding-bottom: 6px;
-
-      ${$variant !== TextFieldVariant.underline ? css`
-            padding-left: 16px;
-          ` : ''}
-      padding-top: 10px;
-      width: 100%;
+      min-width: 100px;
+      padding: 2px 0;
+      width: auto;
 
       ${$isDisabled ? css`
             color: var(--redsift-color-notifications-no-data-primary);
@@ -12573,22 +12667,33 @@ const StyledTextField = styled.div`
       padding: 2px;
     }
 
+    .redsift-text-field-input-wrapper__toolbar {
+      position: relative;
+      top: 9px;
+    }
+
     ${$variant !== TextFieldVariant.underline ? css`
           .redsift-icon.left {
             padding-left: 12px;
-            margin-right: -8px;
+            padding-right: 8px;
             line-height: 28px;
+            top: 10px;
           }
 
           .redsift-text-field-input-wrapper__toolbar {
             padding-right: 8px;
           }
-        ` : ''}
+        ` : css`
+          .redsift-icon.left {
+            padding-right: 8px;
+            top: 10px;
+          }
+        `}
   `;
 }}
 `;
 
-const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "hasClearButton", "after", "internal", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "placeholder", "type", "value", "variant"];
+const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "className", "defaultValue", "hasClearButton", "after", "internal", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "leftIcon", "name", "onBlur", "onChange", "onClear", "onFocus", "pills", "placeholder", "type", "value", "variant"];
 const COMPONENT_NAME = 'TextField';
 const CLASSNAME = 'redsift-text-field';
 const DEFAULT_PROPS = {
@@ -12625,6 +12730,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
       onChange,
       onClear,
       onFocus: onFocusProps,
+      pills,
       placeholder,
       type,
       value: propsValue,
@@ -12676,7 +12782,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     setValue('');
   }, [onChange]);
   return /*#__PURE__*/React__default.createElement(StyledTextField, _extends$1({}, focusWithinProps, forwardedProps, {
-    $hasContent: isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder),
+    $hasContent: isFocusWithin || Boolean(isControlled ? propsValue : value) || Boolean(placeholder) || Boolean(pills && pills.length > 0),
     $hasLeftIcon: Boolean(leftIcon),
     $isColored: isColored,
     $isDisabled: isDisabled,
@@ -12696,7 +12802,13 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
   }, leftIcon, {
     "aria-hidden": "true",
     className: "left"
-  })) : null, /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, {
+  })) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: `${TextField.className}__pills`
+  }, pills === null || pills === void 0 ? void 0 : pills.map(pill => /*#__PURE__*/React__default.createElement(Pill, {
+    key: pill.value,
+    color: "blue",
+    size: "small"
+  }, pill.label)), /*#__PURE__*/React__default.createElement("input", _extends$1({}, inputProps, {
     onBlur: event => {
       onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
       onBlurProps === null || onBlurProps === void 0 ? void 0 : onBlurProps(event);
@@ -12720,7 +12832,7 @@ const TextField = /*#__PURE__*/forwardRef((props, ref) => {
     ref: inputRef,
     type: type,
     value: isControlled ? propsValue : value
-  })), hasClearButton || internal || after ? /*#__PURE__*/React__default.createElement(Flexbox, {
+  }))), hasClearButton || internal || after ? /*#__PURE__*/React__default.createElement(Flexbox, {
     className: `${TextField.className}-input-wrapper__toolbar`,
     gap: "8px"
   }, hasClearButton ? /*#__PURE__*/React__default.createElement(IconButton, _extends$1({