Skip to content

Commit

Permalink
fix(button): set position: relative to contain the feedbackinteraction
Browse files Browse the repository at this point in the history
  • Loading branch information
aVileBroker committed Aug 26, 2020
1 parent a63a67b commit c81f008
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/hs-react-ui/src/components/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export const ButtonContainer: string & StyledComponentBase<any, {}, ButtonContai
return `
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down
10 changes: 10 additions & 0 deletions packages/hs-react-ui/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ exports[`Button keeps the container the same when switching between isLoading an
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -87,6 +88,7 @@ exports[`Button keeps the container the same when switching between isLoading an
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -151,6 +153,7 @@ exports[`Button shows ButtonContainer ButtonVariant.fill 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -216,6 +219,7 @@ exports[`Button shows ButtonContainer ButtonVariant.outline 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -281,6 +285,7 @@ exports[`Button shows ButtonContainer ButtonVariant.text 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -346,6 +351,7 @@ exports[`Button shows ButtonContainer with nondefault props variant and color 1`
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -413,6 +419,7 @@ exports[`Button shows LeftIconContainer when isProcessing 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -509,6 +516,7 @@ exports[`Button shows icons 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -610,6 +618,7 @@ exports[`Button shows icons with type string 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -713,6 +722,7 @@ exports[`Button shows loading text when provided 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down
13 changes: 13 additions & 0 deletions packages/hs-react-ui/src/components/Dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ exports[`Dropdown can focus dropdown and select option 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -186,6 +187,7 @@ exports[`Dropdown closes options when clicking outside 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -421,6 +423,7 @@ exports[`Dropdown closes options when clicking outside 2`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -572,6 +575,7 @@ exports[`Dropdown deselects option when clicking on them twice when dropdown is
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -724,6 +728,7 @@ exports[`Dropdown displays all options when focused 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -959,6 +964,7 @@ exports[`Dropdown displays placeholder value on initial render 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -1113,6 +1119,7 @@ exports[`Dropdown does not display options on initial render 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -1265,6 +1272,7 @@ exports[`Dropdown renders a value when given a matching option id through props
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -1440,6 +1448,7 @@ exports[`Dropdown renders no value when given a value that doesn't match any opt
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -1581,6 +1590,7 @@ exports[`Dropdown renders one value when given two values but only one matches a
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -1756,6 +1766,7 @@ exports[`Dropdown renders two values when given matching option ids through prop
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -1939,6 +1950,7 @@ exports[`Dropdown renders two values when given matching option ids through prop
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down Expand Up @@ -2122,6 +2134,7 @@ exports[`Dropdown selects options from values prop 1`] = `
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
position: relative;
font-size: 1em;
padding: .75em 1em;
border-radius: 0.25em;
Expand Down

0 comments on commit c81f008

Please sign in to comment.