[table] feat(EditableCell2): new placeholder prop

[ayxliu19]

Fixes #5083

Changes proposed in this pull request:

Added a placeholder feature that can be inputted to the editableTextProps field in EditableCell2. The placeholder shows the placeholder string if the cell is blank.

Another Design:
Since this approach uses the editableTextProps field, it is awkward calling it outside of the editable text field that is rendered when isEditing is true in

blueprint/packages/table/src/cell/editableCell2.tsx

Line 148 in bf4c8be

if (isEditing) {

A better approach may be to create a new placeholder field in the EditableCell2 class and use that instead of calling the one that is in editableTextProps.

Screenshot

Example:

      <EditableCell2
          value={value == null ? "" : value}
          intent={this.state.sparseCellIntent[dataKey]}
          onCancel={this.cellValidator(rowIndex, columnIndex)}
          onChange={this.cellValidator(rowIndex, columnIndex)}
          onConfirm={this.cellSetter(rowIndex, columnIndex)}
          editableTextProps={{ placeholder: "42" }}
      />

[michael-yx-wu]

This was fixed in #5407. Just merge in develop

[adidahiya]

Hey @ayxliu19, please revert your changes to yarn.lock and merge in develop to this branch. In the future, if you commit code to Blueprint which edits the lockfile, you'll need to remember to change your NPM config to avoid pointing to our internal NPM mirror while working in this repo. I usually do this by running npm config list to find where the registry config is being set, and then editing that file to comment out the registry line. This will reset NPM to use the default registry at https://registry.yarnpkg.com.

[adidahiya]

I think your intuition is right, that the editableTextProps={ placeholder } API feels a bit weird, especially since you've implemented it in a way that the placeholder is rendered even when <EditableText> is not present. It would be better to add a placeholder prop to <EditableCell2>, and mention that this new prop overrides editableTextProps.placeholder in its documentation.

[adidahiya]

we'll need to add dark theme styles as well, using $pt-dark-text-color-muted

[adidahiya]

I don't think you need this variable, especially since it's the same name as another (non-public) variable in core/src/components/forms. You can just reference the $pt-text-color-muted and $pt-dark-text-color-muted variables directly where you need the colors.

[ayxliu19]

Hi @adidahiya . Thank you for the feedback. I have made the changes and recompiled the documentation, but it seems like currently EditableCell2Props are not being displayed in the Blueprint documentation page: https://blueprintjs.com/docs/#table/api.editablecell

Would you like me to incorporate the same changes to EditableCell1 so that the changes are reflected in the documentation?

[adidahiya]

@ayxliu19 good point about EditableCell2 not being shown in the docs -- I will fix that in a separate PR. No need to block on that for now, though.

[adidahiya]

This is good but I think we need to bring back the change to cellContents a few lines above here... <EditableText placeholder={this.props.placeholder}> should be set on L168, as suggested in the documentation of the new prop you just added.

[adidahiya]

I'm adding EditableCell2Props to the docs in this PR: #5449

[adidahiya]

nice, thanks @ayxliu19 👍🏽