refactor(mv): share the control value weight label

The feature drawer rendered "Control Value" with a weight chip; segment
overrides rendered the same idea as "Segment Control Value - 50%". Same
concept, two treatments, and only one of them a chip.

ControlValueLabel renders it once and both call sites pass it as the
editor's label. It uses the canonical Chip rather than the legacy .chip
class the feature drawer had inline: the legacy one carries a hand-written
.dark block, and a new component should not add a 36th usage of what #6606
is trying to retire.

The story uses it too rather than hand-rolling the markup.

The accessible name still contains "Value", which is what the E2E role
selectors match on.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: talissoncosta

frontend/documentation/components/ValueEditor.stories.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import type { Meta, StoryObj } from 'storybook'
 
 import ValueEditor from 'components/ValueEditor'
+import ControlValueLabel from 'components/mv/ControlValueLabel'
 
 const meta: Meta = {
   parameters: { chromatic: { disableSnapshot: false } },
@@ -87,17 +88,14 @@ export const Disabled: Story = {
 // The multivariate control value carries a weight chip and a tooltip, so it is
 // the widest label this component gets. Label and format buttons share one flex
 // row, so they compress rather than overlap.
-const ControlValueLabel = (
-  <span className='d-inline-flex align-items-center'>
-    Control Value
-    <span className='chip chip--xs ml-2'>100%</span>
-  </span>
+const controlValueLabel = (
+  <ControlValueLabel percentage={100}>Control Value</ControlValueLabel>
 )
 
 export const BadgeLabel: Story = {
   render: () => (
     <Interactive
-      label={ControlValueLabel}
+      label={controlValueLabel}
       labelTooltip='The value served when no variation matches.'
       initialValue='DEFAULT_VALUE'
     />
@@ -108,7 +106,7 @@ export const BadgeLabel: Story = {
 export const BadgeLabelNarrow: Story = {
   render: () => (
     <Interactive
-      label={ControlValueLabel}
+      label={controlValueLabel}
       labelTooltip='The value served when no variation matches.'
       initialValue='DEFAULT_VALUE'
       width={380}

frontend/web/components/SegmentOverrides.js

@@ -9,6 +9,7 @@ import { RestrictToVerticalAxis } from '@dnd-kit/abstract/modifiers'
 import { arrayMove } from '@dnd-kit/helpers'
 import ProjectStore from 'common/stores/project-store'
 import ValueEditor from './ValueEditor'
+import ControlValueLabel from './mv/ControlValueLabel'
 import { VariationOptions } from './mv/VariationOptions'
 import FeatureListStore from 'common/stores/feature-list-store'
 import CreateSegmentModal from './modals/CreateSegment'
@@ -299,7 +300,11 @@ const SegmentOverrideInner = class Override extends React.Component {
           ) : (
             <div className='flex-1 flex-column'>
               <ValueEditor
-                label={`Segment Control Value - ${controlPercent}%`}
+                label={
+                  <ControlValueLabel percentage={controlPercent}>
+                    Segment Control Value
+                  </ControlValueLabel>
+                }
                 value={v.value}
                 disabled={readOnly}
                 onChange={

frontend/web/components/modals/create-feature/tabs/FeatureValueTab.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useEffect, useRef, useState } from 'react'
 import FieldLabel from 'components/base/forms/FieldLabel'
 import ValueEditor from 'components/ValueEditor'
+import ControlValueLabel from 'components/mv/ControlValueLabel'
 import Constants from 'common/constants'
 import { VariationOptions } from 'components/mv/VariationOptions'
 import { AddVariationButton } from 'components/mv/AddVariationButton'
@@ -247,12 +248,9 @@ const FeatureValueTab: FC<FeatureValueTabProps> = ({
     )
   })
   const valueTitle = hasVariations ? (
-    <span className='d-inline-flex align-items-center'>
+    <ControlValueLabel percentage={controlPercentage}>
       Control Value
-      <span className='chip chip--xs ml-2'>
-        {Math.max(0, controlPercentage)}%
-      </span>
-    </span>
+    </ControlValueLabel>
   ) : (
     'Value'
   )

frontend/web/components/mv/ControlValueLabel.tsx

@@ -0,0 +1,25 @@
+import React, { FC, ReactNode } from 'react'
+
+import Chip from 'components/base/Chip'
+
+interface ControlValueLabelProps {
+  children: ReactNode
+  percentage: number
+}
+
+// The control value's share of the variation split, shown beside its label.
+// The feature drawer and segment overrides both need it and had drifted apart:
+// a chip in one, a hyphenated string in the other.
+const ControlValueLabel: FC<ControlValueLabelProps> = ({
+  children,
+  percentage,
+}) => (
+  <span className='d-inline-flex align-items-center gap-2'>
+    {children}
+    <Chip variant='accent' size='xs'>
+      {Math.max(0, percentage)}%
+    </Chip>
+  </span>
+)
+
+export default ControlValueLabel