[TextField] Restore pointing device interactivity to prefix and suffix slots

[whizkydee]

WHY are these changes introduced?

Fixes #4256

Consumers sometimes use the prefix and suffix slots of the TextField component to house interactive elements like tooltips that provide helpful context, which #4207 didn't take into account based on a wrong assumption and oversimplification of the usage of slots.

WHAT is this pull request doing?

This is essentially a revert of the initial PR which introduced the regression in the component. We simply get rid of the pointer-events: none property declaration.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {QuestionMarkMinor} from '@shopify/polaris-icons';

import {Page, TextField, Tooltip, Icon} from '../src';

export function Playground() {
  const tooltipMarkup = (
    <Tooltip content="Help content goes here">
      <Icon source={QuestionMarkMinor} color="base" />
    </Tooltip>
  );

  return (
    <Page title="Playground">
      <TextField
        suffix={tooltipMarkup}
        autoComplete="off"
        label="Label"
        onChange={() => {}}
      />
    </Page>
  );
}

Before	After
Screen.Recording.2021-09-20.at.4.36.19.AM.mov	Screen.Recording.2021-09-20.at.4.35.57.AM.mov

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	163.35 KB (0%)
esm	96.08 KB (0%)
esnext	142.98 KB (-0.01% 🔽)
css	34.52 KB (-0.01% 🔽)