diff --git a/.changeset/fuzzy-planets-know.md b/.changeset/fuzzy-planets-know.md new file mode 100644 index 0000000000..97ddc3d4f7 --- /dev/null +++ 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 index 83fe29663c..ed20961b32 100644 --- 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 index 8b47fcb081..74e56bba82 100644 --- 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 index a2f178c30f..46a8776ee9 100644 --- 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((props) => fontSize: 'fontSize30', fontWeight: 'fontWeightMedium', lineHeight: 'lineHeight20', + margin: 'space0', outline: 'none', paddingBottom: 'space30', paddingLeft: 'space40',