Skip to content

fix(ui): Change button border on focus to only change border color #13484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 3, 2019
Merged

fix(ui): Change button border on focus to only change border color #13484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d9dd97f
fix(ui): Change button border on focus to only change border color
billyvg May 31, 2019
869a6e9
update snaps
billyvg May 31, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions src/sentry/static/sentry/app/components/button.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -189,10 +189,9 @@ const getColors = ({priority, disabled, borderless, theme}) => {
&:active {
${colorActive ? 'color: ${colorActive};' : ''};
background: ${backgroundActive};
border: 1px solid
${!borderless && (borderActive || border)
? borderActive || border
: 'transparent'};
border-color: ${!borderless && (borderActive || border)
? borderActive || border
: 'transparent'};
}
`;
};
Expand Down
8 changes: 4 additions & 4 deletions tests/js/spec/components/__snapshots__/confirmDelete.spec.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ exports[`ConfirmDelete renders 1`] = `
<ForwardRef
aria-disabled={false}
aria-label="Cancel"
className="css-1w79b6l-StyledButton-getColors e12ma6z0"
className="css-1i9cddn-StyledButton-getColors e12ma6z0"
disabled={false}
onClick={[Function]}
role="button"
Expand All @@ -272,7 +272,7 @@ exports[`ConfirmDelete renders 1`] = `
<button
aria-disabled={false}
aria-label="Cancel"
className="css-1w79b6l-StyledButton-getColors e12ma6z0"
className="css-1i9cddn-StyledButton-getColors e12ma6z0"
onClick={[Function]}
role="button"
style={
Expand Down Expand Up @@ -319,7 +319,7 @@ exports[`ConfirmDelete renders 1`] = `
aria-disabled={true}
aria-label="Confirm"
autoFocus={true}
className="css-mla83t-StyledButton-getColors e12ma6z0"
className="css-1y2tnyd-StyledButton-getColors e12ma6z0"
data-test-id="confirm-modal"
disabled={true}
href={null}
Expand All @@ -332,7 +332,7 @@ exports[`ConfirmDelete renders 1`] = `
aria-disabled={true}
aria-label="Confirm"
autoFocus={true}
className="css-mla83t-StyledButton-getColors e12ma6z0"
className="css-1y2tnyd-StyledButton-getColors e12ma6z0"
data-test-id="confirm-modal"
href={null}
onClick={[Function]}
Expand Down
32 changes: 16 additions & 16 deletions tests/js/spec/components/__snapshots__/createProject.spec.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1516,7 +1516,7 @@ exports[`CreateProject should deal with incorrect platform name if its provided
<ForwardRef
aria-disabled={false}
borderless={true}
className="css-1ggcm4u-StyledButton-getColors e12ma6z0"
className="css-35eqg2-StyledButton-getColors e12ma6z0"
data-test-id="create-team"
disabled={false}
onClick={[Function]}
Expand All @@ -1525,7 +1525,7 @@ exports[`CreateProject should deal with incorrect platform name if its provided
>
<button
aria-disabled={false}
className="css-1ggcm4u-StyledButton-getColors e12ma6z0"
className="css-35eqg2-StyledButton-getColors e12ma6z0"
data-test-id="create-team"
onClick={[Function]}
role="button"
Expand Down Expand Up @@ -1619,7 +1619,7 @@ exports[`CreateProject should deal with incorrect platform name if its provided
<ForwardRef
aria-disabled={true}
aria-label="Create Project"
className="css-mla83t-StyledButton-getColors e12ma6z0"
className="css-1y2tnyd-StyledButton-getColors e12ma6z0"
data-test-id="create-project"
disabled={true}
href={null}
Expand All @@ -1631,7 +1631,7 @@ exports[`CreateProject should deal with incorrect platform name if its provided
<button
aria-disabled={true}
aria-label="Create Project"
className="css-mla83t-StyledButton-getColors e12ma6z0"
className="css-1y2tnyd-StyledButton-getColors e12ma6z0"
data-test-id="create-project"
href={null}
onClick={[Function]}
Expand Down Expand Up @@ -2118,15 +2118,15 @@ exports[`CreateProject should fill in platform name if its provided by url 1`] =
<ForwardRef
aria-disabled={false}
borderless={true}
className="exv4dm85 css-1ac0eh4-StyledButton-getColors-ClearButton e12ma6z0"
className="exv4dm85 css-1ct4fe4-StyledButton-getColors-ClearButton e12ma6z0"
disabled={false}
onClick={[Function]}
role="button"
size="xsmall"
>
<button
aria-disabled={false}
className="exv4dm85 css-1ac0eh4-StyledButton-getColors-ClearButton e12ma6z0"
className="exv4dm85 css-1ct4fe4-StyledButton-getColors-ClearButton e12ma6z0"
onClick={[Function]}
role="button"
size="xsmall"
Expand Down Expand Up @@ -2497,7 +2497,7 @@ exports[`CreateProject should fill in platform name if its provided by url 1`] =
<ForwardRef
aria-disabled={false}
borderless={true}
className="css-1ggcm4u-StyledButton-getColors e12ma6z0"
className="css-35eqg2-StyledButton-getColors e12ma6z0"
data-test-id="create-team"
disabled={false}
onClick={[Function]}
Expand All @@ -2506,7 +2506,7 @@ exports[`CreateProject should fill in platform name if its provided by url 1`] =
>
<button
aria-disabled={false}
className="css-1ggcm4u-StyledButton-getColors e12ma6z0"
className="css-35eqg2-StyledButton-getColors e12ma6z0"
data-test-id="create-team"
onClick={[Function]}
role="button"
Expand Down Expand Up @@ -2600,7 +2600,7 @@ exports[`CreateProject should fill in platform name if its provided by url 1`] =
<ForwardRef
aria-disabled={true}
aria-label="Create Project"
className="css-mla83t-StyledButton-getColors e12ma6z0"
className="css-1y2tnyd-StyledButton-getColors e12ma6z0"
data-test-id="create-project"
disabled={true}
href={null}
Expand All @@ -2612,7 +2612,7 @@ exports[`CreateProject should fill in platform name if its provided by url 1`] =
<button
aria-disabled={true}
aria-label="Create Project"
className="css-mla83t-StyledButton-getColors e12ma6z0"
className="css-1y2tnyd-StyledButton-getColors e12ma6z0"
data-test-id="create-project"
href={null}
onClick={[Function]}
Expand Down Expand Up @@ -2999,15 +2999,15 @@ exports[`CreateProject should fill in project name if its empty when platform is
<ForwardRef
aria-disabled={false}
borderless={true}
className="exv4dm85 css-1ac0eh4-StyledButton-getColors-ClearButton e12ma6z0"
className="exv4dm85 css-1ct4fe4-StyledButton-getColors-ClearButton e12ma6z0"
disabled={false}
onClick={[Function]}
role="button"
size="xsmall"
>
<button
aria-disabled={false}
className="exv4dm85 css-1ac0eh4-StyledButton-getColors-ClearButton e12ma6z0"
className="exv4dm85 css-1ct4fe4-StyledButton-getColors-ClearButton e12ma6z0"
onClick={[Function]}
role="button"
size="xsmall"
Expand Down Expand Up @@ -4178,7 +4178,7 @@ exports[`CreateProject should fill in project name if its empty when platform is
<ForwardRef
aria-disabled={false}
borderless={true}
className="css-1ggcm4u-StyledButton-getColors e12ma6z0"
className="css-35eqg2-StyledButton-getColors e12ma6z0"
data-test-id="create-team"
disabled={false}
onClick={[Function]}
Expand All @@ -4187,7 +4187,7 @@ exports[`CreateProject should fill in project name if its empty when platform is
>
<button
aria-disabled={false}
className="css-1ggcm4u-StyledButton-getColors e12ma6z0"
className="css-35eqg2-StyledButton-getColors e12ma6z0"
data-test-id="create-team"
onClick={[Function]}
role="button"
Expand Down Expand Up @@ -4281,7 +4281,7 @@ exports[`CreateProject should fill in project name if its empty when platform is
<ForwardRef
aria-disabled={true}
aria-label="Create Project"
className="css-mla83t-StyledButton-getColors e12ma6z0"
className="css-1y2tnyd-StyledButton-getColors e12ma6z0"
data-test-id="create-project"
disabled={true}
href={null}
Expand All @@ -4293,7 +4293,7 @@ exports[`CreateProject should fill in project name if its empty when platform is
<button
aria-disabled={true}
aria-label="Create Project"
className="css-mla83t-StyledButton-getColors e12ma6z0"
className="css-1y2tnyd-StyledButton-getColors e12ma6z0"
data-test-id="create-project"
href={null}
onClick={[Function]}
Expand Down
4 changes: 2 additions & 2 deletions tests/js/spec/components/forms/__snapshots__/formField.spec.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ exports[`FormField + model renders with Form 1`] = `
<ForwardRef
aria-disabled={false}
aria-label="Save Changes"
className="css-15f0jp2-StyledButton-getColors e12ma6z0"
className="css-1qchtmp-StyledButton-getColors e12ma6z0"
data-test-id="form-submit"
disabled={false}
onClick={[Function]}
Expand All @@ -346,7 +346,7 @@ exports[`FormField + model renders with Form 1`] = `
<button
aria-disabled={false}
aria-label="Save Changes"
className="css-15f0jp2-StyledButton-getColors e12ma6z0"
className="css-1qchtmp-StyledButton-getColors e12ma6z0"
data-test-id="form-submit"
onClick={[Function]}
role="button"
Expand Down
8 changes: 4 additions & 4 deletions tests/js/spec/components/modals/__snapshots__/integrationDetailsModal.spec.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -428,7 +428,7 @@ exports[`IntegrationDetailsModal renders simple integration 1`] = `
<ForwardRef
aria-disabled={false}
aria-label="Cancel"
className="css-o6814l-StyledButton-getColors e12ma6z0"
className="css-1uhlusb-StyledButton-getColors e12ma6z0"
data-test-id="cancel-button"
disabled={false}
onClick={[Function]}
Expand All @@ -438,7 +438,7 @@ exports[`IntegrationDetailsModal renders simple integration 1`] = `
<button
aria-disabled={false}
aria-label="Cancel"
className="css-o6814l-StyledButton-getColors e12ma6z0"
className="css-1uhlusb-StyledButton-getColors e12ma6z0"
data-test-id="cancel-button"
onClick={[Function]}
role="button"
Expand Down Expand Up @@ -759,7 +759,7 @@ exports[`IntegrationDetailsModal renders simple integration 1`] = `
<ForwardRef
aria-disabled={false}
aria-label="Add Installation"
className="css-1oc9q3a-StyledButton-getColors e12ma6z0"
className="css-23553w-StyledButton-getColors e12ma6z0"
data-test-id="add-button"
disabled={false}
onClick={[Function]}
Expand All @@ -775,7 +775,7 @@ exports[`IntegrationDetailsModal renders simple integration 1`] = `
<button
aria-disabled={false}
aria-label="Add Installation"
className="css-1oc9q3a-StyledButton-getColors e12ma6z0"
className="css-23553w-StyledButton-getColors e12ma6z0"
data-test-id="add-button"
onClick={[Function]}
role="button"
Expand Down
16 changes: 8 additions & 8 deletions tests/js/spec/components/modals/__snapshots__/sentryAppPermissionsModal.spec.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ exports[`SentryAppPermissionsModal installs the application 1`] = `
<ForwardRef
aria-disabled={false}
aria-label="Install"
className="ey7jt0i0 css-1t90v46-StyledButton-getColors-StyledButton e12ma6z0"
className="ey7jt0i0 css-13hgyx8-StyledButton-getColors-StyledButton e12ma6z0"
disabled={false}
onClick={[Function]}
priority="success"
Expand All @@ -154,7 +154,7 @@ exports[`SentryAppPermissionsModal installs the application 1`] = `
<button
aria-disabled={false}
aria-label="Install"
className="ey7jt0i0 css-1t90v46-StyledButton-getColors-StyledButton e12ma6z0"
className="ey7jt0i0 css-13hgyx8-StyledButton-getColors-StyledButton e12ma6z0"
onClick={[Function]}
role="button"
>
Expand Down Expand Up @@ -197,15 +197,15 @@ exports[`SentryAppPermissionsModal installs the application 1`] = `
<ForwardRef
aria-disabled={false}
aria-label="Cancel"
className="ey7jt0i0 css-1n1eahj-StyledButton-getColors-StyledButton e12ma6z0"
className="ey7jt0i0 css-pssgxf-StyledButton-getColors-StyledButton e12ma6z0"
disabled={false}
onClick={[Function]}
role="button"
>
<button
aria-disabled={false}
aria-label="Cancel"
className="ey7jt0i0 css-1n1eahj-StyledButton-getColors-StyledButton e12ma6z0"
className="ey7jt0i0 css-pssgxf-StyledButton-getColors-StyledButton e12ma6z0"
onClick={[Function]}
role="button"
>
Expand Down Expand Up @@ -374,7 +374,7 @@ exports[`SentryAppPermissionsModal renders permissions modal 1`] = `
<ForwardRef
aria-disabled={false}
aria-label="Install"
className="ey7jt0i0 css-1t90v46-StyledButton-getColors-StyledButton e12ma6z0"
className="ey7jt0i0 css-13hgyx8-StyledButton-getColors-StyledButton e12ma6z0"
disabled={false}
onClick={[Function]}
priority="success"
Expand All @@ -383,7 +383,7 @@ exports[`SentryAppPermissionsModal renders permissions modal 1`] = `
<button
aria-disabled={false}
aria-label="Install"
className="ey7jt0i0 css-1t90v46-StyledButton-getColors-StyledButton e12ma6z0"
className="ey7jt0i0 css-13hgyx8-StyledButton-getColors-StyledButton e12ma6z0"
onClick={[Function]}
role="button"
>
Expand Down Expand Up @@ -426,15 +426,15 @@ exports[`SentryAppPermissionsModal renders permissions modal 1`] = `
<ForwardRef
aria-disabled={false}
aria-label="Cancel"
className="ey7jt0i0 css-1n1eahj-StyledButton-getColors-StyledButton e12ma6z0"
className="ey7jt0i0 css-pssgxf-StyledButton-getColors-StyledButton e12ma6z0"
disabled={false}
onClick={[Function]}
role="button"
>
<button
aria-disabled={false}
aria-label="Cancel"
className="ey7jt0i0 css-1n1eahj-StyledButton-getColors-StyledButton e12ma6z0"
className="ey7jt0i0 css-pssgxf-StyledButton-getColors-StyledButton e12ma6z0"
onClick={[Function]}
role="button"
>
Expand Down
Loading