@atlaskit/status 5.10.0 → 5.11.0

package/dist/esm/components/status-colors.js

@@ -0,0 +1,223 @@
+import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+
+/** Named colours the ADF `color` attribute can carry. */
+
+export var NAMED_COLORS = ['neutral', 'purple', 'blue', 'red', 'yellow', 'green'];
+
+/**
+ * Hex ids the picker persists — the hues with no existing named ADF colour.
+ * Each is the panel-medium hex for that accent, so it resolves to the same token
+ * the editor palette would give it.
+ */
+
+export var HEX_PALETTE = ['#B3F5FF',
+// Teal
+'#ABF5D1',
+// Green
+'#D3F1A7',
+// Lime — named `green` renders identically
+'#FFF0B3',
+// Yellow
+'#FCE4A6',
+// Orange — named `yellow` renders identically
+'#FDD0EC' // Magenta
+];
+export var DEFAULT_LOZENGE_APPEARANCE = 'neutral';
+
+/** Pre-experiment mapping. Delete with `platform_editor_update_status_colors`. */
+export var colorToLozengeAppearanceMap = {
+  neutral: 'neutral',
+  purple: 'discovery',
+  blue: 'information',
+  red: 'danger',
+  yellow: 'warning',
+  green: 'success'
+};
+
+/**
+ * Check-mark colour for the selected swatch. Uniform across the ten-colour palette, so
+ * it is not a per-colour field. (The legacy six-colour palette does vary it, which is
+ * why `ColorProps` still takes it per swatch.)
+ */
+export var SWATCH_ICON_COLOR = "var(--ds-icon, #292A2E)";
+
+/**
+ * Keys of `messages` usable as a swatch's accessible name. Kept as a union so
+ * `getColorLabelKey` returns something `messages` is guaranteed to have — the
+ * call site in `color.tsx` then needs no cast, and an unregistered colour cannot
+ * produce a missing key.
+ */
+
+/**
+ * Single source of truth for status colours: appearance, swatch tokens and i18n key.
+ * Typed as a total `Record`, so adding a value to NAMED_COLORS or HEX_PALETTE
+ * fails to compile until it is described here.
+ *
+ * Legacy named `yellow`/`green` have no swatch — they are not offered separately,
+ * because `accent-orange`/`accent-lime` are byte-identical to the Orange/Lime swatches
+ * in both themes. The distinct Yellow and Green swatches are the #FFF0B3 / #ABF5D1 hues.
+ *
+ * CSS cannot be derived from this: Compiled needs static literals and the styling lint
+ * rule rejects computed values. `statusStylesHexAccent` in editor-core mirrors it by hand.
+ */
+export var COLORS = {
+  neutral: {
+    appearance: 'neutral',
+    labelKey: 'neutralColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-neutral, #0515240F)",
+      borderColor: "var(--ds-border, #0B120E24)"
+    }
+  },
+  blue: {
+    appearance: 'accent-blue',
+    labelKey: 'blueColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-blue-subtler, #CFE1FD)",
+      borderColor: "var(--ds-border-accent-blue-subtle, #8FB8F6)"
+    }
+  },
+  '#B3F5FF': {
+    appearance: 'accent-teal',
+    labelKey: 'tealColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-teal-subtler, #C6EDFB)",
+      borderColor: "var(--ds-border-accent-teal-subtle, #9DD9EE)"
+    }
+  },
+  '#ABF5D1': {
+    appearance: 'accent-green',
+    labelKey: 'greenColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-green-subtler, #BAF3DB)",
+      borderColor: "var(--ds-border-accent-green-subtle, #7EE2B8)"
+    }
+  },
+  '#D3F1A7': {
+    appearance: 'accent-lime',
+    labelKey: 'limeColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-lime-subtler, #D3F1A7)",
+      borderColor: "var(--ds-border-accent-lime-subtle, #B3DF72)"
+    }
+  },
+  '#FFF0B3': {
+    appearance: 'accent-yellow',
+    labelKey: 'yellowColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-yellow-subtler, #F5E989)",
+      borderColor: "var(--ds-border-accent-yellow-subtle, #EED12B)"
+    }
+  },
+  '#FCE4A6': {
+    appearance: 'accent-orange',
+    labelKey: 'orangeColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-orange-subtler, #FCE4A6)",
+      borderColor: "var(--ds-border-accent-orange-subtle, #FBC828)"
+    }
+  },
+  red: {
+    appearance: 'accent-red',
+    labelKey: 'redColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-red-subtler, #FFD5D2)",
+      borderColor: "var(--ds-border-accent-red-subtle, #FD9891)"
+    }
+  },
+  '#FDD0EC': {
+    appearance: 'accent-magenta',
+    labelKey: 'magentaColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-magenta-subtler, #FDD0EC)",
+      borderColor: "var(--ds-border-accent-magenta-subtle, #F797D2)"
+    }
+  },
+  purple: {
+    appearance: 'accent-purple',
+    labelKey: 'purpleColor',
+    swatch: {
+      backgroundColor: "var(--ds-background-accent-purple-subtler, #EED7FC)",
+      borderColor: "var(--ds-border-accent-purple-subtle, #D8A0F7)"
+    }
+  },
+  yellow: {
+    appearance: 'accent-orange',
+    labelKey: 'yellowColor'
+  },
+  green: {
+    appearance: 'accent-lime',
+    labelKey: 'greenColor'
+  }
+};
+
+/** Swatch order in the ten-colour picker: two rows of five. */
+export var PICKER_SWATCHES = ['neutral',
+// Gray
+'blue',
+// Blue
+'#B3F5FF',
+// Teal
+'#ABF5D1',
+// Green
+'#D3F1A7',
+// Lime
+'#FFF0B3',
+// Yellow
+'#FCE4A6',
+// Orange
+'red',
+// Red
+'#FDD0EC',
+// Magenta
+'purple' // Purple
+];
+export var isNamedColor = function isNamedColor(color) {
+  return NAMED_COLORS.includes(color);
+};
+export var normalizeColor = function normalizeColor(color) {
+  return color.startsWith('#') ? color.toUpperCase() : color;
+};
+var specFor = function specFor(color) {
+  return COLORS[normalizeColor(color)];
+};
+
+/**
+ * Falls back to the neutral label rather than building a key from the colour: an
+ * unregistered value would otherwise yield a key `messages` does not have, and
+ * spreading the resulting `undefined` into `FormattedMessage` throws.
+ */
+export var getColorLabelKey = function getColorLabelKey(color) {
+  var _specFor$labelKey, _specFor;
+  return (_specFor$labelKey = (_specFor = specFor(color)) === null || _specFor === void 0 ? void 0 : _specFor.labelKey) !== null && _specFor$labelKey !== void 0 ? _specFor$labelKey : 'neutralColor';
+};
+export var isSwatchSelected = function isSwatchSelected(swatchValue, selectedColor) {
+  var _specFor2, _specFor3;
+  if (!selectedColor) {
+    return false;
+  }
+  if (normalizeColor(swatchValue) === normalizeColor(selectedColor)) {
+    return true;
+  }
+
+  // A swatch also counts as selected when it renders the same hue under a different
+  // id — legacy named `green`/`yellow` share the Lime/Orange swatches. Unknown values
+  // have no spec, so they never collide on the neutral fallback.
+  var swatchAppearance = (_specFor2 = specFor(swatchValue)) === null || _specFor2 === void 0 ? void 0 : _specFor2.appearance;
+  return swatchAppearance !== undefined && swatchAppearance === ((_specFor3 = specFor(selectedColor)) === null || _specFor3 === void 0 ? void 0 : _specFor3.appearance);
+};
+export var getLozengeAppearance = function getLozengeAppearance(color) {
+  var isUpdateStatusColorsEnabled = UNSAFE_expValNoExposure('platform_editor_update_status_colors', 'isEnabled', false);
+
+  // Named colours are recoloured only by the experiment. `gracefully_render_status_color`
+  // is a read-path gate for hex written by another cohort, so it must never reach here.
+  if (isNamedColor(color)) {
+    return isUpdateStatusColorsEnabled ? COLORS[color].appearance : colorToLozengeAppearanceMap[color];
+  }
+  if (isUpdateStatusColorsEnabled || fg('platform_editor_gracefully_render_status_color')) {
+    var _specFor$appearance, _specFor4;
+    return (_specFor$appearance = (_specFor4 = specFor(color)) === null || _specFor4 === void 0 ? void 0 : _specFor4.appearance) !== null && _specFor$appearance !== void 0 ? _specFor$appearance : DEFAULT_LOZENGE_APPEARANCE;
+  }
+  return DEFAULT_LOZENGE_APPEARANCE;
+};

package/dist/types/components/Status.d.ts

@@ -4,7 +4,12 @@
  */
 import { type ForwardRefExoticComponent, type RefAttributes } from 'react';
 import { type WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
-export type Color = 'neutral' | 'purple' | 'blue' | 'red' | 'yellow' | 'green';
+import { type NamedColor } from './status-colors';
+/**
+ * What the ADF `color` attribute can hold. `HexColor` is the closed set we persist — do
+ * not substitute it here, or graceful rendering of unknown hex becomes a type error.
+ */
+export type Color = NamedColor | `#${string}`;
 export type StatusStyle = 'bold' | 'subtle';
 export interface OwnProps {
     color: Color;

package/dist/types/components/StatusPicker.d.ts

@@ -2,12 +2,23 @@ import React, { type ReactNode } from 'react';
 import { type WithIntlProps, type WrappedComponentProps } from 'react-intl';
 import { type Color } from './Status';
 export type ColorType = Color;
+/**
+ * Which set of selectable values the picker offers.
+ * - `default`: the six named colours.
+ * - `extended`: ten colours; hues without an existing name are persisted as hex.
+ */
+export type StatusPaletteVariant = 'default' | 'extended';
 export interface Props {
     autoFocus?: boolean;
     onColorClick: (value: ColorType) => void;
     onColorHover?: (value: ColorType) => void;
     onEnter: () => void;
     onTextChanged: (value: string) => void;
+    /**
+     * Which set of selectable colours to offer. Defaults to the six named colours;
+     * `extended` offers ten and can emit hex values through `onColorClick`.
+     */
+    palette?: StatusPaletteVariant;
     scrollableContent?: ReactNode;
     selectedColor: ColorType;
     text: string;

package/dist/types/components/i18n.d.ts

@@ -1,37 +1,57 @@
 export declare const messages: {
-    neutralColor: {
-        id: string;
+    blueColor: {
         defaultMessage: string;
         description: string;
-    };
-    purpleColor: {
         id: string;
+    };
+    greenColor: {
         defaultMessage: string;
         description: string;
-    };
-    blueColor: {
         id: string;
+    };
+    limeColor: {
         defaultMessage: string;
         description: string;
-    };
-    redColor: {
         id: string;
+    };
+    magentaColor: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
-    yellowColor: {
+    neutralColor: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    orangeColor: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
-    greenColor: {
+    purpleColor: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    redColor: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
     statusInputLabel: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    tealColor: {
         defaultMessage: string;
         description: string;
+        id: string;
+    };
+    yellowColor: {
+        defaultMessage: string;
+        description: string;
+        id: string;
     };
 };

package/dist/types/components/internal/color-palette.d.ts

@@ -1,10 +1,13 @@
 import { type Color as ColorType } from '../Status';
+import { type StatusPaletteVariant } from '../StatusPicker';
 interface ColorPaletteProps {
     className?: string;
     cols?: number;
     onClick: (value: ColorType) => void;
     onHover?: (value: ColorType) => void;
+    /** Which set of selectable values to offer. Defaults to the six named colours. */
+    palette?: StatusPaletteVariant;
     selectedColor?: ColorType;
 }
 export default _default;
-declare function _default({ cols, onClick, selectedColor, className, onHover, }: ColorPaletteProps): JSX.Element;
+declare function _default({ cols, onClick, selectedColor, className, onHover, palette: variant, }: ColorPaletteProps): JSX.Element;

package/dist/types/components/status-colors.d.ts

@@ -0,0 +1,66 @@
+import type { AccentColor, SemanticColor } from '@atlaskit/lozenge/types';
+/** Named colours the ADF `color` attribute can carry. */
+export type NamedColor = 'neutral' | 'purple' | 'blue' | 'red' | 'yellow' | 'green';
+export declare const NAMED_COLORS: readonly NamedColor[];
+/**
+ * Hex ids the picker persists — the hues with no existing named ADF colour.
+ * Each is the panel-medium hex for that accent, so it resolves to the same token
+ * the editor palette would give it.
+ */
+export type HexColor = '#B3F5FF' | '#ABF5D1' | '#D3F1A7' | '#FFF0B3' | '#FCE4A6' | '#FDD0EC';
+export declare const HEX_PALETTE: readonly HexColor[];
+export type PaletteColor = NamedColor | HexColor;
+export declare const DEFAULT_LOZENGE_APPEARANCE: SemanticColor;
+/** Pre-experiment mapping. Delete with `platform_editor_update_status_colors`. */
+export declare const colorToLozengeAppearanceMap: {
+    [K in NamedColor]: SemanticColor;
+};
+/**
+ * Check-mark colour for the selected swatch. Uniform across the ten-colour palette, so
+ * it is not a per-colour field. (The legacy six-colour palette does vary it, which is
+ * why `ColorProps` still takes it per swatch.)
+ */
+export declare const SWATCH_ICON_COLOR: string;
+/**
+ * Keys of `messages` usable as a swatch's accessible name. Kept as a union so
+ * `getColorLabelKey` returns something `messages` is guaranteed to have — the
+ * call site in `color.tsx` then needs no cast, and an unregistered colour cannot
+ * produce a missing key.
+ */
+type ColorLabelKey = 'neutralColor' | 'purpleColor' | 'blueColor' | 'redColor' | 'yellowColor' | 'greenColor' | 'tealColor' | 'limeColor' | 'orangeColor' | 'magentaColor';
+type ColorSpec = {
+    appearance: SemanticColor | AccentColor;
+    /** Key in `messages` for the picker swatch's accessible name. */
+    labelKey: ColorLabelKey;
+    /** Present when the colour is offered as a swatch in the ten-colour picker. */
+    swatch?: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+};
+/**
+ * Single source of truth for status colours: appearance, swatch tokens and i18n key.
+ * Typed as a total `Record`, so adding a value to NAMED_COLORS or HEX_PALETTE
+ * fails to compile until it is described here.
+ *
+ * Legacy named `yellow`/`green` have no swatch — they are not offered separately,
+ * because `accent-orange`/`accent-lime` are byte-identical to the Orange/Lime swatches
+ * in both themes. The distinct Yellow and Green swatches are the #FFF0B3 / #ABF5D1 hues.
+ *
+ * CSS cannot be derived from this: Compiled needs static literals and the styling lint
+ * rule rejects computed values. `statusStylesHexAccent` in editor-core mirrors it by hand.
+ */
+export declare const COLORS: Record<PaletteColor, ColorSpec>;
+/** Swatch order in the ten-colour picker: two rows of five. */
+export declare const PICKER_SWATCHES: readonly PaletteColor[];
+export declare const isNamedColor: (color: string) => color is NamedColor;
+export declare const normalizeColor: (color: string) => string;
+/**
+ * Falls back to the neutral label rather than building a key from the colour: an
+ * unregistered value would otherwise yield a key `messages` does not have, and
+ * spreading the resulting `undefined` into `FormattedMessage` throws.
+ */
+export declare const getColorLabelKey: (color: string) => ColorLabelKey;
+export declare const isSwatchSelected: (swatchValue: string, selectedColor?: string) => boolean;
+export declare const getLozengeAppearance: (color: string) => SemanticColor | AccentColor;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/status",
-	"version": "5.10.0",
+	"version": "5.11.0",
 	"description": "Fabric Status React Components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,6 +29,7 @@
 	"devDependencies": {
 		"@af/visual-regression": "workspace:^",
 		"@atlassian/a11y-jest-testing": "^0.17.0",
+		"@atlassian/experiment-test-utils": "^0.2.0",
 		"@atlassian/feature-flags-test-utils": "^1.3.0",
 		"@atlassian/workbench": "workspace:*",
 		"@testing-library/jest-dom": "^6.4.5",
@@ -47,11 +48,12 @@
 		"@atlaskit/analytics-next": "^12.5.0",
 		"@atlaskit/icon": "^37.6.0",
 		"@atlaskit/lozenge": "^15.4.0",
+		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/tmp-editor-statsig": "^190.0.0",
+		"@atlaskit/tmp-editor-statsig": "^192.0.0",
 		"@atlaskit/tokens": "^16.12.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2"
@@ -72,6 +74,9 @@
 		},
 		"platform-dst-lozenge-tag-badge-visual-uplifts": {
 			"type": "boolean"
+		},
+		"platform_editor_gracefully_render_status_color": {
+			"type": "boolean"
 		}
 	}
 }