@7shifts/sous-chef 4.13.0 → 4.14.0

package/dist/media/Avatar/AvatarImage/AvatarImage.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 type Props = {
-    url: string;
+    url?: string;
+    color?: string;
     alt?: string;
     onImageFallbackError: () => void;
-    onImageLoad: () => void;
 };
 declare const AvatarImage: React.FC<Props>;
 export default AvatarImage;

package/dist/media/Badge/Badge.d.ts

@@ -4,11 +4,6 @@ type Props = {
     theme?: 'success' | 'danger' | 'warning' | 'info';
     /** This will show a black tooltip when the user hover the badge */
     title?: string;
-    /**
-     * `default` renders the badge with its content. `dot` renders a
-     * small solid circle with no content — used by small/medium Avatars.
-     */
-    size?: 'dot' | 'default';
     testId?: string;
 };
 /**

package/llms-instructions/guidelines/Avatar.guidelines.md

@@ -18,9 +18,10 @@
 
 Avatars can display different kinds of content. Within 7shifts, the entity being displayed defines the content displayed:
 
--   **For people** - Uses a photo if available. If not, fallback to the `default`
+-   **For people** - Uses a photo if available. If not, falls back to the user's initials — the first letter of their first name and the first letter of their last name
 -   **For Roles** - Uses a single initial
 -   **For Departments** - Use an icon
+-   **For Locations** - Uses a photo if available. If not, falls back to the default placeholder image for locations
 
 ### Sizes
 
@@ -29,11 +30,34 @@ On table cells and list rows, `medium` is the most common size as `small` is qui
 
 ### Colour
 
-When showing initials or an icon, a background colour can be applied to the avatar. For entities like roles and departments that already have an assigned colour in the system, use that colour here to reinforce the visual identity and aid quick recognition. `default` avatars for users who have not added a photo are random.
+Colour communicates entity identity at a glance and reinforces visual continuity with how that entity appears elsewhere in the product.
+
+#### Users
+
+User avatars reflect the colour of the user's **Primary Role** for the department they are being displayed in:
+
+-   **No photo uploaded** — the role colour fills the avatar background, behind the user's initials
+-   **Photo uploaded** — the role colour appears as a coloured border around the avatar
+-   **No assigned role** — the avatar appears grey
+-   **Multiple roles** — the Primary Role's colour is always used. If the user has multiple roles but none is set as primary, the colour of their oldest assigned role is shown instead
+
+#### Roles
+
+Use the colour associated with that role as the avatar background.
+
+#### Departments
+
+Use the `neutral` or `tertiary` colour palettes.
+
+#### Locations
+
+When there is no user-uploaded photo, the avatar uses the pre-defined placeholder image for locations — no background colour applies.
 
 ### Badge
 
-A badge can be overlaid on the avatar to surface supplementary information — an action, a status indicator, or a count. The badge sits in the bottom-right corner of the avatar. Badges are not shown on `small` avatars as there is not enough space.
+A badge can be overlaid on the avatar to surface supplementary information — an action, a status indicator, or a count. The badge sits in the bottom-right corner of the avatar.
+
+Badges are supported on all sizes. When the avatar is set to `small` or `medium`, the badge automatically renders in its dot variant so it doesn't obscure the avatar content. On `large` and `extra-large` avatars, the full badge is shown.
 
 ## Tips & Tricks
 
@@ -47,6 +71,6 @@ A badge can be overlaid on the avatar to surface supplementary information — a
 
 -   `size` defaults to `medium` if not specified.
 -   `children` takes priority over `url` — if both are provided, the children render and the image is ignored.
--   Badges do not render when `size="small"`. This is intentional and cannot be overridden.
+-   When `size="small"` or `size="medium"`, any badge passed to the avatar is automatically forced into its dot variant. This is intentional and cannot be overridden.
 -   Images are lazy-loaded and only fetched when the avatar enters the viewport.
 -   If the image URL returns an error, the avatar falls back to a generated illustrated placeholder — not a broken image.

package/llms-instructions/guidelines/Badge.guidelines.md

@@ -22,6 +22,12 @@ Badge accepts any content — a number, an icon, or short text. Numbers are the
 
 Badge supports 5 themes that change its background colour: `default`, `success`, `danger`, `warning`, and `info`. Use these to reinforce the meaning of what the badge is communicating.
 
+### Size
+
+Badge supports two sizes via the `size` property: `default` and `dot`.
+
+The `dot` variant reduces the badge to a single coloured circle with no content. It trades information density for space efficiency — the colour alone signals presence or status. Use `dot` when attaching a badge to a small element where the full badge would overwhelm the host, such as an icon or a `small` or `medium` sized avatar.
+
 ### Tooltip
 
 When a badge contains only an icon or a number that may not be self-explanatory, a tooltip should be added to clarify what it means.
@@ -31,6 +37,7 @@ When a badge contains only an icon or a number that may not be self-explanatory,
 -   Badges with numbers work best for counts under 100 — if the count can go higher, consider capping the display at "99+" to prevent the badge from growing too wide.
 -   Icon badges are ideal for edit or camera actions on avatars — they communicate "you can change this" without needing any text.
 -   Badge is intentionally minimal — resist the urge to put too much inside it. If you need more than a number or a single icon, you probably want a `Pill` or `chip` instead.
+-   Be conscious when using dot badges — they carry much less information, and relying on colour alone to distinguish statuses is not accessible. Use dot badges in a binary sense, where the presence or absence of the badge is enough to communicate a status change. Avoid dot badges when you have multiple distinct states to communicate.
 
 ## Additional Rules
 
@@ -38,3 +45,4 @@ When a badge contains only an icon or a number that may not be self-explanatory,
 -   When `children` is a React element (e.g. an icon), the badge height is set to match its width to keep it circular.
 -   `theme` is optional — without it the badge renders in its default neutral colour.
 -   `title` renders as a `Tooltip` overlay on hover. It does not render any visible label at rest.
+-   When `size="dot"`, any children passed to the badge are ignored — the dot renders as a plain coloured circle regardless of content.

package/llms-instructions/guidelines/Modal.guidelines.md

@@ -47,6 +47,21 @@ This image has a fixed height of `200px` and the width matches the width of the
 
 Note that the close `button` and icons in the icon bar have a distinct transparent fill in order to ensure they are still visible over the chosen image.
 
+#### Icon Bar
+
+The `iconBar` prop places one or more icon buttons in the top bar of the modal, sitting alongside the close button. Use it for secondary, contextual actions that are specific to the modal's content — things like opening a help article, accessing settings, or copying a link.
+
+Keep these rules in mind when using the icon bar:
+
+-   Use icon-only buttons. Labels don't fit and the close button sets the visual precedent.
+-   Limit to 2–3 icons at most. More than that and the header becomes cluttered.
+-   The icon bar is not the place for primary actions — those belong in the `ModalFooter`.
+-   When `imageSrc` is also set, the icon bar buttons automatically adopt a transparent fill to remain visible over the image.
+
+#### Tabs
+
+Use the `tabList` prop to pin a `TabList` below the modal header. This keeps the tab bar anchored while the content in `ModalBody` scrolls independently — a cleaner pattern than putting a `TabList` inside a scrolling body.
+
 #### Draggable modals
 
 `draggable` modals allow the user to move the modal around the canvas and do not apply an overlay to the rest of the canvas allowing users to keep interacting with it while the modal is open. Use these when the function of the modal is critically connected to the content of the page. For example, creating or editing a shift on the schedule, where the user may need to reference information on the schedule while creating their new shift.
@@ -60,6 +75,7 @@ Note that the close `button` and icons in the icon bar have a distinct transpare
 
 ## Additional Rules
 
+-   When using `tabList`, wrap the entire `Modal` in a `Tabs` component (where `defaultValue` or `value` lives), pass a `TabList` to the `tabList` prop, and place `TabPanel` components inside `ModalBody`. Set a fixed `height` on the modal — it won't automatically resize when switching tabs, so a fixed height prevents layout shifts.
 -   `Modal` requires `Modal.setAppElement('#root')` (or equivalent) to be called once in the app, or `rootElementId` to be passed per instance, for correct accessibility behaviour.
 -   `ModalBody` and `ModalFooter` are required sub-components — do not render content directly as children of `Modal` without them.
 -   Use `loading={true}` during async operations to disable the close button and prevent users from interrupting a save or delete in progress.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@7shifts/sous-chef",
-    "version": "4.13.0",
+    "version": "4.14.0",
     "description": "7shifts component library",
     "author": "7shifts",
     "license": "MIT",

package/dist/media/Avatar/AvatarContext.d.ts

@@ -1,6 +0,0 @@
-type AvatarContextType = {
-    size: 'small' | 'medium' | 'large' | 'extra-large' | null;
-};
-declare const AvatarContext: import("react").Context<AvatarContextType>;
-export declare const useAvatarContext: () => AvatarContextType;
-export default AvatarContext;