@leafygreen-ui/chip - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

CHANGELOG.md

 # @leafygreen-ui/chip
 
+## 1.2.0
+
+### Minor Changes
+
+- 3f52c844b: - Adds optional `glyph` prop. The glyph will appear to the left of the chip text.
+
+  ```js
+  <Chip label="chip" glyph={<Icon glyph="Wizard" />} />
+  ```
+
+  - Decrease left and right padding from `6px` to `4px`.
+
 ## 1.1.0
@@ -4,0 +16,0 @@

dist/Chip/Chip.styles.d.ts

@@ -21,25 +21,173 @@ import { Theme } from '@leafygreen-ui/lib';
 }>;
+export declare const variantColor: {
+    readonly blue: {
+        readonly dark: {
+            readonly background: {
+                readonly default: "#0C2657";
+                readonly focus: "#1254B7";
+            };
+            readonly text: {
+                readonly default: "#C3E7FE";
+            };
+            readonly icon: {
+                readonly default: "#C3E7FE";
+            };
+        };
+        readonly light: {
+            readonly background: {
+                readonly default: "#E1F7FF";
+                readonly focus: "#89D2FF";
+            };
+            readonly text: {
+                readonly default: "#0C2657";
+            };
+            readonly icon: {
+                readonly default: "#083C90";
+            };
+        };
+    };
+    readonly red: {
+        readonly dark: {
+            readonly background: {
+                readonly default: "#5B0000";
+                readonly focus: "#BB1A1A";
+            };
+            readonly text: {
+                readonly default: "#FFCDC7";
+            };
+            readonly icon: {
+                readonly default: "#FFCDC7";
+            };
+        };
+        readonly light: {
+            readonly background: {
+                readonly default: "#FFEAE5";
+                readonly focus: "#FF9789";
+            };
+            readonly text: {
+                readonly default: "#5B0000";
+            };
+            readonly icon: {
+                readonly default: "#970606";
+            };
+        };
+    };
+    readonly gray: {
+        readonly dark: {
+            readonly background: {
+                readonly default: "#3D4F58";
+                readonly focus: "#889397";
+            };
+            readonly text: {
+                readonly default: "#E8EDEB";
+            };
+            readonly icon: {
+                readonly default: "#C1C7C6";
+            };
+        };
+        readonly light: {
+            readonly background: {
+                readonly default: "#E8EDEB";
+                readonly focus: "#A0A9A8";
+            };
+            readonly text: {
+                readonly default: "#001E2B";
+            };
+            readonly icon: {
+                readonly default: "#5C6C75";
+            };
+        };
+    };
+    readonly green: {
+        readonly dark: {
+            readonly background: {
+                readonly default: "#023430";
+                readonly focus: "#00A35C";
+            };
+            readonly text: {
+                readonly default: "#C0FAE6";
+            };
+            readonly icon: {
+                readonly default: "#C0FAE6";
+            };
+        };
+        readonly light: {
+            readonly background: {
+                readonly default: "#E3FCF7";
+                readonly focus: "#71F6BA";
+            };
+            readonly text: {
+                readonly default: "#023430";
+            };
+            readonly icon: {
+                readonly default: "#00684A";
+            };
+        };
+    };
+    readonly purple: {
+        readonly dark: {
+            readonly background: {
+                readonly default: "#2D0B59";
+                readonly focus: "#892CCA";
+            };
+            readonly text: {
+                readonly default: "#F1D4FD";
+            };
+            readonly icon: {
+                readonly default: "#F1D4FD";
+            };
+        };
+        readonly light: {
+            readonly background: {
+                readonly default: "#F9EBFF";
+                readonly focus: "#E19AFF";
+            };
+            readonly text: {
+                readonly default: "#2D0B59";
+            };
+            readonly icon: {
+                readonly default: "#5E0C9E";
+            };
+        };
+    };
+    readonly yellow: {
+        readonly dark: {
+            readonly background: {
+                readonly default: "#4C2100";
+                readonly focus: "#C27823";
+            };
+            readonly text: {
+                readonly default: "#FFEC9E";
+            };
+            readonly icon: {
+                readonly default: "#FFEC9E";
+            };
+        };
+        readonly light: {
+            readonly background: {
+                readonly default: "#FEF7DB";
+                readonly focus: "#FFD664";
+            };
+            readonly text: {
+                readonly default: "#4C2100";
+            };
+            readonly icon: {
+                readonly default: "#944F01";
+            };
+        };
+    };
+};
+export declare const wrapperBaseStyles: (baseFontSize: BaseFontSize, variant: Variant, theme: Theme) => string;
+export declare const wrapperDisabledStyles: (theme: Theme) => string;
 /**
- * Chip Variants
- */
-export declare const variantColor: Record<Variant, Record<Theme, {
-    color: string;
-    bgColor: string;
-    focusBgColor: string;
-}>>;
-/**
  * Chip wrapper
  */
-export declare const chipWrapperThemeStyle: (variant: Variant, theme: Theme) => string;
-export declare const chipWrapperBaseStyle: string;
-export declare const chipWrapperSizeStyle: (baseFontSize: BaseFontSize) => string;
-export declare const chipWrapperBaseDisabledStyles: string;
-export declare const chipWrapperDisabledStyle: Record<Theme, string>;
+export declare const getWrapperStyles: (baseFontSize: BaseFontSize, variant: Variant, theme: Theme, isDisabled?: boolean) => string;
+export declare const textBaseStyles: (baseFontSize: BaseFontSize, variant: Variant, theme: Theme) => string;
+export declare const textDisabledStyles: (theme: Theme) => string;
+export declare const textDismissibleStyles: string;
 /**
  * Chip text
  */
-export declare const chipTextSizeStyle: (baseFontSize: BaseFontSize) => string;
-export declare const chipTextDismissSizeStyle: string;
-export declare const chipTextStyles: (variant: Variant, theme: Theme) => string;
-export declare const chipTextDisabledStyles: Record<Theme, string>;
+export declare const getTextStyles: (baseFontSize: BaseFontSize, variant: Variant, theme: Theme, isDisabled?: boolean, isDismissible?: boolean) => string;
 //# sourceMappingURL=Chip.styles.d.ts.map

dist/Chip/Chip.types.d.ts

@@ -66,3 +66,9 @@ /// <reference types="react" />
     dismissButtonAriaLabel?: string;
+    /**
+     * An icon glyph rendered before the text.
+     * To use a custom icon, see {@link Icon} {@link https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md#usage-registering-custom-icon-sets | createIconComponent} docs
+     * @type Leafygreen <Icon /> Component
+     */
+    glyph?: React.ReactElement;
 }
 //# sourceMappingURL=Chip.types.d.ts.map

dist/esm/index.js

@@ -1,2 +0,2 @@
-import o,{useMemo as r}from"react";import e from"prop-types";import{css as n,cx as l}from"@leafygreen-ui/emotion";import t from"@leafygreen-ui/inline-definition";import{useDarkMode as i}from"@leafygreen-ui/leafygreen-provider";import{BaseFontSize as a,typeScales as c,transitionDuration as g}from"@leafygreen-ui/tokens";export{BaseFontSize}from"@leafygreen-ui/tokens";import s from"@leafygreen-ui/icon";import{createUniqueClassName as u,Theme as d}from"@leafygreen-ui/lib";import{palette as f}from"@leafygreen-ui/palette";function h(o){var r=function(o,r){if("object"!=typeof o||!o)return o;var e=o[Symbol.toPrimitive];if(void 0!==e){var n=e.call(o,r);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(o)}(o,"string");return"symbol"==typeof r?r:r+""}function b(o,r,e){return(r=h(r))in o?Object.defineProperty(o,r,{value:e,enumerable:!0,configurable:!0,writable:!0}):o[r]=e,o}function p(){return p=Object.assign?Object.assign.bind():function(o){for(var r=1;r<arguments.length;r++){var e=arguments[r];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n])}return o},p.apply(this,arguments)}function C(o,r){if(null==o)return{};var e,n,l=function(o,r){if(null==o)return{};var e,n,l={},t=Object.keys(o);for(n=0;n<t.length;n++)e=t[n],r.indexOf(e)>=0||(l[e]=o[e]);return l}(o,r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(o);for(n=0;n<t.length;n++)e=t[n],r.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(o,e)&&(l[e]=o[e])}return l}function y(o,r){return r||(r=o.slice(0)),Object.freeze(Object.defineProperties(o,{raw:{value:Object.freeze(r)}}))}var k,m,B,v,w,L,D,x,F,O,j,A,P,N,S,z,E={Start:"start",Middle:"middle",End:"end",None:"none"},G={Gray:"gray",Blue:"blue",Green:"green",Purple:"purple",Red:"red",Yellow:"yellow"},R=u("chip-inline-definition"),I=u("chip-text"),M=b(b({},a.Body1,18),a.Body2,20),T=b(b({},a.Body1,c.body1.fontSize),a.Body2,c.body2.fontSize),Y=b(b({},a.Body1,{y:0,x:6}),a.Body2,{y:2,x:6}),Z=b(b(b(b(b(b({},G.Blue,b(b({},d.Dark,{color:f.blue.light2,bgColor:f.blue.dark3,focusBgColor:f.blue.dark1}),d.Light,{color:f.blue.dark3,bgColor:f.blue.light3,focusBgColor:"#89D2FF"})),G.Red,b(b({},d.Dark,{color:f.red.light2,bgColor:f.red.dark3,focusBgColor:"#BB1A1A"}),d.Light,{color:f.red.dark3,bgColor:f.red.light3,focusBgColor:"#FF9789"})),G.Gray,b(b({},d.Dark,{color:f.gray.light2,bgColor:f.gray.dark2,focusBgColor:f.gray.base}),d.Light,{color:f.black,bgColor:f.gray.light2,focusBgColor:"#A0A9A8"})),G.Green,b(b({},d.Dark,{color:f.green.light2,bgColor:f.green.dark3,focusBgColor:f.green.dark1}),d.Light,{color:f.green.dark3,bgColor:f.green.light3,focusBgColor:f.green.light1})),G.Purple,b(b({},d.Dark,{color:f.purple.light2,bgColor:f.purple.dark3,focusBgColor:"#892CCA"}),d.Light,{color:f.purple.dark3,bgColor:f.purple.light3,focusBgColor:"#E19AFF"})),G.Yellow,b(b({},d.Dark,{color:f.yellow.light2,bgColor:f.yellow.dark3,focusBgColor:"#C27823"}),d.Light,{color:f.yellow.dark3,bgColor:f.yellow.light3,focusBgColor:"#FFD664"})),q=function(o,r){return n(k||(k=y(["\n  color: ",";\n  background-color: ",";\n  transition: background-color ","ms ease-in-out;\n"])),Z[o][r].color,Z[o][r].bgColor,g.faster)},X=n(m||(m=y(["\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  white-space: nowrap;\n  box-sizing: border-box;\n  border-radius: 4px;\n"]))),H=function(o){return n(B||(B=y(["\n  font-size: ","px;\n  line-height: ","px;\n"])),T[o],M[o])},J=n(v||(v=y(["\n  cursor: not-allowed;\n"]))),K=b(b({},d.Light,n(w||(w=y(["\n    color: ",";\n    background-color: ",";\n  "])),f.gray.base,f.gray.light3)),d.Dark,n(L||(L=y(["\n    color: ",";\n    background-color: ",";\n    box-shadow: inset 0 0 1px 1px ",";\n  "])),f.gray.dark2,f.gray.dark4,f.gray.dark2)),Q=function(o){return n(D||(D=y(["\n  padding-inline: ","px;\n  padding-block: ","px;\n"])),Y[o].x,Y[o].y)},U=n(x||(x=y(["\n  padding-inline-end: 2px;\n"]))),V=function(o,r){return n(F||(F=y(["\n  &:focus-within {\n    background-color: ",";\n  }\n\n  ."," {\n    &:focus-visible,\n    &:focus {\n      outline: none;\n    }\n  }\n"])),Z[o][r].focusBgColor,R)},W=b(b({},d.Dark,n(O||(O=y(["\n    &:focus-within {\n      background-color: ",";\n    }\n  "])),f.gray.dark1)),d.Light,n(j||(j=y(["\n    &:focus-within {\n      background-color: ",";\n    }\n  "])),f.gray.light1)),$=b(b(b(b(b(b({},G.Blue,b(b({},d.Dark,{color:f.blue.light2,focusBgColor:Z[G.Blue][d.Dark].focusBgColor,hoverBgColor:f.blue.dark2,hoverFocusColor:f.blue.light3}),d.Light,{color:f.blue.dark3,focusBgColor:Z[G.Blue][d.Light].focusBgColor,hoverBgColor:f.blue.light2,hoverFocusColor:f.blue.dark3})),G.Red,b(b({},d.Dark,{color:f.red.light2,focusBgColor:Z[G.Red][d.Dark].focusBgColor,hoverBgColor:f.red.dark2,hoverFocusColor:f.red.light3}),d.Light,{color:f.red.dark3,focusBgColor:Z[G.Red][d.Light].focusBgColor,hoverBgColor:f.red.light2,hoverFocusColor:f.red.dark3})),G.Gray,b(b({},d.Dark,{color:f.gray.light1,focusBgColor:Z[G.Gray][d.Dark].focusBgColor,hoverBgColor:f.gray.dark1,hoverFocusColor:f.gray.light3}),d.Light,{color:f.gray.dark2,focusBgColor:Z[G.Gray][d.Light].focusBgColor,hoverBgColor:f.gray.light1,hoverFocusColor:f.black})),G.Green,b(b({},d.Dark,{color:f.green.light2,focusBgColor:Z[G.Green][d.Dark].focusBgColor,hoverBgColor:f.green.dark2,hoverFocusColor:f.green.light3}),d.Light,{color:f.green.dark3,focusBgColor:Z[G.Green][d.Light].focusBgColor,hoverBgColor:f.green.light2,hoverFocusColor:f.green.dark3})),G.Purple,b(b({},d.Dark,{color:f.purple.light2,focusBgColor:Z[G.Purple][d.Dark].focusBgColor,hoverBgColor:f.purple.dark2,hoverFocusColor:f.purple.light3}),d.Light,{color:f.purple.dark3,focusBgColor:Z[G.Purple][d.Light].focusBgColor,hoverBgColor:f.purple.light2,hoverFocusColor:f.purple.dark3})),G.Yellow,b(b({},d.Dark,{color:f.yellow.light2,focusBgColor:Z[G.Yellow][d.Dark].focusBgColor,hoverBgColor:f.yellow.dark2,hoverFocusColor:f.yellow.light3}),d.Light,{color:f.yellow.dark3,focusBgColor:Z[G.Yellow][d.Light].focusBgColor,hoverBgColor:f.yellow.light2,hoverFocusColor:f.yellow.dark3})),_=n(A||(A=y(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  outline: none;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: background-color ","ms ease-in-out;\n  padding: 0 2px;\n  align-self: stretch;\n"])),g.faster),oo=function(o,r){return n(P||(P=y(["\n  color: ",";\n\n  &:not(:disabled):hover {\n    background-color: ",";\n    color: ",";\n  }\n\n  &:focus-visible {\n    color: ",";\n    background-color: ",";\n\n    &:not(:disabled):hover {\n      background-color: ",";\n    }\n  }\n"])),$[o][r].color,$[o][r].hoverBgColor,$[o][r].hoverFocusColor,$[o][r].hoverFocusColor,$[o][r].focusBgColor,$[o][r].hoverBgColor)},ro=n(N||(N=y(["\n  &:disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n"]))),eo=b(b({},d.Light,n(S||(S=y(["\n    &:disabled {\n      color: ",";\n    }\n  "])),f.gray.light1)),d.Dark,n(z||(z=y(["\n    &:disabled {\n      color: ",";\n    }\n  "])),f.gray.dark2));function no(r){var e=r.label,n=r.disabled,t=r.variant,a=r.onDismiss,c=r.dismissButtonAriaLabel,g=i().theme,u="string"==typeof e?"Deselect ".concat(e):"Deselect",d=c||u;return o.createElement("button",{type:"button","data-testid":"chip-dismiss-button","aria-label":d,"aria-disabled":n,disabled:n,className:l(_,oo(t,g),eo[g],ro),onClick:a},o.createElement(s,{glyph:"X","aria-hidden":!0}))}no.displayName="DismissButton";var lo=["chipTruncationLocation","chipCharacterLimit","disabled","variant","baseFontSize","darkMode","label","onDismiss","popoverZIndex","className","dismissButtonAriaLabel"],to=o.forwardRef((function(e,n){var c=e.chipTruncationLocation,g=void 0===c?E.None:c,s=e.chipCharacterLimit,u=e.disabled,d=void 0!==u&&u,f=e.variant,h=void 0===f?G.Blue:f,y=e.baseFontSize,k=void 0===y?a.Body1:y,m=e.darkMode,B=e.label,v=e.onDismiss,w=e.popoverZIndex,L=e.className,D=e.dismissButtonAriaLabel,x=C(e,lo),F=i(m),O=F.darkMode,j=F.theme,A=Number.isInteger(s)&&"none"!==g&&"string"==typeof B&&!!B&&B.length>s,P=r((function(){return function(o,r,e){var n=o-3;switch(r){case"start":return"…"+e.substring(e.length-n).trim();case"middle":return e.substring(0,n/2).trim()+"…"+e.substring(e.length-n/2).trim();case"end":return e.substring(0,n).trim()+"…";default:return e}}(s,g,B)}),[s,g,B]);return o.createElement("span",p({ref:n,"aria-disabled":d,className:l(X,q(h,j),H(k),b({},l(K[j],J),d),L)},x),o.createElement("span",{"data-testid":"chip-text",className:l(V(h,j),Q(k),b(b({},U,!!v),W[j],d),I)},A?o.createElement(t,{darkMode:O,definition:B,align:"bottom",popoverZIndex:w,className:R},P):B),!!v&&o.createElement(no,{label:B,onDismiss:v,disabled:d,variant:h,dismissButtonAriaLabel:D}))}));to.displayName="Chip",to.propTypes={label:e.string.isRequired,chipCharacterLimit:e.number,chipTruncationLocation:e.oneOf(Object.values(E)),popoverZIndex:e.number,baseFontSize:e.oneOf(Object.values(a)),variant:e.oneOf(Object.values(G)),onDismiss:e.func,dismissButtonAriaLabel:e.string};export{to as Chip,E as TruncationLocation,G as Variant,R as chipInlineDefinitionClassName,I as chipTextClassName};
+import e,{useMemo as r}from"react";import o from"prop-types";import{css as n,cx as t}from"@leafygreen-ui/emotion";import l from"@leafygreen-ui/inline-definition";import{useDarkMode as a}from"@leafygreen-ui/leafygreen-provider";import{BaseFontSize as i,typeScales as u,spacing as c,Property as d,InteractionState as s,transitionDuration as g,color as f}from"@leafygreen-ui/tokens";export{BaseFontSize}from"@leafygreen-ui/tokens";import h from"@leafygreen-ui/icon";import{createUniqueClassName as p,Theme as b}from"@leafygreen-ui/lib";import{palette as k}from"@leafygreen-ui/palette";function y(e){var r=function(e,r){if("object"!=typeof e||!e)return e;var o=e[Symbol.toPrimitive];if(void 0!==o){var n=o.call(e,r);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof r?r:r+""}function v(e,r,o){return(r=y(r))in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function m(){return m=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},m.apply(this,arguments)}function D(e,r){if(null==e)return{};var o,n,t=function(e,r){if(null==e)return{};var o,n,t={},l=Object.keys(e);for(n=0;n<l.length;n++)o=l[n],r.indexOf(o)>=0||(t[o]=e[o]);return t}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)o=l[n],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(t[o]=e[o])}return t}function B(e,r){return r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))}var C,x,F,w,L,O,I,j,T,A,P,N={Start:"start",Middle:"middle",End:"end",None:"none"},S={Gray:"gray",Blue:"blue",Green:"green",Purple:"purple",Red:"red",Yellow:"yellow"},E=p("chip-inline-definition"),G=p("chip-text"),z=v(v({},i.Body1,18),i.Body2,20),R=v(v({},i.Body1,u.body1.fontSize),i.Body2,u.body2.fontSize),M=v(v({},i.Body1,{y:c[0],x:c[100]}),i.Body2,{y:c[50],x:c[100]}),Y=v(v(v(v(v(v({},S.Blue,v(v({},b.Dark,v(v(v({},d.Background,v(v({},s.Default,k.blue.dark3),s.Focus,k.blue.dark1)),d.Text,v({},s.Default,k.blue.light2)),d.Icon,v({},s.Default,k.blue.light2))),b.Light,v(v(v({},d.Background,v(v({},s.Default,k.blue.light3),s.Focus,"#89D2FF")),d.Text,v({},s.Default,k.blue.dark3)),d.Icon,v({},s.Default,k.blue.dark2)))),S.Red,v(v({},b.Dark,v(v(v({},d.Background,v(v({},s.Default,k.red.dark3),s.Focus,"#BB1A1A")),d.Text,v({},s.Default,k.red.light2)),d.Icon,v({},s.Default,k.red.light2))),b.Light,v(v(v({},d.Background,v(v({},s.Default,k.red.light3),s.Focus,"#FF9789")),d.Text,v({},s.Default,k.red.dark3)),d.Icon,v({},s.Default,k.red.dark2)))),S.Gray,v(v({},b.Dark,v(v(v({},d.Background,v(v({},s.Default,k.gray.dark2),s.Focus,k.gray.base)),d.Text,v({},s.Default,k.gray.light2)),d.Icon,v({},s.Default,k.gray.light1))),b.Light,v(v(v({},d.Background,v(v({},s.Default,k.gray.light2),s.Focus,"#A0A9A8")),d.Text,v({},s.Default,k.black)),d.Icon,v({},s.Default,k.gray.dark1)))),S.Green,v(v({},b.Dark,v(v(v({},d.Background,v(v({},s.Default,k.green.dark3),s.Focus,k.green.dark1)),d.Text,v({},s.Default,k.green.light2)),d.Icon,v({},s.Default,k.green.light2))),b.Light,v(v(v({},d.Background,v(v({},s.Default,k.green.light3),s.Focus,k.green.light1)),d.Text,v({},s.Default,k.green.dark3)),d.Icon,v({},s.Default,k.green.dark2)))),S.Purple,v(v({},b.Dark,v(v(v({},d.Background,v(v({},s.Default,k.purple.dark3),s.Focus,"#892CCA")),d.Text,v({},s.Default,k.purple.light2)),d.Icon,v({},s.Default,k.purple.light2))),b.Light,v(v(v({},d.Background,v(v({},s.Default,k.purple.light3),s.Focus,"#E19AFF")),d.Text,v({},s.Default,k.purple.dark3)),d.Icon,v({},s.Default,k.purple.dark2)))),S.Yellow,v(v({},b.Dark,v(v(v({},d.Background,v(v({},s.Default,k.yellow.dark3),s.Focus,"#C27823")),d.Text,v({},s.Default,k.yellow.light2)),d.Icon,v({},s.Default,k.yellow.light2))),b.Light,v(v(v({},d.Background,v(v({},s.Default,k.yellow.light3),s.Focus,"#FFD664")),d.Text,v({},s.Default,k.yellow.dark3)),d.Icon,v({},s.Default,k.yellow.dark2)))),Z=v(v({},b.Dark,k.gray.dark1),b.Light,k.gray.light1),q=v(v({},b.Dark,k.gray.dark2),b.Light,k.gray.base),X=function(e,r,o){var l=arguments.length>3&&void 0!==arguments[3]&&arguments[3];return t(function(e,r,o){return n(C||(C=B(["\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  white-space: nowrap;\n  border-radius: 4px;\n  font-size: ","px;\n  line-height: ","px;\n\n  color: ",";\n  background-color: ",";\n  transition: background-color ","ms ease-in-out;\n"])),R[e],z[e],Y[r][o].text.default,Y[r][o].background.default,g.faster)}(e,r,o),v({},function(e){return t(n(x||(x=B(["\n      cursor: not-allowed;\n      background-color: ",";\n      color: ",";\n    "])),f[e].background.secondary.default,q[e]),v({},n(F||(F=B(["\n        box-shadow: inset 0 0 1px 1px ",";\n      "])),k.gray.dark2),e===b.Dark))}(o),l))},H=n(O||(O=B(["\n  padding-inline-end: ","px;\n"])),c[50]),J=function(e,r,o){var l=arguments.length>3&&void 0!==arguments[3]&&arguments[3],a=arguments.length>4&&void 0!==arguments[4]&&arguments[4];return t(function(e,r,o){return n(w||(w=B(["\n  padding-inline: ","px;\n  padding-block: ","px;\n\n  display: flex;\n  gap: ","px;\n\n  svg {\n    align-self: center;\n    color: ",";\n  }\n\n  &:focus-within {\n    background-color: ",";\n  }\n\n  ."," {\n    &:focus-visible,\n    &:focus {\n      outline: none;\n    }\n  }\n"])),M[e].x,M[e].y,c[50],Y[r][o].icon.default,Y[r][o].background.focus,E)}(e,r,o),v(v({},function(e){return n(L||(L=B(["\n  svg {\n    color: ",";\n  }\n\n  // truncated + disabled + focused styles (a truncated disabled chip is still focusable)\n  &:focus-within {\n    background-color: ",";\n  }\n"])),f[e].icon.disabled.default,Z[e])}(o),l),H,a))},K=v(v(v(v(v(v({},S.Blue,v(v({},b.Dark,{color:k.blue.light2,focusBgColor:Y[S.Blue][b.Dark].background.focus,hoverBgColor:k.blue.dark2,hoverFocusColor:k.blue.light3}),b.Light,{color:k.blue.dark3,focusBgColor:Y[S.Blue][b.Light].background.focus,hoverBgColor:k.blue.light2,hoverFocusColor:k.blue.dark3})),S.Red,v(v({},b.Dark,{color:k.red.light2,focusBgColor:Y[S.Red][b.Dark].background.focus,hoverBgColor:k.red.dark2,hoverFocusColor:k.red.light3}),b.Light,{color:k.red.dark3,focusBgColor:Y[S.Red][b.Light].background.focus,hoverBgColor:k.red.light2,hoverFocusColor:k.red.dark3})),S.Gray,v(v({},b.Dark,{color:k.gray.light1,focusBgColor:Y[S.Gray][b.Dark].background.focus,hoverBgColor:k.gray.dark1,hoverFocusColor:k.gray.light3}),b.Light,{color:k.gray.dark2,focusBgColor:Y[S.Gray][b.Light].background.focus,hoverBgColor:k.gray.light1,hoverFocusColor:k.black})),S.Green,v(v({},b.Dark,{color:k.green.light2,focusBgColor:Y[S.Green][b.Dark].background.focus,hoverBgColor:k.green.dark2,hoverFocusColor:k.green.light3}),b.Light,{color:k.green.dark3,focusBgColor:Y[S.Green][b.Light].background.focus,hoverBgColor:k.green.light2,hoverFocusColor:k.green.dark3})),S.Purple,v(v({},b.Dark,{color:k.purple.light2,focusBgColor:Y[S.Purple][b.Dark].background.focus,hoverBgColor:k.purple.dark2,hoverFocusColor:k.purple.light3}),b.Light,{color:k.purple.dark3,focusBgColor:Y[S.Purple][b.Light].background.focus,hoverBgColor:k.purple.light2,hoverFocusColor:k.purple.dark3})),S.Yellow,v(v({},b.Dark,{color:k.yellow.light2,focusBgColor:Y[S.Yellow][b.Dark].background.focus,hoverBgColor:k.yellow.dark2,hoverFocusColor:k.yellow.light3}),b.Light,{color:k.yellow.dark3,focusBgColor:Y[S.Yellow][b.Light].background.focus,hoverBgColor:k.yellow.light2,hoverFocusColor:k.yellow.dark3})),Q=n(I||(I=B(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  outline: none;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: background-color ","ms ease-in-out;\n  padding: 0 2px;\n  align-self: stretch;\n"])),g.faster),U=function(e,r){return n(j||(j=B(["\n  color: ",";\n\n  &:not(:disabled):hover {\n    background-color: ",";\n    color: ",";\n  }\n\n  &:focus-visible {\n    color: ",";\n    background-color: ",";\n\n    &:not(:disabled):hover {\n      background-color: ",";\n    }\n  }\n"])),K[e][r].color,K[e][r].hoverBgColor,K[e][r].hoverFocusColor,K[e][r].hoverFocusColor,K[e][r].focusBgColor,K[e][r].hoverBgColor)},V=n(T||(T=B(["\n  &:disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n"]))),W=v(v({},b.Light,n(A||(A=B(["\n    &:disabled {\n      color: ",";\n    }\n  "])),k.gray.light1)),b.Dark,n(P||(P=B(["\n    &:disabled {\n      color: ",";\n    }\n  "])),k.gray.dark2));function $(r){var o=r.label,n=r.disabled,l=r.variant,i=r.onDismiss,u=r.dismissButtonAriaLabel,c=a().theme,d="string"==typeof o?"Deselect ".concat(o):"Deselect",s=u||d;return e.createElement("button",{type:"button","data-testid":"chip-dismiss-button","aria-label":s,"aria-disabled":n,disabled:n,className:t(Q,U(l,c),W[c],V),onClick:i},e.createElement(h,{glyph:"X","aria-hidden":!0}))}$.displayName="DismissButton";var _=["chipTruncationLocation","chipCharacterLimit","disabled","variant","baseFontSize","darkMode","label","onDismiss","popoverZIndex","className","dismissButtonAriaLabel","glyph"],ee=e.forwardRef((function(o,n){var u=o.chipTruncationLocation,c=void 0===u?N.None:u,d=o.chipCharacterLimit,s=o.disabled,g=void 0!==s&&s,f=o.variant,h=void 0===f?S.Blue:f,p=o.baseFontSize,b=void 0===p?i.Body1:p,k=o.darkMode,y=o.label,v=o.onDismiss,B=o.popoverZIndex,C=o.className,x=o.dismissButtonAriaLabel,F=o.glyph,w=D(o,_),L=a(k),O=L.darkMode,I=L.theme,j=Number.isInteger(d)&&"none"!==c&&"string"==typeof y&&!!y&&y.length>d,T=r((function(){return function(e,r,o){var n=e-3;switch(r){case"start":return"…"+o.substring(o.length-n).trim();case"middle":return o.substring(0,n/2).trim()+"…"+o.substring(o.length-n/2).trim();case"end":return o.substring(0,n).trim()+"…";default:return o}}(d,c,y)}),[d,c,y]);return e.createElement("span",m({ref:n,"aria-disabled":g,className:t(X(b,h,I,g),C)},w),e.createElement("span",{"data-testid":"chip-text",className:t(J(b,h,I,g,!!v),G)},F,j?e.createElement(l,{darkMode:O,definition:y,align:"bottom",popoverZIndex:B,className:E},T):y),!!v&&e.createElement($,{label:y,onDismiss:v,disabled:g,variant:h,dismissButtonAriaLabel:x}))}));ee.displayName="Chip",ee.propTypes={glyph:o.node,label:o.string.isRequired,chipCharacterLimit:o.number,chipTruncationLocation:o.oneOf(Object.values(N)),popoverZIndex:o.number,baseFontSize:o.oneOf(Object.values(i)),variant:o.oneOf(Object.values(S)),onDismiss:o.func,dismissButtonAriaLabel:o.string};export{ee as Chip,N as TruncationLocation,S as Variant,E as chipInlineDefinitionClassName,G as chipTextClassName};
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/inline-definition"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/icon"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/inline-definition","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@leafygreen-ui/icon","@leafygreen-ui/lib","@leafygreen-ui/palette"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/chip"]={},e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/inline-definition"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/icon"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"])}(this,(function(e,o,r,t,l,n,a,i,s,u){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=c(o),d=c(r),p=c(l),h=c(i);function f(e){var o=function(e,o){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,o);if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof o?o:o+""}function b(e,o,r){return(o=f(o))in e?Object.defineProperty(e,o,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[o]=r,e}function y(){return y=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var r=arguments[o];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},y.apply(this,arguments)}function m(e,o){if(null==e)return{};var r,t,l=function(e,o){if(null==e)return{};var r,t,l={},n=Object.keys(e);for(t=0;t<n.length;t++)r=n[t],o.indexOf(r)>=0||(l[r]=e[r]);return l}(e,o);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)r=n[t],o.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(l[r]=e[r])}return l}function C(e,o){return o||(o=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(o)}}))}var B,k,v,T,D,w,F,x,L,O,S,j,z,N,P,q,A={Start:"start",Middle:"middle",End:"end",None:"none"},E={Gray:"gray",Blue:"blue",Green:"green",Purple:"purple",Red:"red",Yellow:"yellow"},G=s.createUniqueClassName("chip-inline-definition"),M=s.createUniqueClassName("chip-text"),R=b(b({},a.BaseFontSize.Body1,18),a.BaseFontSize.Body2,20),I=b(b({},a.BaseFontSize.Body1,a.typeScales.body1.fontSize),a.BaseFontSize.Body2,a.typeScales.body2.fontSize),Y=b(b({},a.BaseFontSize.Body1,{y:0,x:6}),a.BaseFontSize.Body2,{y:2,x:6}),Z=b(b(b(b(b(b({},E.Blue,b(b({},s.Theme.Dark,{color:u.palette.blue.light2,bgColor:u.palette.blue.dark3,focusBgColor:u.palette.blue.dark1}),s.Theme.Light,{color:u.palette.blue.dark3,bgColor:u.palette.blue.light3,focusBgColor:"#89D2FF"})),E.Red,b(b({},s.Theme.Dark,{color:u.palette.red.light2,bgColor:u.palette.red.dark3,focusBgColor:"#BB1A1A"}),s.Theme.Light,{color:u.palette.red.dark3,bgColor:u.palette.red.light3,focusBgColor:"#FF9789"})),E.Gray,b(b({},s.Theme.Dark,{color:u.palette.gray.light2,bgColor:u.palette.gray.dark2,focusBgColor:u.palette.gray.base}),s.Theme.Light,{color:u.palette.black,bgColor:u.palette.gray.light2,focusBgColor:"#A0A9A8"})),E.Green,b(b({},s.Theme.Dark,{color:u.palette.green.light2,bgColor:u.palette.green.dark3,focusBgColor:u.palette.green.dark1}),s.Theme.Light,{color:u.palette.green.dark3,bgColor:u.palette.green.light3,focusBgColor:u.palette.green.light1})),E.Purple,b(b({},s.Theme.Dark,{color:u.palette.purple.light2,bgColor:u.palette.purple.dark3,focusBgColor:"#892CCA"}),s.Theme.Light,{color:u.palette.purple.dark3,bgColor:u.palette.purple.light3,focusBgColor:"#E19AFF"})),E.Yellow,b(b({},s.Theme.Dark,{color:u.palette.yellow.light2,bgColor:u.palette.yellow.dark3,focusBgColor:"#C27823"}),s.Theme.Light,{color:u.palette.yellow.dark3,bgColor:u.palette.yellow.light3,focusBgColor:"#FFD664"})),U=function(e,o){return t.css(B||(B=C(["\n  color: ",";\n  background-color: ",";\n  transition: background-color ","ms ease-in-out;\n"])),Z[e][o].color,Z[e][o].bgColor,a.transitionDuration.faster)},V=t.css(k||(k=C(["\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  white-space: nowrap;\n  box-sizing: border-box;\n  border-radius: 4px;\n"]))),X=function(e){return t.css(v||(v=C(["\n  font-size: ","px;\n  line-height: ","px;\n"])),I[e],R[e])},H=t.css(T||(T=C(["\n  cursor: not-allowed;\n"]))),J=b(b({},s.Theme.Light,t.css(D||(D=C(["\n    color: ",";\n    background-color: ",";\n  "])),u.palette.gray.base,u.palette.gray.light3)),s.Theme.Dark,t.css(w||(w=C(["\n    color: ",";\n    background-color: ",";\n    box-shadow: inset 0 0 1px 1px ",";\n  "])),u.palette.gray.dark2,u.palette.gray.dark4,u.palette.gray.dark2)),K=function(e){return t.css(F||(F=C(["\n  padding-inline: ","px;\n  padding-block: ","px;\n"])),Y[e].x,Y[e].y)},Q=t.css(x||(x=C(["\n  padding-inline-end: 2px;\n"]))),W=function(e,o){return t.css(L||(L=C(["\n  &:focus-within {\n    background-color: ",";\n  }\n\n  ."," {\n    &:focus-visible,\n    &:focus {\n      outline: none;\n    }\n  }\n"])),Z[e][o].focusBgColor,G)},$=b(b({},s.Theme.Dark,t.css(O||(O=C(["\n    &:focus-within {\n      background-color: ",";\n    }\n  "])),u.palette.gray.dark1)),s.Theme.Light,t.css(S||(S=C(["\n    &:focus-within {\n      background-color: ",";\n    }\n  "])),u.palette.gray.light1)),_=b(b(b(b(b(b({},E.Blue,b(b({},s.Theme.Dark,{color:u.palette.blue.light2,focusBgColor:Z[E.Blue][s.Theme.Dark].focusBgColor,hoverBgColor:u.palette.blue.dark2,hoverFocusColor:u.palette.blue.light3}),s.Theme.Light,{color:u.palette.blue.dark3,focusBgColor:Z[E.Blue][s.Theme.Light].focusBgColor,hoverBgColor:u.palette.blue.light2,hoverFocusColor:u.palette.blue.dark3})),E.Red,b(b({},s.Theme.Dark,{color:u.palette.red.light2,focusBgColor:Z[E.Red][s.Theme.Dark].focusBgColor,hoverBgColor:u.palette.red.dark2,hoverFocusColor:u.palette.red.light3}),s.Theme.Light,{color:u.palette.red.dark3,focusBgColor:Z[E.Red][s.Theme.Light].focusBgColor,hoverBgColor:u.palette.red.light2,hoverFocusColor:u.palette.red.dark3})),E.Gray,b(b({},s.Theme.Dark,{color:u.palette.gray.light1,focusBgColor:Z[E.Gray][s.Theme.Dark].focusBgColor,hoverBgColor:u.palette.gray.dark1,hoverFocusColor:u.palette.gray.light3}),s.Theme.Light,{color:u.palette.gray.dark2,focusBgColor:Z[E.Gray][s.Theme.Light].focusBgColor,hoverBgColor:u.palette.gray.light1,hoverFocusColor:u.palette.black})),E.Green,b(b({},s.Theme.Dark,{color:u.palette.green.light2,focusBgColor:Z[E.Green][s.Theme.Dark].focusBgColor,hoverBgColor:u.palette.green.dark2,hoverFocusColor:u.palette.green.light3}),s.Theme.Light,{color:u.palette.green.dark3,focusBgColor:Z[E.Green][s.Theme.Light].focusBgColor,hoverBgColor:u.palette.green.light2,hoverFocusColor:u.palette.green.dark3})),E.Purple,b(b({},s.Theme.Dark,{color:u.palette.purple.light2,focusBgColor:Z[E.Purple][s.Theme.Dark].focusBgColor,hoverBgColor:u.palette.purple.dark2,hoverFocusColor:u.palette.purple.light3}),s.Theme.Light,{color:u.palette.purple.dark3,focusBgColor:Z[E.Purple][s.Theme.Light].focusBgColor,hoverBgColor:u.palette.purple.light2,hoverFocusColor:u.palette.purple.dark3})),E.Yellow,b(b({},s.Theme.Dark,{color:u.palette.yellow.light2,focusBgColor:Z[E.Yellow][s.Theme.Dark].focusBgColor,hoverBgColor:u.palette.yellow.dark2,hoverFocusColor:u.palette.yellow.light3}),s.Theme.Light,{color:u.palette.yellow.dark3,focusBgColor:Z[E.Yellow][s.Theme.Light].focusBgColor,hoverBgColor:u.palette.yellow.light2,hoverFocusColor:u.palette.yellow.dark3})),ee=t.css(j||(j=C(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  outline: none;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: background-color ","ms ease-in-out;\n  padding: 0 2px;\n  align-self: stretch;\n"])),a.transitionDuration.faster),oe=function(e,o){return t.css(z||(z=C(["\n  color: ",";\n\n  &:not(:disabled):hover {\n    background-color: ",";\n    color: ",";\n  }\n\n  &:focus-visible {\n    color: ",";\n    background-color: ",";\n\n    &:not(:disabled):hover {\n      background-color: ",";\n    }\n  }\n"])),_[e][o].color,_[e][o].hoverBgColor,_[e][o].hoverFocusColor,_[e][o].hoverFocusColor,_[e][o].focusBgColor,_[e][o].hoverBgColor)},re=t.css(N||(N=C(["\n  &:disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n"]))),te=b(b({},s.Theme.Light,t.css(P||(P=C(["\n    &:disabled {\n      color: ",";\n    }\n  "])),u.palette.gray.light1)),s.Theme.Dark,t.css(q||(q=C(["\n    &:disabled {\n      color: ",";\n    }\n  "])),u.palette.gray.dark2));function le(e){var o=e.label,r=e.disabled,l=e.variant,a=e.onDismiss,i=e.dismissButtonAriaLabel,s=n.useDarkMode().theme,u="string"==typeof o?"Deselect ".concat(o):"Deselect",c=i||u;return g.default.createElement("button",{type:"button","data-testid":"chip-dismiss-button","aria-label":c,"aria-disabled":r,disabled:r,className:t.cx(ee,oe(l,s),te[s],re),onClick:a},g.default.createElement(h.default,{glyph:"X","aria-hidden":!0}))}le.displayName="DismissButton";var ne=["chipTruncationLocation","chipCharacterLimit","disabled","variant","baseFontSize","darkMode","label","onDismiss","popoverZIndex","className","dismissButtonAriaLabel"],ae=g.default.forwardRef((function(e,r){var l=e.chipTruncationLocation,i=void 0===l?A.None:l,s=e.chipCharacterLimit,u=e.disabled,c=void 0!==u&&u,d=e.variant,h=void 0===d?E.Blue:d,f=e.baseFontSize,C=void 0===f?a.BaseFontSize.Body1:f,B=e.darkMode,k=e.label,v=e.onDismiss,T=e.popoverZIndex,D=e.className,w=e.dismissButtonAriaLabel,F=m(e,ne),x=n.useDarkMode(B),L=x.darkMode,O=x.theme,S=Number.isInteger(s)&&"none"!==i&&"string"==typeof k&&!!k&&k.length>s,j=o.useMemo((function(){return function(e,o,r){var t=e-3;switch(o){case"start":return"…"+r.substring(r.length-t).trim();case"middle":return r.substring(0,t/2).trim()+"…"+r.substring(r.length-t/2).trim();case"end":return r.substring(0,t).trim()+"…";default:return r}}(s,i,k)}),[s,i,k]);return g.default.createElement("span",y({ref:r,"aria-disabled":c,className:t.cx(V,U(h,O),X(C),b({},t.cx(J[O],H),c),D)},F),g.default.createElement("span",{"data-testid":"chip-text",className:t.cx(W(h,O),K(C),b(b({},Q,!!v),$[O],c),M)},S?g.default.createElement(p.default,{darkMode:L,definition:k,align:"bottom",popoverZIndex:T,className:G},j):k),!!v&&g.default.createElement(le,{label:k,onDismiss:v,disabled:c,variant:h,dismissButtonAriaLabel:w}))}));ae.displayName="Chip",ae.propTypes={label:d.default.string.isRequired,chipCharacterLimit:d.default.number,chipTruncationLocation:d.default.oneOf(Object.values(A)),popoverZIndex:d.default.number,baseFontSize:d.default.oneOf(Object.values(a.BaseFontSize)),variant:d.default.oneOf(Object.values(E)),onDismiss:d.default.func,dismissButtonAriaLabel:d.default.string},Object.defineProperty(e,"BaseFontSize",{enumerable:!0,get:function(){return a.BaseFontSize}}),e.Chip=ae,e.TruncationLocation=A,e.Variant=E,e.chipInlineDefinitionClassName=G,e.chipTextClassName=M}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/inline-definition"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/icon"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/emotion","@leafygreen-ui/inline-definition","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/tokens","@leafygreen-ui/icon","@leafygreen-ui/lib","@leafygreen-ui/palette"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/chip"]={},e.React,e.PropTypes,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/inline-definition"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/icon"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"])}(this,(function(e,t,r,a,o,n,l,i,c,u){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=s(t),d=s(r),g=s(o),f=s(i);function h(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var a=r.call(e,t);if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}function y(e,t,r){return(t=h(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function b(){return b=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},b.apply(this,arguments)}function k(e,t){if(null==e)return{};var r,a,o=function(e,t){if(null==e)return{};var r,a,o={},n=Object.keys(e);for(a=0;a<n.length;a++)r=n[a],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(a=0;a<n.length;a++)r=n[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function m(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}var v,D,B,S,I,T,C,P,x,F,w,L={Start:"start",Middle:"middle",End:"end",None:"none"},O={Gray:"gray",Blue:"blue",Green:"green",Purple:"purple",Red:"red",Yellow:"yellow"},j=c.createUniqueClassName("chip-inline-definition"),z=c.createUniqueClassName("chip-text"),N=y(y({},l.BaseFontSize.Body1,18),l.BaseFontSize.Body2,20),q=y(y({},l.BaseFontSize.Body1,l.typeScales.body1.fontSize),l.BaseFontSize.Body2,l.typeScales.body2.fontSize),A=y(y({},l.BaseFontSize.Body1,{y:l.spacing[0],x:l.spacing[100]}),l.BaseFontSize.Body2,{y:l.spacing[50],x:l.spacing[100]}),E=y(y(y(y(y(y({},O.Blue,y(y({},c.Theme.Dark,y(y(y({},l.Property.Background,y(y({},l.InteractionState.Default,u.palette.blue.dark3),l.InteractionState.Focus,u.palette.blue.dark1)),l.Property.Text,y({},l.InteractionState.Default,u.palette.blue.light2)),l.Property.Icon,y({},l.InteractionState.Default,u.palette.blue.light2))),c.Theme.Light,y(y(y({},l.Property.Background,y(y({},l.InteractionState.Default,u.palette.blue.light3),l.InteractionState.Focus,"#89D2FF")),l.Property.Text,y({},l.InteractionState.Default,u.palette.blue.dark3)),l.Property.Icon,y({},l.InteractionState.Default,u.palette.blue.dark2)))),O.Red,y(y({},c.Theme.Dark,y(y(y({},l.Property.Background,y(y({},l.InteractionState.Default,u.palette.red.dark3),l.InteractionState.Focus,"#BB1A1A")),l.Property.Text,y({},l.InteractionState.Default,u.palette.red.light2)),l.Property.Icon,y({},l.InteractionState.Default,u.palette.red.light2))),c.Theme.Light,y(y(y({},l.Property.Background,y(y({},l.InteractionState.Default,u.palette.red.light3),l.InteractionState.Focus,"#FF9789")),l.Property.Text,y({},l.InteractionState.Default,u.palette.red.dark3)),l.Property.Icon,y({},l.InteractionState.Default,u.palette.red.dark2)))),O.Gray,y(y({},c.Theme.Dark,y(y(y({},l.Property.Background,y(y({},l.InteractionState.Default,u.palette.gray.dark2),l.InteractionState.Focus,u.palette.gray.base)),l.Property.Text,y({},l.InteractionState.Default,u.palette.gray.light2)),l.Property.Icon,y({},l.InteractionState.Default,u.palette.gray.light1))),c.Theme.Light,y(y(y({},l.Property.Background,y(y({},l.InteractionState.Default,u.palette.gray.light2),l.InteractionState.Focus,"#A0A9A8")),l.Property.Text,y({},l.InteractionState.Default,u.palette.black)),l.Property.Icon,y({},l.InteractionState.Default,u.palette.gray.dark1)))),O.Green,y(y({},c.Theme.Dark,y(y(y({},l.Property.Background,y(y({},l.InteractionState.Default,u.palette.green.dark3),l.InteractionState.Focus,u.palette.green.dark1)),l.Property.Text,y({},l.InteractionState.Default,u.palette.green.light2)),l.Property.Icon,y({},l.InteractionState.Default,u.palette.green.light2))),c.Theme.Light,y(y(y({},l.Property.Background,y(y({},l.InteractionState.Default,u.palette.green.light3),l.InteractionState.Focus,u.palette.green.light1)),l.Property.Text,y({},l.InteractionState.Default,u.palette.green.dark3)),l.Property.Icon,y({},l.InteractionState.Default,u.palette.green.dark2)))),O.Purple,y(y({},c.Theme.Dark,y(y(y({},l.Property.Background,y(y({},l.InteractionState.Default,u.palette.purple.dark3),l.InteractionState.Focus,"#892CCA")),l.Property.Text,y({},l.InteractionState.Default,u.palette.purple.light2)),l.Property.Icon,y({},l.InteractionState.Default,u.palette.purple.light2))),c.Theme.Light,y(y(y({},l.Property.Background,y(y({},l.InteractionState.Default,u.palette.purple.light3),l.InteractionState.Focus,"#E19AFF")),l.Property.Text,y({},l.InteractionState.Default,u.palette.purple.dark3)),l.Property.Icon,y({},l.InteractionState.Default,u.palette.purple.dark2)))),O.Yellow,y(y({},c.Theme.Dark,y(y(y({},l.Property.Background,y(y({},l.InteractionState.Default,u.palette.yellow.dark3),l.InteractionState.Focus,"#C27823")),l.Property.Text,y({},l.InteractionState.Default,u.palette.yellow.light2)),l.Property.Icon,y({},l.InteractionState.Default,u.palette.yellow.light2))),c.Theme.Light,y(y(y({},l.Property.Background,y(y({},l.InteractionState.Default,u.palette.yellow.light3),l.InteractionState.Focus,"#FFD664")),l.Property.Text,y({},l.InteractionState.Default,u.palette.yellow.dark3)),l.Property.Icon,y({},l.InteractionState.Default,u.palette.yellow.dark2)))),G=y(y({},c.Theme.Dark,u.palette.gray.dark1),c.Theme.Light,u.palette.gray.light1),M=y(y({},c.Theme.Dark,u.palette.gray.dark2),c.Theme.Light,u.palette.gray.base),R=function(e,t,r){var o=arguments.length>3&&void 0!==arguments[3]&&arguments[3];return a.cx(function(e,t,r){return a.css(v||(v=m(["\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  white-space: nowrap;\n  border-radius: 4px;\n  font-size: ","px;\n  line-height: ","px;\n\n  color: ",";\n  background-color: ",";\n  transition: background-color ","ms ease-in-out;\n"])),q[e],N[e],E[t][r].text.default,E[t][r].background.default,l.transitionDuration.faster)}(e,t,r),y({},function(e){return a.cx(a.css(D||(D=m(["\n      cursor: not-allowed;\n      background-color: ",";\n      color: ",";\n    "])),l.color[e].background.secondary.default,M[e]),y({},a.css(B||(B=m(["\n        box-shadow: inset 0 0 1px 1px ",";\n      "])),u.palette.gray.dark2),e===c.Theme.Dark))}(r),o))},Y=a.css(T||(T=m(["\n  padding-inline-end: ","px;\n"])),l.spacing[50]),Z=function(e,t,r){var o=arguments.length>3&&void 0!==arguments[3]&&arguments[3],n=arguments.length>4&&void 0!==arguments[4]&&arguments[4];return a.cx(function(e,t,r){return a.css(S||(S=m(["\n  padding-inline: ","px;\n  padding-block: ","px;\n\n  display: flex;\n  gap: ","px;\n\n  svg {\n    align-self: center;\n    color: ",";\n  }\n\n  &:focus-within {\n    background-color: ",";\n  }\n\n  ."," {\n    &:focus-visible,\n    &:focus {\n      outline: none;\n    }\n  }\n"])),A[e].x,A[e].y,l.spacing[50],E[t][r].icon.default,E[t][r].background.focus,j)}(e,t,r),y(y({},function(e){return a.css(I||(I=m(["\n  svg {\n    color: ",";\n  }\n\n  // truncated + disabled + focused styles (a truncated disabled chip is still focusable)\n  &:focus-within {\n    background-color: ",";\n  }\n"])),l.color[e].icon.disabled.default,G[e])}(r),o),Y,n))},U=y(y(y(y(y(y({},O.Blue,y(y({},c.Theme.Dark,{color:u.palette.blue.light2,focusBgColor:E[O.Blue][c.Theme.Dark].background.focus,hoverBgColor:u.palette.blue.dark2,hoverFocusColor:u.palette.blue.light3}),c.Theme.Light,{color:u.palette.blue.dark3,focusBgColor:E[O.Blue][c.Theme.Light].background.focus,hoverBgColor:u.palette.blue.light2,hoverFocusColor:u.palette.blue.dark3})),O.Red,y(y({},c.Theme.Dark,{color:u.palette.red.light2,focusBgColor:E[O.Red][c.Theme.Dark].background.focus,hoverBgColor:u.palette.red.dark2,hoverFocusColor:u.palette.red.light3}),c.Theme.Light,{color:u.palette.red.dark3,focusBgColor:E[O.Red][c.Theme.Light].background.focus,hoverBgColor:u.palette.red.light2,hoverFocusColor:u.palette.red.dark3})),O.Gray,y(y({},c.Theme.Dark,{color:u.palette.gray.light1,focusBgColor:E[O.Gray][c.Theme.Dark].background.focus,hoverBgColor:u.palette.gray.dark1,hoverFocusColor:u.palette.gray.light3}),c.Theme.Light,{color:u.palette.gray.dark2,focusBgColor:E[O.Gray][c.Theme.Light].background.focus,hoverBgColor:u.palette.gray.light1,hoverFocusColor:u.palette.black})),O.Green,y(y({},c.Theme.Dark,{color:u.palette.green.light2,focusBgColor:E[O.Green][c.Theme.Dark].background.focus,hoverBgColor:u.palette.green.dark2,hoverFocusColor:u.palette.green.light3}),c.Theme.Light,{color:u.palette.green.dark3,focusBgColor:E[O.Green][c.Theme.Light].background.focus,hoverBgColor:u.palette.green.light2,hoverFocusColor:u.palette.green.dark3})),O.Purple,y(y({},c.Theme.Dark,{color:u.palette.purple.light2,focusBgColor:E[O.Purple][c.Theme.Dark].background.focus,hoverBgColor:u.palette.purple.dark2,hoverFocusColor:u.palette.purple.light3}),c.Theme.Light,{color:u.palette.purple.dark3,focusBgColor:E[O.Purple][c.Theme.Light].background.focus,hoverBgColor:u.palette.purple.light2,hoverFocusColor:u.palette.purple.dark3})),O.Yellow,y(y({},c.Theme.Dark,{color:u.palette.yellow.light2,focusBgColor:E[O.Yellow][c.Theme.Dark].background.focus,hoverBgColor:u.palette.yellow.dark2,hoverFocusColor:u.palette.yellow.light3}),c.Theme.Light,{color:u.palette.yellow.dark3,focusBgColor:E[O.Yellow][c.Theme.Light].background.focus,hoverBgColor:u.palette.yellow.light2,hoverFocusColor:u.palette.yellow.dark3})),V=a.css(C||(C=m(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  outline: none;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: background-color ","ms ease-in-out;\n  padding: 0 2px;\n  align-self: stretch;\n"])),l.transitionDuration.faster),X=function(e,t){return a.css(P||(P=m(["\n  color: ",";\n\n  &:not(:disabled):hover {\n    background-color: ",";\n    color: ",";\n  }\n\n  &:focus-visible {\n    color: ",";\n    background-color: ",";\n\n    &:not(:disabled):hover {\n      background-color: ",";\n    }\n  }\n"])),U[e][t].color,U[e][t].hoverBgColor,U[e][t].hoverFocusColor,U[e][t].hoverFocusColor,U[e][t].focusBgColor,U[e][t].hoverBgColor)},H=a.css(x||(x=m(["\n  &:disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n"]))),J=y(y({},c.Theme.Light,a.css(F||(F=m(["\n    &:disabled {\n      color: ",";\n    }\n  "])),u.palette.gray.light1)),c.Theme.Dark,a.css(w||(w=m(["\n    &:disabled {\n      color: ",";\n    }\n  "])),u.palette.gray.dark2));function K(e){var t=e.label,r=e.disabled,o=e.variant,l=e.onDismiss,i=e.dismissButtonAriaLabel,c=n.useDarkMode().theme,u="string"==typeof t?"Deselect ".concat(t):"Deselect",s=i||u;return p.default.createElement("button",{type:"button","data-testid":"chip-dismiss-button","aria-label":s,"aria-disabled":r,disabled:r,className:a.cx(V,X(o,c),J[c],H),onClick:l},p.default.createElement(f.default,{glyph:"X","aria-hidden":!0}))}K.displayName="DismissButton";var Q=["chipTruncationLocation","chipCharacterLimit","disabled","variant","baseFontSize","darkMode","label","onDismiss","popoverZIndex","className","dismissButtonAriaLabel","glyph"],W=p.default.forwardRef((function(e,r){var o=e.chipTruncationLocation,i=void 0===o?L.None:o,c=e.chipCharacterLimit,u=e.disabled,s=void 0!==u&&u,d=e.variant,f=void 0===d?O.Blue:d,h=e.baseFontSize,y=void 0===h?l.BaseFontSize.Body1:h,m=e.darkMode,v=e.label,D=e.onDismiss,B=e.popoverZIndex,S=e.className,I=e.dismissButtonAriaLabel,T=e.glyph,C=k(e,Q),P=n.useDarkMode(m),x=P.darkMode,F=P.theme,w=Number.isInteger(c)&&"none"!==i&&"string"==typeof v&&!!v&&v.length>c,N=t.useMemo((function(){return function(e,t,r){var a=e-3;switch(t){case"start":return"…"+r.substring(r.length-a).trim();case"middle":return r.substring(0,a/2).trim()+"…"+r.substring(r.length-a/2).trim();case"end":return r.substring(0,a).trim()+"…";default:return r}}(c,i,v)}),[c,i,v]);return p.default.createElement("span",b({ref:r,"aria-disabled":s,className:a.cx(R(y,f,F,s),S)},C),p.default.createElement("span",{"data-testid":"chip-text",className:a.cx(Z(y,f,F,s,!!D),z)},T,w?p.default.createElement(g.default,{darkMode:x,definition:v,align:"bottom",popoverZIndex:B,className:j},N):v),!!D&&p.default.createElement(K,{label:v,onDismiss:D,disabled:s,variant:f,dismissButtonAriaLabel:I}))}));W.displayName="Chip",W.propTypes={glyph:d.default.node,label:d.default.string.isRequired,chipCharacterLimit:d.default.number,chipTruncationLocation:d.default.oneOf(Object.values(L)),popoverZIndex:d.default.number,baseFontSize:d.default.oneOf(Object.values(l.BaseFontSize)),variant:d.default.oneOf(Object.values(O)),onDismiss:d.default.func,dismissButtonAriaLabel:d.default.string},Object.defineProperty(e,"BaseFontSize",{enumerable:!0,get:function(){return l.BaseFontSize}}),e.Chip=W,e.TruncationLocation=L,e.Variant=O,e.chipInlineDefinitionClassName=j,e.chipTextClassName=z}));
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@leafygreen-ui/chip",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "LeafyGreen UI Kit Chip",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -55,2 +55,3 @@ # Chip
 | `variant`                | `'gray'` \| `'blue'` \| `'green'` \| `'purple'` \| `'red'` \| `'yellow'` \| `'blue'` | The color of the chip.                                                                                                                                                                                                                                    |                     |
+| `glyph`                  | `React.ReactElement`                                                                 | An icon glyph rendered before the text. To use a custom icon, see [Link](https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md#usage-registering-custom-icon-sets) docs                                                              |                     |
 | `disabled`               | `boolean`                                                                            | Determines if the chip should be disabled.                                                                                                                                                                                                                | `false`             |
@@ -57,0 +58,0 @@ | `onDismiss`              | `React.MouseEventHandler<HTMLButtonElement>`                                         | Callback when dismiss button is clicked. If set, a dismiss button will render.                                                                                                                                                                            |                     |

src/Chip/Chip.styles.ts

@@ -1,6 +0,14 @@
-import { css } from '@leafygreen-ui/emotion';
-import { createUniqueClassName, Theme } from '@leafygreen-ui/lib';
+import { css, cx } from '@leafygreen-ui/emotion';
+import {
+  createUniqueClassName,
+  RecursiveRecord,
+  Theme,
+} from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 import {
   BaseFontSize,
+  color,
+  InteractionState,
+  Property,
+  spacing,
   transitionDuration,
@@ -41,35 +49,36 @@ typeScales,
   [BaseFontSize.Body1]: {
-    y: 0,
-    x: 6,
+    y: spacing[0],
+    x: spacing[100],
   },
   [BaseFontSize.Body2]: {
-    y: 2,
-    x: 6,
+    y: spacing[50],
+    x: spacing[100],
   },
 } as const;
 
-/**
- * Chip Variants
- */
-export const variantColor: Record<
-  Variant,
-  Record<
-    Theme,
-    {
-      color: string;
-      bgColor: string;
-      focusBgColor: string;
-    }
-  >
-> = {
+export const variantColor = {
   [Variant.Blue]: {
     [Theme.Dark]: {
-      color: palette.blue.light2,
-      bgColor: palette.blue.dark3,
-      focusBgColor: palette.blue.dark1,
+      [Property.Background]: {
+        [InteractionState.Default]: palette.blue.dark3,
+        [InteractionState.Focus]: palette.blue.dark1,
+      },
+      [Property.Text]: {
+        [InteractionState.Default]: palette.blue.light2,
+      },
+      [Property.Icon]: {
+        [InteractionState.Default]: palette.blue.light2,
+      },
     },
     [Theme.Light]: {
-      color: palette.blue.dark3,
-      bgColor: palette.blue.light3,
-      focusBgColor: '#89D2FF',
+      [Property.Background]: {
+        [InteractionState.Default]: palette.blue.light3,
+        [InteractionState.Focus]: '#89D2FF',
+      },
+      [Property.Text]: {
+        [InteractionState.Default]: palette.blue.dark3,
+      },
+      [Property.Icon]: {
+        [InteractionState.Default]: palette.blue.dark2,
+      },
     },
@@ -79,10 +88,24 @@ },
     [Theme.Dark]: {
-      color: palette.red.light2,
-      bgColor: palette.red.dark3,
-      focusBgColor: '#BB1A1A',
+      [Property.Background]: {
+        [InteractionState.Default]: palette.red.dark3,
+        [InteractionState.Focus]: '#BB1A1A',
+      },
+      [Property.Text]: {
+        [InteractionState.Default]: palette.red.light2,
+      },
+      [Property.Icon]: {
+        [InteractionState.Default]: palette.red.light2,
+      },
     },
     [Theme.Light]: {
-      color: palette.red.dark3,
-      bgColor: palette.red.light3,
-      focusBgColor: '#FF9789',
+      [Property.Background]: {
+        [InteractionState.Default]: palette.red.light3,
+        [InteractionState.Focus]: '#FF9789',
+      },
+      [Property.Text]: {
+        [InteractionState.Default]: palette.red.dark3,
+      },
+      [Property.Icon]: {
+        [InteractionState.Default]: palette.red.dark2,
+      },
     },
@@ -92,10 +115,24 @@ },
     [Theme.Dark]: {
-      color: palette.gray.light2,
-      bgColor: palette.gray.dark2,
-      focusBgColor: palette.gray.base,
+      [Property.Background]: {
+        [InteractionState.Default]: palette.gray.dark2,
+        [InteractionState.Focus]: palette.gray.base,
+      },
+      [Property.Text]: {
+        [InteractionState.Default]: palette.gray.light2,
+      },
+      [Property.Icon]: {
+        [InteractionState.Default]: palette.gray.light1,
+      },
     },
     [Theme.Light]: {
-      color: palette.black,
-      bgColor: palette.gray.light2,
-      focusBgColor: '#A0A9A8',
+      [Property.Background]: {
+        [InteractionState.Default]: palette.gray.light2,
+        [InteractionState.Focus]: '#A0A9A8',
+      },
+      [Property.Text]: {
+        [InteractionState.Default]: palette.black,
+      },
+      [Property.Icon]: {
+        [InteractionState.Default]: palette.gray.dark1,
+      },
     },
@@ -105,10 +142,24 @@ },
     [Theme.Dark]: {
-      color: palette.green.light2,
-      bgColor: palette.green.dark3,
-      focusBgColor: palette.green.dark1,
+      [Property.Background]: {
+        [InteractionState.Default]: palette.green.dark3,
+        [InteractionState.Focus]: palette.green.dark1,
+      },
+      [Property.Text]: {
+        [InteractionState.Default]: palette.green.light2,
+      },
+      [Property.Icon]: {
+        [InteractionState.Default]: palette.green.light2,
+      },
     },
     [Theme.Light]: {
-      color: palette.green.dark3,
-      bgColor: palette.green.light3,
-      focusBgColor: palette.green.light1,
+      [Property.Background]: {
+        [InteractionState.Default]: palette.green.light3,
+        [InteractionState.Focus]: palette.green.light1,
+      },
+      [Property.Text]: {
+        [InteractionState.Default]: palette.green.dark3,
+      },
+      [Property.Icon]: {
+        [InteractionState.Default]: palette.green.dark2,
+      },
     },
@@ -118,10 +169,24 @@ },
     [Theme.Dark]: {
-      color: palette.purple.light2,
-      bgColor: palette.purple.dark3,
-      focusBgColor: '#892CCA',
+      [Property.Background]: {
+        [InteractionState.Default]: palette.purple.dark3,
+        [InteractionState.Focus]: '#892CCA',
+      },
+      [Property.Text]: {
+        [InteractionState.Default]: palette.purple.light2,
+      },
+      [Property.Icon]: {
+        [InteractionState.Default]: palette.purple.light2,
+      },
     },
     [Theme.Light]: {
-      color: palette.purple.dark3,
-      bgColor: palette.purple.light3,
-      focusBgColor: '#E19AFF',
+      [Property.Background]: {
+        [InteractionState.Default]: palette.purple.light3,
+        [InteractionState.Focus]: '#E19AFF',
+      },
+      [Property.Text]: {
+        [InteractionState.Default]: palette.purple.dark3,
+      },
+      [Property.Icon]: {
+        [InteractionState.Default]: palette.purple.dark2,
+      },
     },
@@ -131,24 +196,46 @@ },
     [Theme.Dark]: {
-      color: palette.yellow.light2,
-      bgColor: palette.yellow.dark3,
-      focusBgColor: '#C27823',
+      [Property.Background]: {
+        [InteractionState.Default]: palette.yellow.dark3,
+        [InteractionState.Focus]: '#C27823',
+      },
+      [Property.Text]: {
+        [InteractionState.Default]: palette.yellow.light2,
+      },
+      [Property.Icon]: {
+        [InteractionState.Default]: palette.yellow.light2,
+      },
     },
     [Theme.Light]: {
-      color: palette.yellow.dark3,
-      bgColor: palette.yellow.light3,
-      focusBgColor: '#FFD664',
+      [Property.Background]: {
+        [InteractionState.Default]: palette.yellow.light3,
+        [InteractionState.Focus]: '#FFD664',
+      },
+      [Property.Text]: {
+        [InteractionState.Default]: palette.yellow.dark3,
+      },
+      [Property.Icon]: {
+        [InteractionState.Default]: palette.yellow.dark2,
+      },
     },
   },
+} as const satisfies RecursiveRecord<
+  [Variant, Theme, Property, InteractionState, string],
+  false
+>;
+
+const truncateDisabledColor = {
+  [Theme.Dark]: palette.gray.dark1,
+  [Theme.Light]: palette.gray.light1,
 };
 
-/**
- * Chip wrapper
- */
-export const chipWrapperThemeStyle = (variant: Variant, theme: Theme) => css`
-  color: ${variantColor[variant][theme].color};
-  background-color: ${variantColor[variant][theme].bgColor};
-  transition: background-color ${transitionDuration.faster}ms ease-in-out;
-`;
+const wrapperDisabledColor = {
+  [Theme.Dark]: palette.gray.dark2,
+  [Theme.Light]: palette.gray.base,
+};
 
-export const chipWrapperBaseStyle = css`
+export const wrapperBaseStyles = (
+  baseFontSize: BaseFontSize,
+  variant: Variant,
+  theme: Theme,
+) => css`
   display: inline-flex;
@@ -158,42 +245,56 @@ align-items: center;
   white-space: nowrap;
-  box-sizing: border-box;
   border-radius: 4px;
-`;
-
-export const chipWrapperSizeStyle = (baseFontSize: BaseFontSize) => css`
   font-size: ${fontSize[baseFontSize]}px;
   line-height: ${lineHeight[baseFontSize]}px;
-`;
 
-export const chipWrapperBaseDisabledStyles = css`
-  cursor: not-allowed;
+  color: ${variantColor[variant][theme].text.default};
+  background-color: ${variantColor[variant][theme].background.default};
+  transition: background-color ${transitionDuration.faster}ms ease-in-out;
 `;
 
-export const chipWrapperDisabledStyle: Record<Theme, string> = {
-  [Theme.Light]: css`
-    color: ${palette.gray.base};
-    background-color: ${palette.gray.light3};
-  `,
-  [Theme.Dark]: css`
-    color: ${palette.gray.dark2};
-    background-color: ${palette.gray.dark4};
-    box-shadow: inset 0 0 1px 1px ${palette.gray.dark2};
-  `,
-};
+export const wrapperDisabledStyles = (theme: Theme) =>
+  cx(
+    css`
+      cursor: not-allowed;
+      background-color: ${color[theme].background.secondary.default};
+      color: ${wrapperDisabledColor[theme]};
+    `,
+    {
+      [css`
+        box-shadow: inset 0 0 1px 1px ${palette.gray.dark2};
+      `]: theme === Theme.Dark,
+    },
+  );
 
 /**
- * Chip text
+ * Chip wrapper
  */
-export const chipTextSizeStyle = (baseFontSize: BaseFontSize) => css`
+export const getWrapperStyles = (
+  baseFontSize: BaseFontSize,
+  variant: Variant,
+  theme: Theme,
+  isDisabled = false,
+) =>
+  cx(wrapperBaseStyles(baseFontSize, variant, theme), {
+    [wrapperDisabledStyles(theme)]: isDisabled,
+  });
+
+export const textBaseStyles = (
+  baseFontSize: BaseFontSize,
+  variant: Variant,
+  theme: Theme,
+) => css`
   padding-inline: ${chipWrapperPadding[baseFontSize].x}px;
   padding-block: ${chipWrapperPadding[baseFontSize].y}px;
-`;
 
-export const chipTextDismissSizeStyle = css`
-  padding-inline-end: 2px;
-`;
+  display: flex;
+  gap: ${spacing[50]}px;
 
-export const chipTextStyles = (variant: Variant, theme: Theme) => css`
+  svg {
+    align-self: center;
+    color: ${variantColor[variant][theme].icon.default};
+  }
+
   &:focus-within {
-    background-color: ${variantColor[variant][theme].focusBgColor};
+    background-color: ${variantColor[variant][theme].background.focus};
   }
@@ -209,13 +310,30 @@
 
-export const chipTextDisabledStyles: Record<Theme, string> = {
-  [Theme.Dark]: css`
-    &:focus-within {
-      background-color: ${palette.gray.dark1};
-    }
-  `,
-  [Theme.Light]: css`
-    &:focus-within {
-      background-color: ${palette.gray.light1};
-    }
-  `,
-};
+export const textDisabledStyles = (theme: Theme) => css`
+  svg {
+    color: ${color[theme].icon.disabled.default};
+  }
+
+  // truncated + disabled + focused styles (a truncated disabled chip is still focusable)
+  &:focus-within {
+    background-color: ${truncateDisabledColor[theme]};
+  }
+`;
+
+export const textDismissibleStyles = css`
+  padding-inline-end: ${spacing[50]}px;
+`;
+
+/**
+ * Chip text
+ */
+export const getTextStyles = (
+  baseFontSize: BaseFontSize,
+  variant: Variant,
+  theme: Theme,
+  isDisabled = false,
+  isDismissible = false,
+) =>
+  cx(textBaseStyles(baseFontSize, variant, theme), {
+    [textDisabledStyles(theme)]: isDisabled,
+    [textDismissibleStyles]: isDismissible,
+  });

src/Chip/Chip.types.ts

@@ -80,2 +80,9 @@ import { DarkModeProps, HTMLElementProps } from '@leafygreen-ui/lib';
   dismissButtonAriaLabel?: string;
+
+  /**
+   * An icon glyph rendered before the text.
+   * To use a custom icon, see {@link Icon} {@link https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md#usage-registering-custom-icon-sets | createIconComponent} docs
+   * @type Leafygreen <Icon /> Component
+   */
+  glyph?: React.ReactElement;
 }

src/DismissButton/DismissButton.styles.ts

@@ -24,3 +24,3 @@ import { css } from '@leafygreen-ui/emotion';
       color: palette.blue.light2,
-      focusBgColor: chipVariantColor[Variant.Blue][Theme.Dark].focusBgColor,
+      focusBgColor: chipVariantColor[Variant.Blue][Theme.Dark].background.focus,
       hoverBgColor: palette.blue.dark2,
@@ -31,3 +31,4 @@ hoverFocusColor: palette.blue.light3,
       color: palette.blue.dark3,
-      focusBgColor: chipVariantColor[Variant.Blue][Theme.Light].focusBgColor,
+      focusBgColor:
+        chipVariantColor[Variant.Blue][Theme.Light].background.focus,
       hoverBgColor: palette.blue.light2,
@@ -40,3 +41,3 @@ hoverFocusColor: palette.blue.dark3,
       color: palette.red.light2,
-      focusBgColor: chipVariantColor[Variant.Red][Theme.Dark].focusBgColor,
+      focusBgColor: chipVariantColor[Variant.Red][Theme.Dark].background.focus,
       hoverBgColor: palette.red.dark2,
@@ -47,3 +48,3 @@ hoverFocusColor: palette.red.light3,
       color: palette.red.dark3,
-      focusBgColor: chipVariantColor[Variant.Red][Theme.Light].focusBgColor,
+      focusBgColor: chipVariantColor[Variant.Red][Theme.Light].background.focus,
       hoverBgColor: palette.red.light2,
@@ -56,3 +57,3 @@ hoverFocusColor: palette.red.dark3,
       color: palette.gray.light1,
-      focusBgColor: chipVariantColor[Variant.Gray][Theme.Dark].focusBgColor,
+      focusBgColor: chipVariantColor[Variant.Gray][Theme.Dark].background.focus,
       hoverBgColor: palette.gray.dark1,
@@ -63,3 +64,4 @@ hoverFocusColor: palette.gray.light3,
       color: palette.gray.dark2,
-      focusBgColor: chipVariantColor[Variant.Gray][Theme.Light].focusBgColor,
+      focusBgColor:
+        chipVariantColor[Variant.Gray][Theme.Light].background.focus,
       hoverBgColor: palette.gray.light1,
@@ -72,3 +74,4 @@ hoverFocusColor: palette.black,
       color: palette.green.light2,
-      focusBgColor: chipVariantColor[Variant.Green][Theme.Dark].focusBgColor,
+      focusBgColor:
+        chipVariantColor[Variant.Green][Theme.Dark].background.focus,
       hoverBgColor: palette.green.dark2,
@@ -79,3 +82,4 @@ hoverFocusColor: palette.green.light3,
       color: palette.green.dark3,
-      focusBgColor: chipVariantColor[Variant.Green][Theme.Light].focusBgColor,
+      focusBgColor:
+        chipVariantColor[Variant.Green][Theme.Light].background.focus,
       hoverBgColor: palette.green.light2,
@@ -88,3 +92,4 @@ hoverFocusColor: palette.green.dark3,
       color: palette.purple.light2,
-      focusBgColor: chipVariantColor[Variant.Purple][Theme.Dark].focusBgColor,
+      focusBgColor:
+        chipVariantColor[Variant.Purple][Theme.Dark].background.focus,
       hoverBgColor: palette.purple.dark2,
@@ -95,3 +100,4 @@ hoverFocusColor: palette.purple.light3,
       color: palette.purple.dark3,
-      focusBgColor: chipVariantColor[Variant.Purple][Theme.Light].focusBgColor,
+      focusBgColor:
+        chipVariantColor[Variant.Purple][Theme.Light].background.focus,
       hoverBgColor: palette.purple.light2,
@@ -104,3 +110,4 @@ hoverFocusColor: palette.purple.dark3,
       color: palette.yellow.light2,
-      focusBgColor: chipVariantColor[Variant.Yellow][Theme.Dark].focusBgColor,
+      focusBgColor:
+        chipVariantColor[Variant.Yellow][Theme.Dark].background.focus,
       hoverBgColor: palette.yellow.dark2,
@@ -111,3 +118,4 @@ hoverFocusColor: palette.yellow.light3,
       color: palette.yellow.dark3,
-      focusBgColor: chipVariantColor[Variant.Yellow][Theme.Light].focusBgColor,
+      focusBgColor:
+        chipVariantColor[Variant.Yellow][Theme.Light].background.focus,
       hoverBgColor: palette.yellow.light2,
@@ -114,0 +122,0 @@ hoverFocusColor: palette.yellow.dark3,

stories.js

@@ -1,1 +0,1 @@
-import r,{useMemo as o}from"react";import e,{useDarkMode as n}from"@leafygreen-ui/leafygreen-provider";import{BaseFontSize as l,typeScales as t,transitionDuration as a}from"@leafygreen-ui/tokens";import i from"prop-types";import{css as c,cx as s}from"@leafygreen-ui/emotion";import u from"@leafygreen-ui/inline-definition";import g from"@leafygreen-ui/icon";import{createUniqueClassName as d,Theme as p}from"@leafygreen-ui/lib";import{palette as f}from"@leafygreen-ui/palette";var h,b,m,v,y,C,k,B,w,L,D,F={Start:"start",Middle:"middle",End:"end",None:"none"},x={Gray:"gray",Blue:"blue",Green:"green",Purple:"purple",Red:"red",Yellow:"yellow"};function O(r){var o=function(r,o){if("object"!=typeof r||!r)return r;var e=r[Symbol.toPrimitive];if(void 0!==e){var n=e.call(r,o);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(r)}(r,"string");return"symbol"==typeof o?o:o+""}function E(r,o,e){return(o=O(o))in r?Object.defineProperty(r,o,{value:e,enumerable:!0,configurable:!0,writable:!0}):r[o]=e,r}function j(){return j=Object.assign?Object.assign.bind():function(r){for(var o=1;o<arguments.length;o++){var e=arguments[o];for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n])}return r},j.apply(this,arguments)}function G(r,o){if(null==r)return{};var e,n,l=function(r,o){if(null==r)return{};var e,n,l={},t=Object.keys(r);for(n=0;n<t.length;n++)e=t[n],o.indexOf(e)>=0||(l[e]=r[e]);return l}(r,o);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);for(n=0;n<t.length;n++)e=t[n],o.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(r,e)&&(l[e]=r[e])}return l}function N(r,o){return o||(o=r.slice(0)),Object.freeze(Object.defineProperties(r,{raw:{value:Object.freeze(o)}}))}var P,S,A,z,M,R=d("chip-inline-definition"),T=d("chip-text"),Y=E(E({},l.Body1,18),l.Body2,20),I=E(E({},l.Body1,t.body1.fontSize),l.Body2,t.body2.fontSize),Z=E(E({},l.Body1,{y:0,x:6}),l.Body2,{y:2,x:6}),q=E(E(E(E(E(E({},x.Blue,E(E({},p.Dark,{color:f.blue.light2,bgColor:f.blue.dark3,focusBgColor:f.blue.dark1}),p.Light,{color:f.blue.dark3,bgColor:f.blue.light3,focusBgColor:"#89D2FF"})),x.Red,E(E({},p.Dark,{color:f.red.light2,bgColor:f.red.dark3,focusBgColor:"#BB1A1A"}),p.Light,{color:f.red.dark3,bgColor:f.red.light3,focusBgColor:"#FF9789"})),x.Gray,E(E({},p.Dark,{color:f.gray.light2,bgColor:f.gray.dark2,focusBgColor:f.gray.base}),p.Light,{color:f.black,bgColor:f.gray.light2,focusBgColor:"#A0A9A8"})),x.Green,E(E({},p.Dark,{color:f.green.light2,bgColor:f.green.dark3,focusBgColor:f.green.dark1}),p.Light,{color:f.green.dark3,bgColor:f.green.light3,focusBgColor:f.green.light1})),x.Purple,E(E({},p.Dark,{color:f.purple.light2,bgColor:f.purple.dark3,focusBgColor:"#892CCA"}),p.Light,{color:f.purple.dark3,bgColor:f.purple.light3,focusBgColor:"#E19AFF"})),x.Yellow,E(E({},p.Dark,{color:f.yellow.light2,bgColor:f.yellow.dark3,focusBgColor:"#C27823"}),p.Light,{color:f.yellow.dark3,bgColor:f.yellow.light3,focusBgColor:"#FFD664"})),X=function(r,o){return c(h||(h=N(["\n  color: ",";\n  background-color: ",";\n  transition: background-color ","ms ease-in-out;\n"])),q[r][o].color,q[r][o].bgColor,a.faster)},H=c(b||(b=N(["\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  white-space: nowrap;\n  box-sizing: border-box;\n  border-radius: 4px;\n"]))),J=function(r){return c(m||(m=N(["\n  font-size: ","px;\n  line-height: ","px;\n"])),I[r],Y[r])},K=c(v||(v=N(["\n  cursor: not-allowed;\n"]))),Q=E(E({},p.Light,c(y||(y=N(["\n    color: ",";\n    background-color: ",";\n  "])),f.gray.base,f.gray.light3)),p.Dark,c(C||(C=N(["\n    color: ",";\n    background-color: ",";\n    box-shadow: inset 0 0 1px 1px ",";\n  "])),f.gray.dark2,f.gray.dark4,f.gray.dark2)),U=function(r){return c(k||(k=N(["\n  padding-inline: ","px;\n  padding-block: ","px;\n"])),Z[r].x,Z[r].y)},V=c(B||(B=N(["\n  padding-inline-end: 2px;\n"]))),W=function(r,o){return c(w||(w=N(["\n  &:focus-within {\n    background-color: ",";\n  }\n\n  ."," {\n    &:focus-visible,\n    &:focus {\n      outline: none;\n    }\n  }\n"])),q[r][o].focusBgColor,R)},$=E(E({},p.Dark,c(L||(L=N(["\n    &:focus-within {\n      background-color: ",";\n    }\n  "])),f.gray.dark1)),p.Light,c(D||(D=N(["\n    &:focus-within {\n      background-color: ",";\n    }\n  "])),f.gray.light1)),_=E(E(E(E(E(E({},x.Blue,E(E({},p.Dark,{color:f.blue.light2,focusBgColor:q[x.Blue][p.Dark].focusBgColor,hoverBgColor:f.blue.dark2,hoverFocusColor:f.blue.light3}),p.Light,{color:f.blue.dark3,focusBgColor:q[x.Blue][p.Light].focusBgColor,hoverBgColor:f.blue.light2,hoverFocusColor:f.blue.dark3})),x.Red,E(E({},p.Dark,{color:f.red.light2,focusBgColor:q[x.Red][p.Dark].focusBgColor,hoverBgColor:f.red.dark2,hoverFocusColor:f.red.light3}),p.Light,{color:f.red.dark3,focusBgColor:q[x.Red][p.Light].focusBgColor,hoverBgColor:f.red.light2,hoverFocusColor:f.red.dark3})),x.Gray,E(E({},p.Dark,{color:f.gray.light1,focusBgColor:q[x.Gray][p.Dark].focusBgColor,hoverBgColor:f.gray.dark1,hoverFocusColor:f.gray.light3}),p.Light,{color:f.gray.dark2,focusBgColor:q[x.Gray][p.Light].focusBgColor,hoverBgColor:f.gray.light1,hoverFocusColor:f.black})),x.Green,E(E({},p.Dark,{color:f.green.light2,focusBgColor:q[x.Green][p.Dark].focusBgColor,hoverBgColor:f.green.dark2,hoverFocusColor:f.green.light3}),p.Light,{color:f.green.dark3,focusBgColor:q[x.Green][p.Light].focusBgColor,hoverBgColor:f.green.light2,hoverFocusColor:f.green.dark3})),x.Purple,E(E({},p.Dark,{color:f.purple.light2,focusBgColor:q[x.Purple][p.Dark].focusBgColor,hoverBgColor:f.purple.dark2,hoverFocusColor:f.purple.light3}),p.Light,{color:f.purple.dark3,focusBgColor:q[x.Purple][p.Light].focusBgColor,hoverBgColor:f.purple.light2,hoverFocusColor:f.purple.dark3})),x.Yellow,E(E({},p.Dark,{color:f.yellow.light2,focusBgColor:q[x.Yellow][p.Dark].focusBgColor,hoverBgColor:f.yellow.dark2,hoverFocusColor:f.yellow.light3}),p.Light,{color:f.yellow.dark3,focusBgColor:q[x.Yellow][p.Light].focusBgColor,hoverBgColor:f.yellow.light2,hoverFocusColor:f.yellow.dark3})),rr=c(P||(P=N(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  outline: none;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: background-color ","ms ease-in-out;\n  padding: 0 2px;\n  align-self: stretch;\n"])),a.faster),or=function(r,o){return c(S||(S=N(["\n  color: ",";\n\n  &:not(:disabled):hover {\n    background-color: ",";\n    color: ",";\n  }\n\n  &:focus-visible {\n    color: ",";\n    background-color: ",";\n\n    &:not(:disabled):hover {\n      background-color: ",";\n    }\n  }\n"])),_[r][o].color,_[r][o].hoverBgColor,_[r][o].hoverFocusColor,_[r][o].hoverFocusColor,_[r][o].focusBgColor,_[r][o].hoverBgColor)},er=c(A||(A=N(["\n  &:disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n"]))),nr=E(E({},p.Light,c(z||(z=N(["\n    &:disabled {\n      color: ",";\n    }\n  "])),f.gray.light1)),p.Dark,c(M||(M=N(["\n    &:disabled {\n      color: ",";\n    }\n  "])),f.gray.dark2));function lr(o){var e=o.label,l=o.disabled,t=o.variant,a=o.onDismiss,i=o.dismissButtonAriaLabel,c=n().theme,u="string"==typeof e?"Deselect ".concat(e):"Deselect",d=i||u;return r.createElement("button",{type:"button","data-testid":"chip-dismiss-button","aria-label":d,"aria-disabled":l,disabled:l,className:s(rr,or(t,c),nr[c],er),onClick:a},r.createElement(g,{glyph:"X","aria-hidden":!0}))}lr.displayName="DismissButton";var tr=["chipTruncationLocation","chipCharacterLimit","disabled","variant","baseFontSize","darkMode","label","onDismiss","popoverZIndex","className","dismissButtonAriaLabel"],ar=r.forwardRef((function(e,t){var a=e.chipTruncationLocation,i=void 0===a?F.None:a,c=e.chipCharacterLimit,g=e.disabled,d=void 0!==g&&g,p=e.variant,f=void 0===p?x.Blue:p,h=e.baseFontSize,b=void 0===h?l.Body1:h,m=e.darkMode,v=e.label,y=e.onDismiss,C=e.popoverZIndex,k=e.className,B=e.dismissButtonAriaLabel,w=G(e,tr),L=n(m),D=L.darkMode,O=L.theme,N=Number.isInteger(c)&&"none"!==i&&"string"==typeof v&&!!v&&v.length>c,P=o((function(){return function(r,o,e){var n=r-3;switch(o){case"start":return"…"+e.substring(e.length-n).trim();case"middle":return e.substring(0,n/2).trim()+"…"+e.substring(e.length-n/2).trim();case"end":return e.substring(0,n).trim()+"…";default:return e}}(c,i,v)}),[c,i,v]);return r.createElement("span",j({ref:t,"aria-disabled":d,className:s(H,X(f,O),J(b),E({},s(Q[O],K),d),k)},w),r.createElement("span",{"data-testid":"chip-text",className:s(W(f,O),U(b),E(E({},V,!!y),$[O],d),T)},N?r.createElement(u,{darkMode:D,definition:v,align:"bottom",popoverZIndex:C,className:R},P):v),!!y&&r.createElement(lr,{label:v,onDismiss:y,disabled:d,variant:f,dismissButtonAriaLabel:B}))}));ar.displayName="Chip",ar.propTypes={label:i.string.isRequired,chipCharacterLimit:i.number,chipTruncationLocation:i.oneOf(Object.values(F)),popoverZIndex:i.number,baseFontSize:i.oneOf(Object.values(l)),variant:i.oneOf(Object.values(x)),onDismiss:i.func,dismissButtonAriaLabel:i.string};var ir={title:"Components/Chip",component:ar,parameters:{default:"LiveExample",generate:{storyNames:["Gray","Green","Blue","Red","Purple","Yellow"],combineArgs:{darkMode:[!1,!0],label:["Chip","meow meow meow miaou miao miau"],disabled:[!1,!0],onDismiss:[function(){},void 0],chipTruncationLocation:[F.End,F.Middle,F.None,F.Start],baseFontSize:[l.Body1,l.Body2]},args:{},decorator:function(o,n){return r.createElement(e,{darkMode:null==n?void 0:n.args.darkMode},r.createElement(o,null))}}},args:{label:"Chip",onDismiss:function(){},chipTruncationLocation:F.None,baseFontSize:l.Body1,variant:x.Gray,chipCharacterLimit:15,disabled:!1},argTypes:{variant:{options:Object.values(x),control:{type:"select"}},chipTruncationLocation:{options:[F.End,F.Middle,F.None,F.Start],control:{type:"select"}}}},cr=function(){return r.createElement(r.Fragment,null)};cr.parameters={generate:{args:{variant:x.Gray}}};var sr=function(){return r.createElement(r.Fragment,null)};sr.parameters={generate:{args:{variant:x.Green}}};var ur=function(){return r.createElement(r.Fragment,null)};ur.parameters={generate:{args:{variant:x.Red}}};var gr=function(){return r.createElement(r.Fragment,null)};gr.parameters={generate:{args:{variant:x.Blue}}};var dr=function(){return r.createElement(r.Fragment,null)};dr.parameters={generate:{args:{variant:x.Purple}}};var pr=function(){return r.createElement(r.Fragment,null)};pr.parameters={generate:{args:{variant:x.Yellow}}};var fr=function(o){return r.createElement(ar,o)}.bind({});export{gr as Blue,cr as Gray,sr as Green,fr as LiveExample,dr as Purple,ur as Red,pr as Yellow,ir as default};
+import e,{useMemo as r}from"react";import o,{glyphs as n}from"@leafygreen-ui/icon";import t,{useDarkMode as a}from"@leafygreen-ui/leafygreen-provider";import{BaseFontSize as l,typeScales as i,spacing as u,Property as c,InteractionState as s,transitionDuration as d,color as g}from"@leafygreen-ui/tokens";import f from"prop-types";import{css as p,cx as h}from"@leafygreen-ui/emotion";import b from"@leafygreen-ui/inline-definition";import{createUniqueClassName as m,Theme as k}from"@leafygreen-ui/lib";import{palette as y}from"@leafygreen-ui/palette";function v(e){var r=function(e,r){if("object"!=typeof e||!e)return e;var o=e[Symbol.toPrimitive];if(void 0!==o){var n=o.call(e,r);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof r?r:r+""}function D(e,r,o){return(r=v(r))in e?Object.defineProperty(e,r,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[r]=o,e}function B(){return B=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var o=arguments[r];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},B.apply(this,arguments)}function C(e,r){if(null==e)return{};var o,n,t=function(e,r){if(null==e)return{};var o,n,t={},a=Object.keys(e);for(n=0;n<a.length;n++)o=a[n],r.indexOf(o)>=0||(t[o]=e[o]);return t}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)o=a[n],r.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(t[o]=e[o])}return t}function F(e,r){return r||(r=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))}var w,x,L,E,O,T,j,I,G,A,N,P={Start:"start",Middle:"middle",End:"end",None:"none"},S={Gray:"gray",Blue:"blue",Green:"green",Purple:"purple",Red:"red",Yellow:"yellow"},z=m("chip-inline-definition"),M=m("chip-text"),R=D(D({},l.Body1,18),l.Body2,20),Y=D(D({},l.Body1,i.body1.fontSize),l.Body2,i.body2.fontSize),Z=D(D({},l.Body1,{y:u[0],x:u[100]}),l.Body2,{y:u[50],x:u[100]}),q=D(D(D(D(D(D({},S.Blue,D(D({},k.Dark,D(D(D({},c.Background,D(D({},s.Default,y.blue.dark3),s.Focus,y.blue.dark1)),c.Text,D({},s.Default,y.blue.light2)),c.Icon,D({},s.Default,y.blue.light2))),k.Light,D(D(D({},c.Background,D(D({},s.Default,y.blue.light3),s.Focus,"#89D2FF")),c.Text,D({},s.Default,y.blue.dark3)),c.Icon,D({},s.Default,y.blue.dark2)))),S.Red,D(D({},k.Dark,D(D(D({},c.Background,D(D({},s.Default,y.red.dark3),s.Focus,"#BB1A1A")),c.Text,D({},s.Default,y.red.light2)),c.Icon,D({},s.Default,y.red.light2))),k.Light,D(D(D({},c.Background,D(D({},s.Default,y.red.light3),s.Focus,"#FF9789")),c.Text,D({},s.Default,y.red.dark3)),c.Icon,D({},s.Default,y.red.dark2)))),S.Gray,D(D({},k.Dark,D(D(D({},c.Background,D(D({},s.Default,y.gray.dark2),s.Focus,y.gray.base)),c.Text,D({},s.Default,y.gray.light2)),c.Icon,D({},s.Default,y.gray.light1))),k.Light,D(D(D({},c.Background,D(D({},s.Default,y.gray.light2),s.Focus,"#A0A9A8")),c.Text,D({},s.Default,y.black)),c.Icon,D({},s.Default,y.gray.dark1)))),S.Green,D(D({},k.Dark,D(D(D({},c.Background,D(D({},s.Default,y.green.dark3),s.Focus,y.green.dark1)),c.Text,D({},s.Default,y.green.light2)),c.Icon,D({},s.Default,y.green.light2))),k.Light,D(D(D({},c.Background,D(D({},s.Default,y.green.light3),s.Focus,y.green.light1)),c.Text,D({},s.Default,y.green.dark3)),c.Icon,D({},s.Default,y.green.dark2)))),S.Purple,D(D({},k.Dark,D(D(D({},c.Background,D(D({},s.Default,y.purple.dark3),s.Focus,"#892CCA")),c.Text,D({},s.Default,y.purple.light2)),c.Icon,D({},s.Default,y.purple.light2))),k.Light,D(D(D({},c.Background,D(D({},s.Default,y.purple.light3),s.Focus,"#E19AFF")),c.Text,D({},s.Default,y.purple.dark3)),c.Icon,D({},s.Default,y.purple.dark2)))),S.Yellow,D(D({},k.Dark,D(D(D({},c.Background,D(D({},s.Default,y.yellow.dark3),s.Focus,"#C27823")),c.Text,D({},s.Default,y.yellow.light2)),c.Icon,D({},s.Default,y.yellow.light2))),k.Light,D(D(D({},c.Background,D(D({},s.Default,y.yellow.light3),s.Focus,"#FFD664")),c.Text,D({},s.Default,y.yellow.dark3)),c.Icon,D({},s.Default,y.yellow.dark2)))),W=D(D({},k.Dark,y.gray.dark1),k.Light,y.gray.light1),X=D(D({},k.Dark,y.gray.dark2),k.Light,y.gray.base),H=function(e,r,o){var n=arguments.length>3&&void 0!==arguments[3]&&arguments[3];return h(function(e,r,o){return p(w||(w=F(["\n  display: inline-flex;\n  align-items: center;\n  overflow: hidden;\n  white-space: nowrap;\n  border-radius: 4px;\n  font-size: ","px;\n  line-height: ","px;\n\n  color: ",";\n  background-color: ",";\n  transition: background-color ","ms ease-in-out;\n"])),Y[e],R[e],q[r][o].text.default,q[r][o].background.default,d.faster)}(e,r,o),D({},function(e){return h(p(x||(x=F(["\n      cursor: not-allowed;\n      background-color: ",";\n      color: ",";\n    "])),g[e].background.secondary.default,X[e]),D({},p(L||(L=F(["\n        box-shadow: inset 0 0 1px 1px ",";\n      "])),y.gray.dark2),e===k.Dark))}(o),n))},J=p(T||(T=F(["\n  padding-inline-end: ","px;\n"])),u[50]),K=function(e,r,o){var n=arguments.length>3&&void 0!==arguments[3]&&arguments[3],t=arguments.length>4&&void 0!==arguments[4]&&arguments[4];return h(function(e,r,o){return p(E||(E=F(["\n  padding-inline: ","px;\n  padding-block: ","px;\n\n  display: flex;\n  gap: ","px;\n\n  svg {\n    align-self: center;\n    color: ",";\n  }\n\n  &:focus-within {\n    background-color: ",";\n  }\n\n  ."," {\n    &:focus-visible,\n    &:focus {\n      outline: none;\n    }\n  }\n"])),Z[e].x,Z[e].y,u[50],q[r][o].icon.default,q[r][o].background.focus,z)}(e,r,o),D(D({},function(e){return p(O||(O=F(["\n  svg {\n    color: ",";\n  }\n\n  // truncated + disabled + focused styles (a truncated disabled chip is still focusable)\n  &:focus-within {\n    background-color: ",";\n  }\n"])),g[e].icon.disabled.default,W[e])}(o),n),J,t))},Q=D(D(D(D(D(D({},S.Blue,D(D({},k.Dark,{color:y.blue.light2,focusBgColor:q[S.Blue][k.Dark].background.focus,hoverBgColor:y.blue.dark2,hoverFocusColor:y.blue.light3}),k.Light,{color:y.blue.dark3,focusBgColor:q[S.Blue][k.Light].background.focus,hoverBgColor:y.blue.light2,hoverFocusColor:y.blue.dark3})),S.Red,D(D({},k.Dark,{color:y.red.light2,focusBgColor:q[S.Red][k.Dark].background.focus,hoverBgColor:y.red.dark2,hoverFocusColor:y.red.light3}),k.Light,{color:y.red.dark3,focusBgColor:q[S.Red][k.Light].background.focus,hoverBgColor:y.red.light2,hoverFocusColor:y.red.dark3})),S.Gray,D(D({},k.Dark,{color:y.gray.light1,focusBgColor:q[S.Gray][k.Dark].background.focus,hoverBgColor:y.gray.dark1,hoverFocusColor:y.gray.light3}),k.Light,{color:y.gray.dark2,focusBgColor:q[S.Gray][k.Light].background.focus,hoverBgColor:y.gray.light1,hoverFocusColor:y.black})),S.Green,D(D({},k.Dark,{color:y.green.light2,focusBgColor:q[S.Green][k.Dark].background.focus,hoverBgColor:y.green.dark2,hoverFocusColor:y.green.light3}),k.Light,{color:y.green.dark3,focusBgColor:q[S.Green][k.Light].background.focus,hoverBgColor:y.green.light2,hoverFocusColor:y.green.dark3})),S.Purple,D(D({},k.Dark,{color:y.purple.light2,focusBgColor:q[S.Purple][k.Dark].background.focus,hoverBgColor:y.purple.dark2,hoverFocusColor:y.purple.light3}),k.Light,{color:y.purple.dark3,focusBgColor:q[S.Purple][k.Light].background.focus,hoverBgColor:y.purple.light2,hoverFocusColor:y.purple.dark3})),S.Yellow,D(D({},k.Dark,{color:y.yellow.light2,focusBgColor:q[S.Yellow][k.Dark].background.focus,hoverBgColor:y.yellow.dark2,hoverFocusColor:y.yellow.light3}),k.Light,{color:y.yellow.dark3,focusBgColor:q[S.Yellow][k.Light].background.focus,hoverBgColor:y.yellow.light2,hoverFocusColor:y.yellow.dark3})),U=p(j||(j=F(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  outline: none;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  transition: background-color ","ms ease-in-out;\n  padding: 0 2px;\n  align-self: stretch;\n"])),d.faster),V=function(e,r){return p(I||(I=F(["\n  color: ",";\n\n  &:not(:disabled):hover {\n    background-color: ",";\n    color: ",";\n  }\n\n  &:focus-visible {\n    color: ",";\n    background-color: ",";\n\n    &:not(:disabled):hover {\n      background-color: ",";\n    }\n  }\n"])),Q[e][r].color,Q[e][r].hoverBgColor,Q[e][r].hoverFocusColor,Q[e][r].hoverFocusColor,Q[e][r].focusBgColor,Q[e][r].hoverBgColor)},$=p(G||(G=F(["\n  &:disabled {\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n"]))),_=D(D({},k.Light,p(A||(A=F(["\n    &:disabled {\n      color: ",";\n    }\n  "])),y.gray.light1)),k.Dark,p(N||(N=F(["\n    &:disabled {\n      color: ",";\n    }\n  "])),y.gray.dark2));function ee(r){var n=r.label,t=r.disabled,l=r.variant,i=r.onDismiss,u=r.dismissButtonAriaLabel,c=a().theme,s="string"==typeof n?"Deselect ".concat(n):"Deselect",d=u||s;return e.createElement("button",{type:"button","data-testid":"chip-dismiss-button","aria-label":d,"aria-disabled":t,disabled:t,className:h(U,V(l,c),_[c],$),onClick:i},e.createElement(o,{glyph:"X","aria-hidden":!0}))}ee.displayName="DismissButton";var re=["chipTruncationLocation","chipCharacterLimit","disabled","variant","baseFontSize","darkMode","label","onDismiss","popoverZIndex","className","dismissButtonAriaLabel","glyph"],oe=e.forwardRef((function(o,n){var t=o.chipTruncationLocation,i=void 0===t?P.None:t,u=o.chipCharacterLimit,c=o.disabled,s=void 0!==c&&c,d=o.variant,g=void 0===d?S.Blue:d,f=o.baseFontSize,p=void 0===f?l.Body1:f,m=o.darkMode,k=o.label,y=o.onDismiss,v=o.popoverZIndex,D=o.className,F=o.dismissButtonAriaLabel,w=o.glyph,x=C(o,re),L=a(m),E=L.darkMode,O=L.theme,T=Number.isInteger(u)&&"none"!==i&&"string"==typeof k&&!!k&&k.length>u,j=r((function(){return function(e,r,o){var n=e-3;switch(r){case"start":return"…"+o.substring(o.length-n).trim();case"middle":return o.substring(0,n/2).trim()+"…"+o.substring(o.length-n/2).trim();case"end":return o.substring(0,n).trim()+"…";default:return o}}(u,i,k)}),[u,i,k]);return e.createElement("span",B({ref:n,"aria-disabled":s,className:h(H(p,g,O,s),D)},x),e.createElement("span",{"data-testid":"chip-text",className:h(K(p,g,O,s,!!y),M)},w,T?e.createElement(b,{darkMode:E,definition:k,align:"bottom",popoverZIndex:v,className:z},j):k),!!y&&e.createElement(ee,{label:k,onDismiss:y,disabled:s,variant:g,dismissButtonAriaLabel:F}))}));oe.displayName="Chip",oe.propTypes={glyph:f.node,label:f.string.isRequired,chipCharacterLimit:f.number,chipTruncationLocation:f.oneOf(Object.values(P)),popoverZIndex:f.number,baseFontSize:f.oneOf(Object.values(l)),variant:f.oneOf(Object.values(S)),onDismiss:f.func,dismissButtonAriaLabel:f.string};var ne=["glyph"],te={title:"Components/Chip",component:oe,parameters:{default:"LiveExample",generate:{storyNames:["Gray","Green","Blue","Red","Purple","Yellow","Truncate"],combineArgs:{darkMode:[!1,!0],label:["Chip","meow meow meow miaou miao miau"],disabled:[!1,!0],onDismiss:[function(){},void 0],baseFontSize:[l.Body1,l.Body2],glyph:[e.createElement(o,{glyph:"Wizard",key:"1"}),void 0]},args:{},decorator:function(r,o){return e.createElement(t,{darkMode:null==o?void 0:o.args.darkMode},e.createElement(r,null))}}},args:{label:"Chip",onDismiss:function(){},chipTruncationLocation:P.End,baseFontSize:l.Body1,variant:S.Gray,chipCharacterLimit:15,disabled:!1,glyph:void 0},argTypes:{glyph:{options:Object.keys(n),control:{type:"select"}},variant:{options:Object.values(S),control:{type:"select"}},chipTruncationLocation:{options:[P.End,P.Middle,P.None,P.Start],control:{type:"select"}}}},ae=function(){return e.createElement(e.Fragment,null)};ae.parameters={generate:{args:{variant:S.Gray}}};var le=function(){return e.createElement(e.Fragment,null)};le.parameters={generate:{args:{variant:S.Green}}};var ie=function(){return e.createElement(e.Fragment,null)};ie.parameters={generate:{args:{variant:S.Red}}};var ue=function(){return e.createElement(e.Fragment,null)};ue.parameters={generate:{args:{variant:S.Blue}}};var ce=function(){return e.createElement(e.Fragment,null)};ce.parameters={generate:{args:{variant:S.Purple}}};var se=function(){return e.createElement(e.Fragment,null)};se.parameters={generate:{args:{variant:S.Yellow}}};var de=function(){return e.createElement(e.Fragment,null)};de.parameters={generate:{args:{variant:S.Blue,label:"meow meow meow miaou miao miau"},combineArgs:{chipTruncationLocation:[P.End,P.Middle,P.None,P.Start]}}};var ge=function(r){var n=r.glyph,t=C(r,ne);return e.createElement(oe,B({glyph:n?e.createElement(o,{glyph:n}):void 0},t))};export{ue as Blue,ae as Gray,le as Green,ge as LiveExample,ce as Purple,ie as Red,de as Truncate,se as Yellow,te as default};

tsdoc.json

@@ -199,2 +199,14 @@ [
           "tags": {}
+        },
+        "glyph": {
+          "name": "glyph",
+          "defaultValue": null,
+          "description": "An icon glyph rendered before the text.\nTo use a custom icon, see {@link Icon } {@link https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md#usage-registering-custom-icon-sets | createIconComponent} docs",
+          "required": false,
+          "type": {
+            "name": "Leafygreen <Icon /> Component"
+          },
+          "tags": {
+            "type": "Leafygreen <Icon /> Component"
+          }
         }
@@ -201,0 +213,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

183874

increased by19.12%

Lines of code

2170

increased by18.9%

Number of lines in readme file

61

increased by1.67%

No dependency changes