Fix textfield arabic placeholder clipping (#1450)

Author: snowystinger

packages/@adobe/spectrum-css-temp/components/textfield/index.css

@@ -93,6 +93,7 @@ governing permissions and limitations under the License.
   &.is-placeholder {
     font-weight: var(--spectrum-textfield-placeholder-text-font-weight);
     font-style: var(--spectrum-textfield-placeholder-text-font-style);
+    font-synthesis: none;
     transition: color var(--spectrum-global-animation-duration-100) ease-in-out;
     opacity: 1;
   }
@@ -107,7 +108,10 @@ governing permissions and limitations under the License.
     opacity: 1;
   }
 
-  &:lang(ja), &:lang(zh), &:lang(ko) {
+  /* placeholder gets clipped for synthetic italics, we rely on font-synthesis once
+   * chrome supports it https://bugs.chromium.org/p/chromium/issues/detail?id=509989
+   */
+  &:lang(ja), &:lang(zh), &:lang(ko), &:lang(ar), &:lang(he) {
     &::placeholder,
     &.is-placeholder {
        font-style: normal;

packages/@react-spectrum/textfield/stories/Textfield.stories.js

@@ -120,6 +120,9 @@ storiesOf('TextField', module)
   )
   .add('custom width small, labelPosition: side',
     () => render({icon: <Info />, validationState: 'invalid', width: '30px', labelPosition: 'side'})
+  )
+  .add('placeholder arabic',
+    () => render({placeholder: 'أدخل رقماً'})
   );
 
 function render(props = {}) {