@indico-data/design-system 3.22.1 → 3.23.0

package/src/components/pill/Pill.stories.tsx

@@ -65,6 +65,8 @@ const meta: Meta<typeof Pill> = {
     iconLeft: { control: 'text' },
     iconRight: { control: 'text' },
     dot: { control: 'boolean' },
+    shade: { control: { type: 'number' } },
+    shadeCount: { control: { type: 'number' } },
     onClose: { control: false },
     children: { control: 'text' },
   },
@@ -274,6 +276,91 @@ export const CloseableMatrix: Story = {
   ),
 };
 
+export const Shaded: Story = {
+  args: {
+    children: 'Medium',
+    color: 'green',
+    shade: 3,
+    shadeCount: 5,
+  },
+  argTypes: {
+    shade: { control: { type: 'range', min: 1, max: 10, step: 1 } },
+    shadeCount: { control: { type: 'range', min: 2, max: 10, step: 1 } },
+  },
+};
+
+export const ShadedSpectrum: Story = {
+  render: () => {
+    const labels = ['Very Low', 'Low', 'Medium', 'High', 'Very High'];
+    return (
+      <>
+        {(['solid', 'outline'] as const).map((variant) => (
+          <div key={variant} style={section}>
+            <h4 style={{ marginBottom: 8, textTransform: 'capitalize' }}>{variant}</h4>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+              {COLORS.filter((c) => c !== 'soft').map((color) => (
+                <div key={color} style={row}>
+                  <span
+                    style={{
+                      width: 60,
+                      fontSize: 12,
+                      fontWeight: 500,
+                      textTransform: 'capitalize',
+                    }}
+                  >
+                    {color}
+                  </span>
+                  {labels.map((label, i) => (
+                    <Pill
+                      key={label}
+                      color={color}
+                      variant={variant}
+                      size="md"
+                      shade={i + 1}
+                      shadeCount={labels.length}
+                    >
+                      {label}
+                    </Pill>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </>
+    );
+  },
+};
+
+export const ShadedDynamicCount: Story = {
+  render: () => {
+    const counts = [3, 5, 7];
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        {counts.map((count) => (
+          <div key={count}>
+            <h4 style={{ marginBottom: 8 }}>{count} shades</h4>
+            <div style={row}>
+              {Array.from({ length: count }, (_, i) => (
+                <Pill
+                  key={i}
+                  color="blue"
+                  variant="solid"
+                  size="md"
+                  shade={i + 1}
+                  shadeCount={count}
+                >
+                  {i + 1} of {count}
+                </Pill>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
 const th: React.CSSProperties = {
   padding: '6px 10px',
   fontSize: 11,

package/src/components/pill/Pill.tsx

@@ -19,11 +19,46 @@ export const Pill = ({
   iconLeft,
   iconRight,
   dot,
+  shade,
+  shadeCount,
   onClose,
   closeAriaLabel = 'Remove',
   className,
+  style,
   ...rest
 }: PillProps) => {
+  const shadeStyle = (() => {
+    if (
+      shade === undefined ||
+      shade === null ||
+      shadeCount === undefined ||
+      shadeCount === null ||
+      shadeCount <= 1
+    )
+      return undefined;
+
+    const s = Math.max(1, Math.min(shadeCount, Math.round(shade)));
+    const midpoint = (shadeCount + 1) / 2;
+
+    if (s < midpoint) {
+      const distance = (midpoint - s) / (midpoint - 1);
+      return {
+        '--pill-shade-mix': `${Math.round(100 - distance * 30)}%`,
+        '--pill-shade-target': 'white',
+      } as React.CSSProperties;
+    }
+
+    if (s > midpoint) {
+      const distance = (s - midpoint) / (shadeCount - midpoint);
+      return {
+        '--pill-shade-mix': `${Math.round(100 - distance * 30)}%`,
+        '--pill-shade-target': 'black',
+      } as React.CSSProperties;
+    }
+
+    return undefined;
+  })();
+
   return (
     <div
       className={classNames(
@@ -37,6 +72,7 @@ export const Pill = ({
           'pill--closeable': !!onClose,
         },
       )}
+      style={shadeStyle ? { ...shadeStyle, ...style } : style}
       {...rest}
     >
       {dot && <span className="pill__dot" />}

package/src/components/pill/__tests__/Pill.test.tsx

@@ -122,4 +122,97 @@ describe('Pill', () => {
     expect(container.querySelector('.pill__close')).toBeInTheDocument();
     expect(screen.getByText('All Features')).toBeInTheDocument();
   });
+
+  describe('shade', () => {
+    const getStyle = (container: HTMLElement) => (container.firstChild as HTMLElement).style;
+
+    it('sets no shade vars when both shade and shadeCount are omitted', () => {
+      const { container } = render(<Pill>Plain</Pill>);
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).toBe('');
+      expect(style.getPropertyValue('--pill-shade-target')).toBe('');
+    });
+
+    it('sets no shade vars when only shade is provided', () => {
+      const { container } = render(<Pill shade={2}>Shade Only</Pill>);
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).toBe('');
+    });
+
+    it('sets no shade vars when only shadeCount is provided', () => {
+      const { container } = render(<Pill shadeCount={5}>Count Only</Pill>);
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).toBe('');
+    });
+
+    it('mixes toward white for shades below midpoint', () => {
+      const { container } = render(
+        <Pill shade={1} shadeCount={5}>
+          Lightest
+        </Pill>,
+      );
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).toBe('70%');
+      expect(style.getPropertyValue('--pill-shade-target')).toBe('white');
+    });
+
+    it('mixes toward black for shades above midpoint', () => {
+      const { container } = render(
+        <Pill shade={5} shadeCount={5}>
+          Darkest
+        </Pill>,
+      );
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).toBe('70%');
+      expect(style.getPropertyValue('--pill-shade-target')).toBe('black');
+    });
+
+    it('sets no shade vars at the exact midpoint (base color)', () => {
+      const { container } = render(
+        <Pill shade={3} shadeCount={5}>
+          Middle
+        </Pill>,
+      );
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).toBe('');
+      expect(style.getPropertyValue('--pill-shade-target')).toBe('');
+    });
+
+    it('handles even shadeCount (no exact midpoint)', () => {
+      const { container: c1 } = render(
+        <Pill shade={2} shadeCount={4}>
+          Below
+        </Pill>,
+      );
+      const { container: c2 } = render(
+        <Pill shade={3} shadeCount={4}>
+          Above
+        </Pill>,
+      );
+      expect(getStyle(c1).getPropertyValue('--pill-shade-target')).toBe('white');
+      expect(getStyle(c2).getPropertyValue('--pill-shade-target')).toBe('black');
+    });
+
+    it('ignores shade when shadeCount is 1 or missing', () => {
+      const { container: c1 } = render(
+        <Pill shade={1} shadeCount={1}>
+          Single
+        </Pill>,
+      );
+      const { container: c2 } = render(<Pill shade={2}>No Count</Pill>);
+      expect(getStyle(c1).getPropertyValue('--pill-shade-mix')).toBe('');
+      expect(getStyle(c2).getPropertyValue('--pill-shade-mix')).toBe('');
+    });
+
+    it('preserves consumer style prop alongside shade vars', () => {
+      const { container } = render(
+        <Pill shade={1} shadeCount={3} style={{ maxWidth: 200 }}>
+          Styled
+        </Pill>,
+      );
+      const style = getStyle(container);
+      expect(style.getPropertyValue('--pill-shade-mix')).not.toBe('');
+      expect(style.maxWidth).toBe('200px');
+    });
+  });
 });

package/src/components/pill/styles/Pill.scss

@@ -112,11 +112,24 @@ $pill-variants: 'solid', 'outline';
   @each $variant in $pill-variants {
     @each $color in $pill-colors {
       &--#{$variant}-#{$color} {
-        background-color: var(--pf-pill-#{$variant}-#{$color}-bg);
+        background-color: color-mix(
+          in srgb,
+          var(--pf-pill-#{$variant}-#{$color}-bg) var(--pill-shade-mix, 100%),
+          var(--pill-shade-target, white)
+        );
         color: var(--pf-pill-#{$variant}-#{$color}-text);
 
         @if $variant == 'outline' {
-          box-shadow: inset 0 0 0 1px var(--pf-pill-#{$variant}-#{$color}-border);
+          box-shadow: inset
+            0
+            0
+            0
+            1px
+            color-mix(
+              in srgb,
+              var(--pf-pill-#{$variant}-#{$color}-border) var(--pill-shade-mix, 100%),
+              var(--pill-shade-target, white)
+            );
         }
 
         > .icon {

package/src/components/pill/types.ts

@@ -25,6 +25,10 @@ export interface PillProps extends React.HTMLAttributes<HTMLDivElement> {
   iconRight?: IconName;
   /** When true, renders a small colored dot indicator before the content */
   dot?: boolean;
+  /** 1-based shade index within a group. Used with shadeCount to vary background lightness via color-mix(). */
+  shade?: number;
+  /** Total shades in the group. Background blends lighter (white) below midpoint, darker (black) above. */
+  shadeCount?: number;
   /** When provided, renders a close button that calls this handler */
   onClose?: () => void;
   /** Accessible label for the close button (for i18n) */

package/src/index.ts

@@ -27,6 +27,7 @@ export { Card } from './components/card';
 export { FloatUI } from './components/floatUI';
 export { Menu } from './components/menu';
 export { Pill } from './components/pill';
+export { Alert } from './components/alert';
 export { Badge } from './components/badge';
 export { Modal, ConfirmationModal } from './components/modal';
 export { TanstackTable } from './components/tanstackTable';

package/src/setup/setupIcons.ts

@@ -6,9 +6,13 @@ import {
   faArrowLeft,
   faCalculator,
   faCheck,
+  faCircleCheck,
+  faCircleExclamation,
+  faCircleInfo,
   faCircleNotch,
   faMountainSun,
   faRocket,
+  faTriangleExclamation,
   faWind,
   faEyeSlash,
   faEye,
@@ -40,9 +44,13 @@ registerFontAwesomeIcons(
   faArrowLeft,
   faCalculator,
   faCheck,
+  faCircleCheck,
+  faCircleExclamation,
+  faCircleInfo,
   faCircleNotch,
   faMountainSun,
   faRocket,
+  faTriangleExclamation,
   faWind,
   faEyeSlash,
   faEye,

package/src/styles/index.scss

@@ -3,7 +3,6 @@
 @import 'variables/index.scss';
 @import 'primitives/index.scss';
 @import 'tokens/semantic-tokens';
-
 @import 'utilities';
 @import 'typography';
 @import 'colors';
@@ -36,6 +35,8 @@
 @import '../components/tanstackTable/styles/table.scss';
 @import '../components/pill/styles/tokens';
 @import '../components/pill/styles/Pill.scss';
+@import '../components/alert/styles/tokens';
+@import '../components/alert/styles/Alert.scss';
 @import '../components/loading-indicators/BarSpinner/styles/BarSpinner.scss';
 @import '../components/loading-indicators/CirclePulse/CirclePulse.scss';
 @import '../components/truncate/styles/Truncate.scss';

package/src/types.ts

@@ -1,3 +1,4 @@
+import { type AlertType, type AlertSize, type AlertVariant } from './components/alert/types';
 import { type SelectOption } from './components/forms/select/types';
 import { type IconSizes, type IconName } from './components/icons/types';
 import {
@@ -40,3 +41,4 @@ export type SemanticColor = 'neutral' | 'info' | 'warning' | 'error' | 'success'
 export type { SelectOption };
 export type { TableProps, TableColumn, Direction, Alignment };
 export type { PillColor, PillSize, PillVariant, PillType };
+export type { AlertType, AlertSize, AlertVariant };