@workday/canvas-kit-preview-react 7.0.0-alpha.94-next.20 → 7.0.0-alpha.97-next.23

package/pill/lib/PillLabel.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {createSubcomponent, styled, StyledType} from '@workday/canvas-kit-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {OverflowTooltip, OverflowTooltipProps} from '@workday/canvas-kit-react/tooltip';
+
+import {usePillModel} from './usePillModel';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+export interface PillLabelProps extends BoxProps {
+  tooltipProps?: Omit<OverflowTooltipProps, 'children'>;
+}
+const StyledLabelContainer = styled(Box.as('span'))<StyledType>({
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  display: 'block',
+});
+
+export const PillLabel = createSubcomponent('span')({
+  modelHook: usePillModel,
+})<PillLabelProps>(({tooltipProps, ...elemProps}, Element, model) => {
+  return (
+    <OverflowTooltip {...tooltipProps}>
+      <StyledLabelContainer
+        color={model.state.disabled ? colors.licorice100 : 'inherit'}
+        maxWidth={model.state.maxWidth}
+        as={Element}
+        {...elemProps}
+      >
+        {elemProps.children}
+      </StyledLabelContainer>
+    </OverflowTooltip>
+  );
+});

package/pill/lib/usePillModel.tsx

@@ -0,0 +1,21 @@
+import {createModelHook} from '@workday/canvas-kit-react/common';
+
+export const usePillModel = createModelHook({
+  defaultConfig: {
+    /**
+     * Determines the max width of the pill. If the pill text is longer than the max width,
+     * text will be truncated and a tooltip will show the rest of the content when hovered over
+     */
+    maxWidth: 200 as string | number,
+    /**
+     * Use to disable a pill.
+     */
+    disabled: false,
+  },
+})(config => {
+  const state = {
+    ...config,
+  };
+
+  return {state, events: {}};
+});

package/pill/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/commonjs/pill",
+  "module": "../dist/es6/pill",
+  "sideEffects": false
+}