Skip to content
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

Fix (styles): Update border color of Search Relevance to be compliant with Dark Mode #315

Merged
merged 7 commits into from
Oct 6, 2023
Merged

Fix (styles): Update border color of Search Relevance to be compliant with Dark Mode #315

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d715233
Update horizontal and vertical rules to comply with
nung22 Oct 6, 2023
27b976d
Update test snapshots
nung22 Oct 6, 2023
ef502cb
Update horizontal and vertical rules to comply with
nung22 Oct 6, 2023
cbb5893
Update test snapshots
nung22 Oct 6, 2023
489da94
Merge branch 'fix/issue-306' of https://github.com/nung22/dashboards-…
nung22 Oct 6, 2023
cebba09
Update class name for border
nung22 Oct 6, 2023
4a35b0b
Update test snapshots
nung22 Oct 6, 2023
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
13 changes: 2 additions & 11 deletions public/components/common/__test__/__snapshots__/header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,13 @@ exports[`Header component Renders header component 1`] = `
<Header>
<EuiPanel
borderRadius="none"
color="transparent"
grow={false}
hasBorder={false}
hasShadow={false}
style={
Object {
"borderBottom": "1px solid #D3DAE6",
}
}
>
<div
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
style={
Object {
"borderBottom": "1px solid #D3DAE6",
}
}
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
>
<EuiTitle>
<h1
Expand Down
2 changes: 1 addition & 1 deletion public/components/common/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ export const Header = ({ children }: HeaderProps) => {
<EuiPanel
hasBorder={false}
hasShadow={false}
color="transparent"
grow={false}
borderRadius="none"
style={{ borderBottom: '1px solid #D3DAE6' }}
>
<EuiTitle>
<h1>Compare search results</h1>
Expand Down
13 changes: 2 additions & 11 deletions public/components/query_compare/__test__/__snapshots__/create_index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,13 @@ exports[`Create index component Renders create index component 1`] = `
<Header>
<EuiPanel
borderRadius="none"
color="transparent"
grow={false}
hasBorder={false}
hasShadow={false}
style={
Object {
"borderBottom": "1px solid #D3DAE6",
}
}
>
<div
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
style={
Object {
"borderBottom": "1px solid #D3DAE6",
}
}
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
>
<EuiTitle>
<h1
Expand Down
2 changes: 1 addition & 1 deletion public/components/query_compare/search_result/result_components/result_components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
min-height: 500px;

&:nth-child(1) {
border-right: 1px solid #D3DAE6;
border-right: 1px solid $euiBorderColor;
}
}

22 changes: 6 additions & 16 deletions ...pare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,23 +32,13 @@ exports[`Flyout component Renders flyout component 1`] = `
>
<EuiPanel
borderRadius="none"
className="right-border left-border"
color="transparent"
grow={false}
hasBorder={false}
hasShadow={false}
style={
Object {
"borderBottom": "1px solid #D3DAE6",
}
}
>
<div
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--noBorder euiPanel--flexGrowZero"
style={
Object {
"borderBottom": "1px solid #D3DAE6",
}
}
className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--transparent euiPanel--noShadow euiPanel--flexGrowZero right-border left-border"
>
<EuiFlexGroup>
<div
Expand Down Expand Up @@ -372,7 +362,7 @@ exports[`Flyout component Renders flyout component 1`] = `
}
showPrintMargin={false}
tabSize={2}
theme="sql_console"
theme="textmate"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change to textmate should've been merged in, may need a rebase? Or did this come up only from this PR?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think it needs a rebase. Thanks for catching that, I'll look into it!

value="{}"
width="100%"
>
Expand Down Expand Up @@ -474,7 +464,7 @@ exports[`Flyout component Renders flyout component 1`] = `
showPrintMargin={false}
style={Object {}}
tabSize={2}
theme="sql_console"
theme="textmate"
value="{}"
width="100%"
wrapEnabled={false}
Expand Down Expand Up @@ -836,7 +826,7 @@ exports[`Flyout component Renders flyout component 1`] = `
}
showPrintMargin={false}
tabSize={2}
theme="sql_console"
theme="textmate"
value="{}"
width="100%"
>
Expand Down Expand Up @@ -938,7 +928,7 @@ exports[`Flyout component Renders flyout component 1`] = `
showPrintMargin={false}
style={Object {}}
tabSize={2}
theme="sql_console"
theme="textmate"
value="{}"
width="100%"
wrapEnabled={false}
Expand Down
11 changes: 9 additions & 2 deletions ...mponents/query_compare/search_result/search_components/search_configs/search_configs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@
.search-relevance-config:nth-child(1) {
margin: 0;
padding: 12px;
border-right: 1px solid #D3DAE6;
border-right: 1px solid $euiBorderColor;
}


.right-border {
border-right: 0;
}

.left-border {
border-left: 0;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could this be in a single class?

Copy link
Contributor Author

@nung22 nung22 Oct 6, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I was actually thinking about putting them in one called "left-right-borders" but wasn't sure if there was a specific naming convention I needed to follow? If that works, I'll make the change.

}
3 changes: 1 addition & 2 deletions ...omponents/query_compare/search_result/search_components/search_configs/search_configs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,10 @@ export const SearchConfigsPanel = ({
return (
<EuiPanel
hasShadow={false}
hasBorder={false}
color="transparent"
grow={false}
borderRadius="none"
style={{ borderBottom: '1px solid #D3DAE6' }}
className="right-border left-border"
>
<EuiFlexGroup>
<EuiFlexItem className="search-relevance-config">
Expand Down
Loading