@qoretechnologies/reqraft 0.10.65 → 0.10.66-pr.145.g32331ea

package/src/components/form/fields/allowed-values/AllowedValues.tsx

@@ -8,7 +8,7 @@
 // - `ConnectionManagement` per-item actions — dropped (actions omitted).
 // - `Select` → reqraft `SelectFormField` (`items` instead of `defaultItems`,
 //   single-arg `onChange`; `type`/`closeCollectionOnUnMount` not forwarded).
-import { ReqoreCheckbox, ReqoreControlGroup, ReqoreSpan } from '@qoretechnologies/reqore';
+import { ReqoreCheckbox, ReqoreControlGroup } from '@qoretechnologies/reqore';
 import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/Button';
 import { IQorusAllowedValue, TQorusType } from '@qoretechnologies/ts-toolkit';
 import { size as count, isEqual } from 'lodash';
@@ -20,6 +20,7 @@ import {
 } from '../select/SelectCollection';
 import { ISelectFormFieldItem, SelectFormField as Select } from '../select/Select';
 import { useAllowedValueAvailability } from '../../engine/OptionFieldMessages';
+import { ChoiceGroupHeading, useSelectedChoiceIntent } from '../ChoiceGroupHeading';
 import type { IReqraftAllowedValue } from '../Field';
 
 export interface IFieldAllowedValuesProps extends Pick<
@@ -97,13 +98,15 @@ export const FieldAllowedValuesCheckGroup = memo(
      */
     label?: string;
   }) => {
+    const selectedChoiceIntent = useSelectedChoiceIntent();
+
     return (
       <ReqoreControlGroup vertical size={rest.size || 'small'} gapSize='tiny'>
-        <ReqoreSpan effect={{ opacity: 0.6, uppercase: true, weight: 'bold' }} size='tiny'>
+        <ChoiceGroupHeading>
           {label ? `${label}:`
           : multiSelect ? 'Select one or more:'
           : 'Select one:'}
-        </ReqoreSpan>
+        </ChoiceGroupHeading>
         {items?.map((item) => {
           const unavailable = getSelectItemUnavailability(item);
 
@@ -134,7 +137,7 @@ export const FieldAllowedValuesCheckGroup = memo(
                  which keeps the pointer events the tooltip is read through.
                  It does not withhold `onClick` — the handler below does. */
               readOnly={rest.readOnly || !!unavailable}
-              intent={item.value === value ? 'info' : undefined}
+              intent={selectedChoiceIntent(item.value === value)}
               // `isEqual`, and only once there is a value to match. The single
               // -select branch compared JSON.stringify(value) with
               // JSON.stringify(item.value), and JSON.stringify(undefined) is

package/src/components/form/fields/radio-group/RadioGroup.tsx

@@ -1,6 +1,7 @@
 import { ReqoreRadioGroup } from '@qoretechnologies/reqore';
 import { IReqoreRadioGroupProps } from '@qoretechnologies/reqore/dist/components/RadioGroup';
 import { useMemo } from 'react';
+import { useIsCalmForm } from '../../engine/formAppearance';
 
 export interface IRadioGroupFormFieldProps
   extends Omit<IReqoreRadioGroupProps, 'onChange' | 'onSelectClick' | 'selected'> {
@@ -16,20 +17,25 @@ export const RadioGroupFormField = ({
   value,
   ...rest
 }: IRadioGroupFormFieldProps) => {
+  const calm = useIsCalmForm();
   const items: IReqoreRadioGroupProps['items'] = useMemo(
     () =>
       _items.map((item) => ({
         margin: 'right',
-        labelEffect: {
-          spaced: 1,
-          weight: 'bold',
-          uppercase: true,
-          textSize: 'small',
-        },
+        // Calm: an option's name as written — a choice is read, not shouted.
+        labelEffect:
+          calm ?
+            { textSize: 'small' }
+          : {
+              spaced: 1,
+              weight: 'bold',
+              uppercase: true,
+              textSize: 'small',
+            },
         ...item,
         disabled: disabled || item.disabled,
       })),
-    [_items]
+    [_items, calm]
   );
 
   return (

package/src/components/form/index.tsx

@@ -24,6 +24,7 @@ export * from './fields/string/String';
 export * from './fields/template/ExampleValueModal';
 export * from './fields/template/TemplateField';
 export * from './engine/FormEngine';
+export * from './engine/formAppearance';
 export * from './engine/FormFieldsSkeleton';
 export * from './engine/optionActions';
 export * from './engine/rendererTypes';

package/src/components/supportTicket/TicketHeader.tsx

@@ -201,7 +201,8 @@ export const TicketHeader = ({
        and the strip would no longer line up with them. */
     rowPadding='tiny'
     labelWidth={LABEL_WIDTH}
-    uppercaseLabels
+    /* The labels' case is the theme's (`theme.uppercaseLabels`): an app that sets its
+       labels in sentence case gets "Opened by", not "OPENED BY". */
     flat
     transparent
     padded={false}

package/src/components/supportTicket/TicketReplyBox.stories.tsx

@@ -16,6 +16,19 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+/**
+ * The reply is sent with the white primary, never the Qonsole purple: a ticket reply is not a
+ * hand-off to Qonsole (instruction-files decision 002). Read from the drawn button, so a theme
+ * or a default that brings the purple back fails here.
+ */
+const expectWhiteSend = async (canvasElement: HTMLElement) => {
+  const send = within(canvasElement).getByText('Send reply').closest('button')!;
+  await waitFor(() => {
+    const [r, g, b] = getComputedStyle(send).backgroundColor.match(/\d+/g)!.map(Number);
+    expect(Math.min(r, g, b)).toBeGreaterThan(200);
+  });
+};
+
 /**
  * The customer composer, plain-editor variant (used here for a deterministic
  * type→send test): an attach button (no extra menu → a plain button, not a
@@ -27,7 +40,7 @@ export const Default: Story = {
     docs: {
       description: {
         story:
-          "Renders the customer composer's plain-editor variant — an attach button and Send, no internal-note toggle; typing a reply enables Send, which calls onSend with the body and internal: false.",
+          "Renders the customer composer's plain-editor variant — an attach button and Send, no internal-note toggle; typing a reply enables Send — the white primary, not the Qonsole purple — which calls onSend with the body and internal: false.",
       },
     },
   },
@@ -39,6 +52,7 @@ export const Default: Story = {
     await expect(canvas.queryByText('Internal note')).not.toBeInTheDocument();
 
     await userEvent.type(textarea!, 'Here is my reply');
+    await expectWhiteSend(canvasElement);
     await userEvent.click(canvas.getByText('Send reply'));
     await waitFor(() =>
       expect(args.onSend).toHaveBeenCalledWith(
@@ -59,7 +73,7 @@ export const StaffWithInternalNote: Story = {
     docs: {
       description: {
         story:
-          "Renders the staff composer with a split send button — the primary action posts a public reply, while the caret opens 'Add internal note', which sends with internal: true.",
+          "Renders the staff composer with a split send button — the primary action (white, not the Qonsole purple) posts a public reply, while the caret opens 'Add internal note', which sends with internal: true.",
       },
     },
   },
@@ -72,6 +86,7 @@ export const StaffWithInternalNote: Story = {
 
     const textarea = canvasElement.querySelector('textarea');
     await userEvent.type(textarea!, 'internal context');
+    await expectWhiteSend(canvasElement);
 
     // "Add internal note" lives behind the split-send caret
     const caret = canvasElement.querySelector('.ticket-send-more');

package/src/components/supportTicket/TicketReplyBox.tsx

@@ -1,9 +1,29 @@
 import type { TReqoreDropdownItems } from '@qoretechnologies/reqore/dist/components/Dropdown/list';
 import { ReactNode } from 'react';
-import { Composer, IComposerSendAction, TComposerEditor } from '../composer/Composer';
+import {
+  Composer,
+  IComposerProps,
+  IComposerSendAction,
+  TComposerEditor,
+} from '../composer/Composer';
 import { fileToAttachment as defaultFileToAttachment } from './fileToAttachment';
 import { IAttachmentUpload } from './meta';
 
+/**
+ * A ticket reply is not a hand-off to Qonsole, so it does not wear Qonsole's look: no purple
+ * bar, no purple send (instruction-files decision 002 — a purple button means "this hands the
+ * work to Qonsole / AI" and nothing else). The bar keeps the composer's shape with the theme's
+ * own neutral edge (its `main`, a step lighter — how Reqore draws its dividers), and sending
+ * the reply is the surface's one primary action: white.
+ */
+const REPLY_BOX_EFFECT: IComposerProps['effect'] = {
+  gradient: { direction: 'to bottom right', colors: 'main:lighten:3' },
+};
+const REPLY_SEND_STYLE: Pick<IComposerSendAction, 'intent' | 'minimal'> = {
+  intent: 'white',
+  minimal: false,
+};
+
 /**
  * The `items` shape ReqoreDropdown accepts. Named, not derived: `ReqoreDropdown`
  * is a generic component, and `ComponentProps` of a generic resolves to `{}`
@@ -96,16 +116,15 @@ export const TicketReplyBox = ({
         : 'Send reply';
 
   // Staff surface splits the send button; customer surface is a single "Send reply".
-  // Both use the Qonsole-style minimal `custom1` accent (the Composer default); the
-  // internal note stays amber (`warning`) so it can't be mistaken for a public reply.
+  // Both send the reply as the white primary (`REPLY_SEND_STYLE`); the internal note
+  // stays amber (`warning`) so it can't be mistaken for a public reply.
   const sendActions: IComposerSendAction[] | undefined = allowInternalNote
     ? [
         {
           id: 'reply',
           label: labelFor(false),
           icon: 'SendPlane2Line',
-          minimal: true,
-          customTheme: { main: 'custom1' },
+          ...REPLY_SEND_STYLE,
         },
         {
           id: 'internal',
@@ -139,7 +158,10 @@ export const TicketReplyBox = ({
       disabledReason={disabledReason}
       onSend={handleSend}
       sendLabel={labelFor(false)}
+      sendIntent={REPLY_SEND_STYLE.intent}
+      sendMinimal={REPLY_SEND_STYLE.minimal}
       sendActions={sendActions}
+      effect={REPLY_BOX_EFFECT}
       sendMenuClassName='ticket-send-more'
       attachMenuItems={attachMenuItems}
       footerActions={footerActions}