fix(input): add margin space0 to fix Safari bug

twilio-labs · May 11, 2021 · 8052976 · 8052976
1 parent 62e1f28
commit 8052976
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 0 deletions.
diff --git a/.changeset/fuzzy-planets-know.md b/.changeset/fuzzy-planets-know.md
@@ -0,0 +1,8 @@
+---
+'@twilio-paste/button': patch
+'@twilio-paste/input': patch
+'@twilio-paste/select': patch
+'@twilio-paste/core': patch
+---
+
+Added a margin reset (`margin: space0`) to fix a bug in Safari where a 2px margin is added by the browser.
diff --git a/packages/paste-core/components/input/__tests__/__snapshots__/input.test.tsx.snap b/packages/paste-core/components/input/__tests__/__snapshots__/input.test.tsx.snap
@@ -50,6 +50,7 @@ exports[`Input render should render 1`] = `
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.25rem;
+  margin: 0;
   outline: none;
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
@@ -147,6 +148,7 @@ exports[`Input render should render with disabled 1`] = `
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.25rem;
+  margin: 0;
   outline: none;
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
@@ -270,6 +272,7 @@ exports[`Input render should render with hasError 1`] = `
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.25rem;
+  margin: 0;
   outline: none;
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
@@ -418,6 +421,7 @@ exports[`Input render should render with prefix 1`] = `
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.25rem;
+  margin: 0;
   outline: none;
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
@@ -540,6 +544,7 @@ exports[`Input render should render with readOnly 1`] = `
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.25rem;
+  margin: 0;
   outline: none;
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
@@ -689,6 +694,7 @@ exports[`Input render should render with suffix 1`] = `
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.25rem;
+  margin: 0;
   outline: none;
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;

diff --git a/packages/paste-core/components/input/__tests__/input.test.tsx b/packages/paste-core/components/input/__tests__/input.test.tsx
@@ -158,6 +158,10 @@ describe('Input inner input props', () => {
   it('should set placeholder correctly', () => {
     expect(InnerInput.getAttribute('placeholder')).toEqual(initialProps.placeholder);
   });
+
+  it('should render with margin: space0', () => {
+    expect(InnerInput).toHaveStyleRule('margin', 'space0');
+  });
 });
 
 describe('Input insertBefore prop', () => {

diff --git a/packages/paste-core/components/input/src/Input.tsx b/packages/paste-core/components/input/src/Input.tsx
@@ -47,6 +47,7 @@ export const InputElement = styled.input<InputProps>((props) =>
     fontSize: 'fontSize30',
     fontWeight: 'fontWeightMedium',
     lineHeight: 'lineHeight20',
+    margin: 'space0',
     outline: 'none',
     paddingBottom: 'space30',
     paddingLeft: 'space40',