feat(ui-editable): rework InPlaceEdit and Editable

[ToMESSKa]

INSTUI-4969

ISSUE:

• InPlaceEdit needs to be migrated to the new theming system
• (Editable does not need to be migrated as it has no versioned import, tokens or icons)

TEST PLAN:

• check if the component works the same as before in v1
• check if the components and the examples work in v2 (especially the dark theme)
• check if all necessary the imports are renamed to latest in v2
• check if the test files are removed from the v1
• check if the right imports are used in exports/b.ts and exports/a.ts
• check if the package.json uses the correct versioning
• check if the renamed or removed tokes are documented in the upgrade guide (if there are any)
• check if the index.ts files use withStyle instead of withStyleLegacy
• check if the v2 component uses all the tokens
• check if all the old icons were replace with the new ones in the index.tsx, test and README files

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-04-01 14:53 UTC

[matyasf]

in both InPlaceEdit and Editable the examples have really low contrast with the dark theme:

As I see just the example needs updating, otherwise it looks good!

[ToMESSKa]

Removing this fixed the hard to see text in the dark theme in InPlaceEdit
If you try this code, and click on the editable text , the text will turn red, while the same code will not work in v11_6 because the text color was inherited instead of using the Text component's warning color through the renderEditor prop.

const Example = (props) => {
    const [mode, setMode] = useState(props.mode || 'view')
    const [value, setValue] = useState('This is some text')
    const [inline, setInline] = useState(true)

    // You must provide this to Editable to be
    // notified of mode changes
    const handleChangeMode = (mode) => {
      setMode(mode)
    }

    // You attach an event handler to your edit component
    // to be notified of value changes from user interactions
    const handleChange = (event) => {
      setValue(event.target.value)
    }

    // Renders the view component
    // Be sure to give it the current value
    const renderView = () => (
      <Text
        color={value ? 'primary' : 'secondary'}
        weight={value ? 'normal' : 'light'}
        size="large"
      >
        {value || 'Enter some text'}
      </Text>
    )

    // Renders the edit component.
    // You have to forward the props on, which
    // includes an onBlur property to help manage
    // the mode changes.
    // Be sure to give it the current value
    const renderEdit = ({ onBlur, editorRef }) => (
      <Text
        color="warning"
        size="large"
        as="input"
        type="text"
        value={value}
        onChange={handleChange}
        aria-label="The title"
        onBlur={onBlur}
        elementRef={editorRef}
      />
    )

    // Renders the edit button.
    // Leverage the default implementation provided by InPlaceEdit
    const renderEditButton = (props) => {
      props.label = `Edit title "${value}"`
      return InPlaceEdit.renderDefaultEditButton(props)
    }

    const onChangeLayout = (event) => {
      setInline(event.target.checked)
    }

    return (
      <View as="div">
        <InPlaceEdit
          renderViewer={renderView}
          renderEditor={renderEdit}
          renderEditButton={renderEditButton}
          onChangeMode={handleChangeMode}
          mode={mode}
          value={value}
          inline={inline}
        />
        <View as="div" margin="small 0">
          <Checkbox label="inline" checked={inline} onChange={onChangeLayout} />
        </View>
      </View>
    )
  }

  render(<Example />)

[ToMESSKa]

in both InPlaceEdit and Editable the examples have really low contrast with the dark theme:

As I see just the example needs updating, otherwise it looks good!

@matyasf I fixed both. For the InlineEdit fix, see my comment.

[hajnaldo]

Editable:

1. Is the border around the field a focus ring when it is active?
   If so, it should have the same color as the general focus ring
2. In dark mode, the bg and the text itself is the same as in light mode when the field is active. It should have a dark background and light text (similarly to the text input)

[ToMESSKa]

Editable:

1. Is the border around the field a focus ring when it is active?
   If so, it should have the same color as the general focus ring
2. In dark mode, the bg and the text itself is the same as in light mode when the field is active. It should have a dark background and light text (similarly to the text input)

@hajnaldo I fixed both of these, can you please check them?