github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 01:13:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Lens] Cleanup SASS and add linting (#46100) (#46380)

Browse source
This commit is contained in:
Caroline Horn 2019-09-23 17:32:08 -04:00 • committed by GitHub
parent 817877dc8b
commit b4eba153fe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
48 changed files with 370 additions and 381 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.sass-lint.yml
View file

@ -7,6 +7,7 @@ files:
- 'x-pack/legacy/plugins/rollup/**/*.s+(a|c)ss'
- 'x-pack/legacy/plugins/security/**/*.s+(a|c)ss'
- 'x-pack/legacy/plugins/canvas/**/*.s+(a|c)ss'
- 'x-pack/legacy/plugins/lens/**/*.s+(a|c)ss'
rules:
quotes:
- 2

1
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/_xy_config_panel.scss → x-pack/legacy/plugins/lens/public/_config_panel.scss
View file

@ -15,6 +15,7 @@
.lnsConfigPanel__addLayerBtn {
color: transparentize($euiColorMediumShade, .3);
// sass-lint:disable-block no-important
box-shadow: none !important;
border: 1px dashed currentColor;
}

13
x-pack/legacy/plugins/lens/public/_mixins.scss Normal file
View file

@ -0,0 +1,13 @@
// sass-lint:disable-block indentation, no-color-keywords
// SASSTODO: Create this in EUI
@mixin lnsOverflowShadowHorizontal {
$hideHeight: $euiScrollBarCorner * 1.25;
mask-image: linear-gradient(
to right,
transparentize(red, .9) 0%,
transparentize(red, 0) $hideHeight,
transparentize(red, 0) calc(100% - #{$hideHeight}),
transparentize(red, .9) 100%
);
}

5
x-pack/legacy/plugins/lens/public/_variables.scss Normal file
View file

@ -0,0 +1,5 @@
$lnsPanelMinWidth: $euiSize * 18;
// These sizes also match canvas' page thumbnails for consistency
$lnsSuggestionHeight: 100px;
$lnsSuggestionWidth: 150px;

4
x-pack/legacy/plugins/lens/public/app_plugin/index.scss → x-pack/legacy/plugins/lens/public/app_plugin/_app.scss
View file

@ -10,12 +10,12 @@
overflow: hidden;
}
.lnsAppHeader {
.lnsApp__header {
padding: $euiSize;
border-bottom: $euiBorderThin;
}
.lnsAppFrame {
.lnsApp__frame {
position: relative;
display: flex;
flex-direction: column;

1
x-pack/legacy/plugins/lens/public/app_plugin/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './app';

2
x-pack/legacy/plugins/lens/public/app_plugin/app.test.tsx
View file

@ -98,7 +98,7 @@ describe('Lens App', () => {
Array [
Array [
<div
class="lnsAppFrame"
class="lnsApp__frame"
/>,
Object {
"dateRange": Object {

4
x-pack/legacy/plugins/lens/public/app_plugin/app.tsx
View file

@ -156,7 +156,7 @@ export function App({
return (
<I18nProvider>
<div className="lnsApp">
<div className="lnsAppHeader">
<div className="lnsApp__header">
<nav>
<EuiFlexGroup>
<EuiFlexItem grow={false}>
@ -238,7 +238,7 @@ export function App({
{(!state.isLoading || state.persistedDoc) && (
<NativeRenderer
className="lnsAppFrame"
className="lnsApp__frame"
render={editorFrame.mount}
nativeProps={{
dateRange: state.dateRange,

1
x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './visualization';

0
x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/index.scss → x-pack/legacy/plugins/lens/public/datatable_visualization_plugin/_visualization.scss
View file

0
x-pack/legacy/plugins/lens/public/drag_drop/drag_drop.scss → x-pack/legacy/plugins/lens/public/drag_drop/_drag_drop.scss
View file

1
x-pack/legacy/plugins/lens/public/drag_drop/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './drag_drop'

1
x-pack/legacy/plugins/lens/public/editor_frame_plugin/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './editor_frame/index';

13
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_chart_switch.scss Normal file
View file

@ -0,0 +1,13 @@
.lnsChartSwitch__header {
padding: $euiSizeS 0;
> * {
display: flex;
align-items: center;
}
}
.lnsChartSwitch__summaryIcon {
margin-right: $euiSizeS;
transform: translateY(-2px);
}

10
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_data_panel_wrapper.scss Normal file
View file

@ -0,0 +1,10 @@
.lnsDataPanelWrapper {
flex: 1 0 100%;
overflow: hidden;
}
.lnsDataPanelWrapper__switchSource {
position: absolute;
right: $euiSize + $euiSizeXS;
top: $euiSize + $euiSizeXS;
}

11
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_expression_renderer.scss Normal file
View file

@ -0,0 +1,11 @@
.lnsExpressionRenderer {
width: 100%;
height: 100%;
display: flex;
overflow-x: hidden;
padding: $euiSize;
}
.lnsExpressionRenderer > * {
flex: 1;
}

48
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_frame_layout.scss Normal file
View file

@ -0,0 +1,48 @@
.lnsFrameLayout {
padding: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
flex-direction: column;
}
.lnsFrameLayout__pageContent {
display: flex;
overflow: auto;
flex-grow: 1;
}
.lnsFrameLayout__pageBody {
@include euiScrollBar;
min-width: $lnsPanelMinWidth + $euiSizeXL;
overflow: hidden;
// Leave out bottom padding so the suggestions scrollbar stays flush to window edge
// This also means needing to add same amount of margin to page content and suggestion items
padding: $euiSize $euiSize 0;
&:first-child {
padding-left: $euiSize;
}
}
.lnsFrameLayout__sidebar {
margin: 0;
flex: 1 0 18%;
min-width: $lnsPanelMinWidth + $euiSize;
display: flex;
flex-direction: column;
position: relative;
}
.lnsFrameLayout__sidebar--right {
@include euiScrollBar;
min-width: $lnsPanelMinWidth + $euiSize;
overflow-x: hidden;
overflow-y: auto;
padding-top: $euiSize;
padding-right: $euiSize;
max-height: 100%;
}

27
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.scss → x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_suggestion_panel.scss
View file

@ -1,19 +1,8 @@
// SASSTODO: Create this in EUI
@mixin lnsOverflowShadowHorizontal {
$hideHeight: $euiScrollBarCorner * 1.25;
mask-image: linear-gradient(to right,
transparentize(red, .9) 0%,
transparentize(red, 0) $hideHeight,
transparentize(red, 0) calc(100% - #{$hideHeight}),
transparentize(red, .9) 100%
);
}
.lnsSuggestionsPanel__title {
.lnsSuggestionPanel__title {
margin-left: $euiSizeXS / 2;
}
.lnsSuggestionsPanel__suggestions {
.lnsSuggestionPanel__suggestions {
@include euiScrollBar;
@include lnsOverflowShadowHorizontal;
padding-top: $euiSizeXS;
@ -26,13 +15,9 @@
margin-left: -$euiSizeXS;
}
// These sizes also match canvas' page thumbnails for consistency
$lnsSuggestionHeight: 100px;
$lnsSuggestionWidth: 150px;
.lnsSuggestionPanel__button {
flex: 0 0 auto;
width: $lnsSuggestionWidth !important;
width: $lnsSuggestionWidth !important; // sass-lint:disable-line no-important
height: $lnsSuggestionHeight;
margin-right: $euiSizeS;
margin-left: $euiSizeXS / 2;
@ -43,7 +28,7 @@ $lnsSuggestionWidth: 150px;
@include euiFocusRing;
}
.lnsSidebar__suggestionIcon {
.lnsSuggestionPanel__suggestionIcon {
color: $euiColorDarkShade;
width: 100%;
height: 100%;
@ -53,13 +38,13 @@ $lnsSuggestionWidth: 150px;
padding: $euiSizeS;
}
.lnsSuggestionChartWrapper {
.lnsSuggestionPanel__chartWrapper {
height: $lnsSuggestionHeight - $euiSize;
pointer-events: none;
margin: 0 $euiSizeS;
}
.lnsSuggestionChartWrapper--withLabel {
.lnsSuggestionPanel__chartWrapper--withLabel {
height: $lnsSuggestionHeight - $euiSizeL;
}

40
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_workspace_panel_wrapper.scss Normal file
View file

@ -0,0 +1,40 @@
.lnsWorkspacePanelWrapper {
@include euiScrollBar;
overflow: hidden;
// Override panel size padding
padding: 0 !important; // sass-lint:disable-line no-important
margin-bottom: $euiSize;
display: flex;
flex-direction: column;
.lnsWorkspacePanelWrapper__pageContentHeader {
padding: $euiSizeS;
border-bottom: $euiBorderThin;
margin-bottom: 0;
}
.lnsWorkspacePanelWrapper__pageContentBody {
@include euiScrollBar;
flex-grow: 1;
display: flex;
align-items: stretch;
justify-content: stretch;
overflow: auto;
> * {
flex: 1 1 100%;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
}
}
}
.lnsWorkspacePanelWrapper__titleInput {
@include euiTitle('xs');
width: 100%;
max-width: none;
background: transparent;
box-shadow: none;
}

9
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/chart_switch.tsx
View file

@ -176,8 +176,9 @@ export function ChartSwitch(props: Props) {
<EuiPopover
id="lnsChartSwitchPopover"
ownFocus
initialFocus=".lnsChartSwitchPopoverPanel"
panelClassName="lnsChartSwitchPopoverPanel"
initialFocus=".lnsChartSwitch__popoverPanel"
panelClassName="lnsChartSwitch__popoverPanel"
panelPaddingSize="s"
button={
<EuiButtonEmpty
size="xs"
@ -224,7 +225,7 @@ export function ChartSwitch(props: Props) {
}
betaBadgeIconType={v.selection.dataLoss !== 'nothing' ? 'alert' : undefined}
>
<EuiIcon type={v.icon || 'empty'} />
<EuiIcon type={v.icon || 'empty'} size="l" />
</EuiKeyPadMenuItemButton>
))}
</EuiKeyPadMenu>
@ -232,7 +233,7 @@ export function ChartSwitch(props: Props) {
);
return (
<div className="lnsSidebar__header">
<div className="lnsChartSwitch__header">
<EuiTitle size="xs">
<h3>
<VisualizationSummary {...props} /> {popover}

4
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/data_panel_wrapper.tsx
View file

@ -54,7 +54,7 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
{Object.keys(props.datasourceMap).length > 1 && (
<EuiPopover
id="datasource-switch"
className="lnsDatasourceSwitch"
className="lnsDataPanelWrapper__switchSource"
button={
<EuiButtonIcon
aria-label={i18n.translate('xpack.lens.dataPanelWrapper.switchDatasource', {
@ -98,7 +98,7 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
)}
{props.activeDatasource && !props.datasourceIsLoading && (
<NativeRenderer
className="lnsSidebarContainer"
className="lnsDataPanelWrapper"
render={props.datasourceMap[props.activeDatasource].renderDataPanel}
nativeProps={datasourceProps}
/>

10
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/frame_layout.tsx
View file

@ -18,14 +18,14 @@ export interface FrameLayoutProps {
export function FrameLayout(props: FrameLayoutProps) {
return (
<RootDragDropProvider>
<EuiPage className="lnsPage">
<div className="lnsPageMainContent">
<EuiPageSideBar className="lnsSidebar">{props.dataPanel}</EuiPageSideBar>
<EuiPageBody className="lnsPageBody" restrictWidth={false}>
<EuiPage className="lnsFrameLayout">
<div className="lnsFrameLayout__pageContent">
<EuiPageSideBar className="lnsFrameLayout__sidebar">{props.dataPanel}</EuiPageSideBar>
<EuiPageBody className="lnsFrameLayout__pageBody" restrictWidth={false}>
{props.workspacePanel}
{props.suggestionsPanel}
</EuiPageBody>
<EuiPageSideBar className="lnsSidebar lnsSidebar--right">
<EuiPageSideBar className="lnsFrameLayout__sidebar lnsFrameLayout__sidebar--right">
{props.configPanel}
</EuiPageSideBar>
</div>

142
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/index.scss
View file

@ -1,137 +1,7 @@
$lnsPanelMinWidth: $euiSize * 18;
@import './chart_switch';
@import './data_panel_wrapper';
@import './expression_renderer';
@import './frame_layout';
@import './suggestion_panel';
@import './workspace_panel_wrapper';
.lnsPage {
padding: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
flex-direction: column;
}
.lnsHeader {
padding: $euiSize;
padding-bottom: 0;
}
.lnsPageMainContent {
display: flex;
overflow: auto;
flex-grow: 1;
}
.lnsSidebar {
margin: 0;
flex: 1 0 18%;
min-width: $lnsPanelMinWidth + $euiSize;
display: flex;
flex-direction: column;
position: relative;
}
.lnsSidebar__header {
padding: $euiSizeS 0;
> * {
display: flex;
align-items: center;
}
}
.lnsChartSwitch__summaryIcon {
margin-right: $euiSizeS;
transform: translateY(-2px);
}
.lnsSidebar--right {
@include euiScrollBar;
min-width: $lnsPanelMinWidth + $euiSize;
overflow-x: hidden;
overflow-y: auto;
padding-top: $euiSize;
padding-right: $euiSize;
max-height: 100%;
}
.lnsSidebarContainer {
flex: 1 0 100%;
overflow: hidden;
}
.lnsDatasourceSwitch {
position: absolute;
right: $euiSize + $euiSizeXS;
top: $euiSize + $euiSizeXS;
}
.lnsPageBody {
@include euiScrollBar;
min-width: $lnsPanelMinWidth + $euiSizeXL;
overflow: hidden;
// Leave out bottom padding so the suggestions scrollbar stays flush to window edge
// This also means needing to add same amount of margin to page content and suggestion items
padding: $euiSize $euiSize 0;
&:first-child {
padding-left: $euiSize;
}
.lnsPageContent {
@include euiScrollBar;
overflow: hidden;
padding: 0;
margin-bottom: $euiSize;
display: flex;
flex-direction: column;
.lnsPageContentHeader {
padding: $euiSizeS;
border-bottom: $euiBorderThin;
margin-bottom: 0;
}
.lnsPageContentBody {
@include euiScrollBar;
flex-grow: 1;
display: flex;
align-items: stretch;
justify-content: stretch;
overflow: auto;
> * {
flex: 1 1 100%;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
}
}
}
}
.lnsExpressionOutput {
width: 100%;
height: 100%;
display: flex;
overflow-x: hidden;
padding: $euiSize;
}
.lnsExpressionOutput > * {
flex: 1;
}
.lnsTitleInput {
width: 100%;
min-width: 100%;
border: 0;
font: inherit;
background: transparent;
box-shadow: none;
font-size: 1.2em;
}
@import './suggestion_panel.scss';

14
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/suggestion_panel.tsx
View file

@ -86,7 +86,7 @@ const SuggestionPreview = ({
onClick={onSelect}
>
{expressionError ? (
<div className="lnsSidebar__suggestionIcon">
<div className="lnsSuggestionPanel__suggestionIcon">
<EuiIconTip
size="xl"
color="danger"
@ -101,8 +101,8 @@ const SuggestionPreview = ({
</div>
) : preview.expression ? (
<ExpressionRendererComponent
className={classNames('lnsSuggestionChartWrapper', {
'lnsSuggestionChartWrapper--withLabel': showTitleAsLabel,
className={classNames('lnsSuggestionPanel__chartWrapper', {
'lnsSuggestionPanel__chartWrapper--withLabel': showTitleAsLabel,
})}
expression={preview.expression}
onRenderFailure={(e: unknown) => {
@ -112,7 +112,7 @@ const SuggestionPreview = ({
}}
/>
) : (
<span className="lnsSidebar__suggestionIcon">
<span className="lnsSuggestionPanel__suggestionIcon">
<EuiIcon size="xxl" type={preview.icon} />
</span>
)}
@ -226,10 +226,10 @@ export function InnerSuggestionPanel({
};
return (
<div className="lnsSuggestionsPanel">
<div className="lnsSuggestionPanel">
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiTitle className="lnsSuggestionsPanel__title" size="xxs">
<EuiTitle className="lnsSuggestionPanel__title" size="xxs">
<h3>
<FormattedMessage
id="xpack.lens.editorFrame.suggestionPanelTitle"
@ -257,7 +257,7 @@ export function InnerSuggestionPanel({
)}
</EuiFlexGroup>
<div className="lnsSuggestionsPanel__suggestions">
<div className="lnsSuggestionPanel__suggestions">
{currentVisualizationId && (
<SuggestionPreview
preview={{

2
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel.tsx
View file

@ -157,7 +157,7 @@ export function InnerWorkspacePanel({
} else {
return (
<ExpressionRendererComponent
className="lnsExpressionOutput"
className="lnsExpressionRenderer"
expression={expression!}
onRenderFailure={(e: unknown) => {
setExpressionError(e);

10
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/workspace_panel_wrapper.tsx
View file

@ -17,11 +17,11 @@ interface Props {
export function WorkspacePanelWrapper({ children, title, dispatch }: Props) {
return (
<EuiPageContent className="lnsPageContent">
<EuiPageContentHeader className="lnsPageContentHeader">
<EuiPageContent className="lnsWorkspacePanelWrapper">
<EuiPageContentHeader className="lnsWorkspacePanelWrapper__pageContentHeader">
<input
type="text"
className="euiFieldText lnsTitleInput"
className="euiFieldText lnsWorkspacePanelWrapper__titleInput"
placeholder={i18n.translate('xpack.lens.chartTitlePlaceholder', {
defaultMessage: 'Title',
})}
@ -33,7 +33,9 @@ export function WorkspacePanelWrapper({ children, title, dispatch }: Props) {
})}
/>
</EuiPageContentHeader>
<EuiPageContentBody className="lnsPageContentBody">{children}</EuiPageContentBody>
<EuiPageContentBody className="lnsWorkspacePanelWrapper__pageContentBody">
{children}
</EuiPageContentBody>
</EuiPageContent>
);
}

2
x-pack/legacy/plugins/lens/public/editor_frame_plugin/embeddable/expression_wrapper.tsx
View file

@ -56,7 +56,7 @@ export function ExpressionWrapper({
</EuiFlexGroup>
) : (
<ExpressionRendererComponent
className="lnsExpressionOutput"
className="lnsExpressionRenderer"
expression={expression}
onRenderFailure={(e: unknown) => {
setExpressionError(e);

16
x-pack/legacy/plugins/lens/public/index.scss
View file

@ -1,10 +1,14 @@
// Import the EUI global scope so we can use EUI constants
@import 'src/legacy/ui/public/styles/_styling_constants';
@import "./app_plugin/index";
@import './xy_visualization_plugin/index';
@import './variables';
@import './mixins';
@import './config_panel';
@import './app_plugin/index';
@import './datatable_visualization_plugin/index';
@import './xy_visualization_plugin/xy_expression.scss';
@import './indexpattern_plugin/indexpattern';
@import './drag_drop/drag_drop.scss';
@import './editor_frame_plugin/editor_frame/index';
@import './drag_drop/index';
@import './editor_frame_plugin/index';
@import './indexpattern_plugin/index';
@import './xy_visualization_plugin/index';

39
x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss Normal file
View file

@ -0,0 +1,39 @@
.lnsInnerIndexPatternDataPanel {
width: 100%;
height: 100%;
padding: $euiSize 0 0 $euiSize;
}
.lnsInnerIndexPatternDataPanel__header {
display: flex;
align-items: center;
height: $euiSize * 3;
margin-top: -$euiSizeS;
& > .lnsInnerIndexPatternDataPanel__changeLink {
flex: 0 0 auto;
margin: 0 $euiSize;
}
}
.lnsInnerIndexPatternDataPanel__filterWrapper {
flex-grow: 0;
}
.lnsInnerIndexPatternDataPanel__listWrapper {
@include euiOverflowShadow;
@include euiScrollBar;
margin-top: 2px; // form control shadow
position: relative;
flex-grow: 1;
overflow: auto;
}
.lnsInnerIndexPatternDataPanel__list {
padding-top: $euiSizeS;
position: absolute;
top: 0;
left: 0;
right: 0;
}

47
x-pack/legacy/plugins/lens/public/indexpattern_plugin/_field_item.scss Normal file
View file

@ -0,0 +1,47 @@
.lnsFieldItem {
@include euiFontSizeS;
background: $euiColorEmptyShade;
border-radius: $euiBorderRadius;
margin-bottom: $euiSizeXS;
transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance;
&:hover {
@include euiBottomShadowMedium;
z-index: 2;
cursor: grab;
}
}
.lnsFieldItem--missing {
background: $euiColorLightestShade;
}
.lnsFieldItem__name {
margin-left: $euiSizeXS;
}
.lnsFieldItem__info {
padding: $euiSizeS;
}
.lnsFieldItem__topValue {
margin-bottom: $euiSizeS;
&:last-of-type {
margin-bottom: 0;
}
}
.lnsFieldItem__topValueProgress {
background-color: $euiColorLightestShade;
// sass-lint:disable-block no-vendor-prefixes
&::-webkit-progress-bar {
background-color: $euiColorLightestShade;
}
}
.lnsFieldItem__fieldPopoverPanel {
min-width: 260px;
max-width: 300px;
}

21
x-pack/legacy/plugins/lens/public/indexpattern_plugin/_field_itm.scss
View file

@ -1,21 +0,0 @@
.lnsFieldItem__topValue {
margin-bottom: $euiSizeS;
&:last-of-type {
margin-bottom: 0;
}
}
.lnsFieldItem__topValueProgress {
background-color: $euiColorLightestShade;
&::-webkit-progress-bar {
background-color: $euiColorLightestShade;
}
}
.lnsFieldItem__fieldPopoverPanel {
min-width: 260px;
max-width: 300px;
}

4
x-pack/legacy/plugins/lens/public/indexpattern_plugin/_index.scss Normal file
View file

@ -0,0 +1,4 @@
@import './datapanel';
@import './field_item';
@import './dimension_panel/index';

16
x-pack/legacy/plugins/lens/public/indexpattern_plugin/datapanel.tsx
View file

@ -177,7 +177,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
return (
<EuiFlexGroup
gutterSize="m"
className="lnsIndexPatternDataPanel"
className="lnsInnerIndexPatternDataPanel"
direction="column"
responsive={false}
>
@ -328,17 +328,17 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
<ChildDragDropProvider {...dragDropContext}>
<EuiFlexGroup
gutterSize="none"
className="lnsIndexPatternDataPanel"
className="lnsInnerIndexPatternDataPanel"
direction="column"
responsive={false}
>
<EuiFlexItem grow={null}>
<div className="lnsIndexPatternDataPanel__header">
<div className="lnsInnerIndexPatternDataPanel__header">
{!showIndexPatternSwitcher ? (
<>
<EuiTitle size="xxs">
<h4
className="lnsIndexPatternDataPanel__header"
className="lnsInnerIndexPatternDataPanel__header"
title={currentIndexPattern.title}
>
{currentIndexPattern.title}{' '}
@ -346,7 +346,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
</EuiTitle>
<EuiButtonEmpty
data-test-subj="indexPattern-switch-link"
className="lnsIndexPatternDataPanel__changeLink"
className="lnsInnerIndexPatternDataPanel__changeLink"
onClick={() => setShowIndexPatternSwitcher(true)}
size="xs"
>
@ -403,7 +403,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
<EuiFlexItem>
<EuiFlexGroup
gutterSize="s"
className="lnsIndexPatternDataPanel__filter-wrapper"
className="lnsInnerIndexPatternDataPanel__filterWrapper"
responsive={false}
>
<EuiFlexItem grow={true}>
@ -516,7 +516,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
</EuiFlexItem>
</EuiFlexGroup>
<div
className="lnsFieldListPanel__list-wrapper"
className="lnsInnerIndexPatternDataPanel__listWrapper"
ref={el => {
if (el && !el.dataset.dynamicScroll) {
el.dataset.dynamicScroll = 'true';
@ -525,7 +525,7 @@ export const InnerIndexPatternDataPanel = function InnerIndexPatternDataPanel({
}}
onScroll={lazyScroll}
>
<div className="lnsFieldListPanel__list">
<div className="lnsInnerIndexPatternDataPanel__list">
{localState.isLoading && <EuiLoadingSpinner />}
{paginatedFields.map(field => {

9
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/_dimension_panel.scss Normal file
View file

@ -0,0 +1,9 @@
.lnsIndexPatternDimensionPanel {
@include euiFontSizeS;
background: $euiColorEmptyShade;
border-radius: $euiBorderRadius;
display: flex;
align-items: center;
margin-top: $euiSizeXS;
padding: $euiSizeS;
}

7
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/_field_select.scss Normal file
View file

@ -0,0 +1,7 @@
.lnFieldSelect__option--incompatible {
color: $euiColorLightShade;
}
.lnFieldSelect__option--nonExistant {
background-color: $euiColorLightestShade;
}

3
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/_index.scss
View file

@ -1,2 +1,3 @@
@import './dimension_panel';
@import './field_select';
@import './popover';
@import './summary';

45
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/_popover.scss
View file

@ -1,34 +1,43 @@
.lnsConfigPanel__summaryPopoverLeft,
.lnsConfigPanel__summaryPopoverRight {
.lnsPopoverEditor {
flex-grow: 1;
line-height: 0;
overflow: hidden;
}
.lnsPopoverEditor__anchor {
max-width: 100%;
display: block;
}
.lnsPopoverEditor__link {
width: 100%;
display: flex;
align-items: center;
}
.lnsPopoverEditor__left,
.lnsPopoverEditor__right {
padding: $euiSizeS;
}
.lnsConfigPanel__summaryPopoverLeft {
.lnsPopoverEditor__left {
padding-top: 0;
background-color: $euiColorLightestShade;
}
.lnsConfigPanel__summaryPopoverRight {
.lnsPopoverEditor__right {
width: $euiSize * 20;
}
.lnsConfigPanel__fieldOption--incompatible {
color: $euiColorLightShade;
}
.lnsConfigPanel__fieldOption--nonExistant {
background-color: $euiColorLightestShade;
}
.lnsConfigPanel__operation {
.lnsPopoverEditor__operation {
padding: $euiSizeXS;
font-size: 0.875rem;
font-size: .875rem;
}
.lnsConfigPanel__operation--selected {
.lnsPopoverEditor__operation--selected {
background-color: $euiColorLightShade;
}
.lnsConfigPanel__operation--incompatible {
opacity: 0.7;
}
.lnsPopoverEditor__operation--incompatible {
opacity: .7;
}

34
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/_summary.scss
View file

@ -1,34 +0,0 @@
.lnsConfigPanel__summary {
@include euiFontSizeS;
background: $euiColorEmptyShade;
border-radius: $euiBorderRadius;
display: flex;
align-items: center;
margin-top: $euiSizeXS;
padding: $euiSizeS;
}
.lnsConfigPanel__summaryPopover {
flex-grow: 1;
line-height: 0;
overflow: hidden;
}
.lnsConfigPanel__summaryPopoverAnchor {
max-width: 100%;
display: block;
}
.lnsConfigPanel__summaryIcon {
margin-right: $euiSizeXS;
}
.lnsConfigPanel__summaryLink {
width: 100%;
display: flex;
align-items: center;
}
.lnsConfigPanel__summaryField {
color: $euiColorPrimary;
}

2
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.tsx
View file

@ -106,7 +106,7 @@ export const IndexPatternDimensionPanel = memo(function IndexPatternDimensionPan
return (
<ChildDragDropProvider {...props.dragDropContext}>
<DragDrop
className="lnsConfigPanel__summary"
className="lnsIndexPatternDimensionPanel"
data-test-subj="indexPattern-dropTarget"
droppable={canHandleDrop()}
onDrop={droppedItem => {

6
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/field_select.tsx
View file

@ -75,7 +75,7 @@ export function FieldSelect({
}),
value: { type: 'document' },
className: classNames({
'lnsConfigPanel__fieldOption--incompatible': !isCurrentOperationApplicableWithoutField,
'lnFieldSelect__option--incompatible': !isCurrentOperationApplicableWithoutField,
}),
'data-test-subj': `lns-documentOption${
isCurrentOperationApplicableWithoutField ? '' : 'Incompatible'
@ -117,8 +117,8 @@ export function FieldSelect({
label,
value,
className: classNames({
'lnsConfigPanel__fieldOption--incompatible': !compatible,
'lnsConfigPanel__fieldOption--nonExistant': !exists,
'lnFieldSelect__option--incompatible': !compatible,
'lnFieldSelect__option--nonExistant': !exists,
}),
'data-test-subj': `lns-fieldOption${compatible ? '' : 'Incompatible'}-${label}`,
})),

18
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx
View file

@ -125,14 +125,14 @@ export function PopoverEditor(props: PopoverEditorProps) {
items: getOperationTypes().map(({ operationType, compatibleWithCurrentField }) => ({
name: operationPanels[operationType].displayName,
id: operationType as string,
className: classNames('lnsConfigPanel__operation', {
'lnsConfigPanel__operation--selected': Boolean(
className: classNames('lnsPopoverEditor__operation', {
'lnsPopoverEditor__operation--selected': Boolean(
incompatibleSelectedOperationType === operationType ||
(!incompatibleSelectedOperationType &&
selectedColumn &&
selectedColumn.operationType === operationType)
),
'lnsConfigPanel__operation--incompatible': !compatibleWithCurrentField,
'lnsPopoverEditor__operation--incompatible': !compatibleWithCurrentField,
}),
'data-test-subj': `lns-indexPatternDimension${
compatibleWithCurrentField ? '' : 'Incompatible'
@ -202,14 +202,12 @@ export function PopoverEditor(props: PopoverEditorProps) {
return (
<EuiPopover
id={columnId}
className="lnsConfigPanel__summaryPopover"
anchorClassName={
selectedColumn ? 'lnsConfigPanel__summaryPopoverAnchor' : 'lnsConfigPanel__summaryLink'
}
className="lnsPopoverEditor"
anchorClassName={selectedColumn ? 'lnsPopoverEditor__anchor' : 'lnsPopoverEditor__link'}
button={
selectedColumn ? (
<EuiLink
className="lnsConfigPanel__summaryLink"
className="lnsPopoverEditor__link"
onClick={() => {
setPopoverOpen(!isPopoverOpen);
}}
@ -316,10 +314,10 @@ export function PopoverEditor(props: PopoverEditorProps) {
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={null} className={classNames('lnsConfigPanel__summaryPopoverLeft')}>
<EuiFlexItem grow={null} className={classNames('lnsPopoverEditor__left')}>
<EuiSideNav items={getSideNavItems()} />
</EuiFlexItem>
<EuiFlexItem grow={true} className="lnsConfigPanel__summaryPopoverRight">
<EuiFlexItem grow={true} className="lnsPopoverEditor__right">
{incompatibleSelectedOperationType && selectedColumn && (
<EuiCallOut
data-test-subj="indexPattern-invalid-operation"

10
x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx
View file

@ -150,13 +150,13 @@ export function FieldItem(props: FieldItemProps) {
value={{ field, indexPatternId: indexPattern.id } as DraggedField}
data-test-subj="lnsFieldListPanelField"
draggable
className={`lnsFieldListPanel__field lnsFieldListPanel__field-btn-${
field.type
} lnsFieldListPanel__field--${exists ? 'exists' : 'missing'}`}
className={`lnsFieldItem lnsFieldItem--${field.type} lnsFieldItem--${
exists ? 'exists' : 'missing'
}`}
>
<EuiKeyboardAccessible>
<div
className="lnsFieldListPanel__fieldInfo"
className="lnsFieldItem__info"
data-test-subj={`lnsFieldListPanelField-${field.name}`}
onClick={() => {
togglePopover();
@ -177,7 +177,7 @@ export function FieldItem(props: FieldItemProps) {
>
<FieldIcon type={field.type as DataType} />
<span className="lnsFieldListPanel__fieldName" title={field.name}>
<span className="lnsFieldItem__name" title={field.name}>
{wrappableHighlightableFieldName}
</span>
</div>

77
x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.scss
View file

@ -1,77 +0,0 @@
@import './field_itm';
@import './dimension_panel/index';
.lnsIndexPatternDataPanel {
width: 100%;
height: 100%;
padding: $euiSize 0 0 $euiSize;
}
.lnsIndexPatternDataPanel__header {
display: flex;
align-items: center;
height: $euiSize * 3;
margin-top: -$euiSizeS;
& > .lnsIndexPatternDataPanel__changeLink {
flex: 0 0 auto;
margin: 0 $euiSize;
}
}
.lnsIndexPatternDataPanel__filter-wrapper {
flex-grow: 0;
}
.lnsIndexPatternDataPanel__header-text {
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
}
.lnsFieldListPanel__list-wrapper {
@include euiOverflowShadow;
@include euiScrollBar;
margin-top: 2px; // form control shadow
position: relative;
flex-grow: 1;
overflow: auto;
}
.lnsFieldListPanel__list {
padding-top: $euiSizeS;
scrollbar-width: thin;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.lnsFieldListPanel__field {
@include euiFontSizeS;
background: $euiColorEmptyShade;
border-radius: $euiBorderRadius;
margin-bottom: $euiSizeXS;
transition: box-shadow $euiAnimSpeedFast $euiAnimSlightResistance;
&:hover {
@include euiBottomShadowMedium;
z-index: 2;
cursor: grab;
}
}
.lnsFieldListPanel__field--missing {
background: $euiColorLightestShade;
}
.lnsFieldListPanel__fieldName {
margin-left: $euiSizeXS;
}
.lnsFieldListPanel__fieldInfo {
padding: $euiSizeS;
font-weight: $euiFontWeightMedium;
}

14
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_expression.test.tsx.snap generated
View file

@ -2,7 +2,7 @@
exports[`xy_expression XYChart component it renders area 1`] = `
<Chart
className="lnsChart"
className="lnsXyExpression__chart"
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
@ -65,7 +65,7 @@ exports[`xy_expression XYChart component it renders area 1`] = `
exports[`xy_expression XYChart component it renders bar 1`] = `
<Chart
className="lnsChart"
className="lnsXyExpression__chart"
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
@ -128,7 +128,7 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
<Chart
className="lnsChart"
className="lnsXyExpression__chart"
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
@ -191,7 +191,7 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
exports[`xy_expression XYChart component it renders line 1`] = `
<Chart
className="lnsChart"
className="lnsXyExpression__chart"
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
@ -254,7 +254,7 @@ exports[`xy_expression XYChart component it renders line 1`] = `
exports[`xy_expression XYChart component it renders stacked area 1`] = `
<Chart
className="lnsChart"
className="lnsXyExpression__chart"
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
@ -321,7 +321,7 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
exports[`xy_expression XYChart component it renders stacked bar 1`] = `
<Chart
className="lnsChart"
className="lnsXyExpression__chart"
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore
@ -388,7 +388,7 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] = `
<Chart
className="lnsChart"
className="lnsXyExpression__chart"
renderer="canvas"
>
<inject-SettingsComponent-with-chartStore

1
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './_xy_expression';

2
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/_xy_expression.scss
View file

@ -1,4 +1,4 @@
.lnsChart {
.lnsXyExpression__chart {
height: 100%;
}

2
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/index.scss
View file

@ -1,2 +0,0 @@
@import "./_xy_config_panel";
@import "./_xy_expression";

2
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx
View file

@ -161,7 +161,7 @@ export function XYChart({
}
return (
<Chart className="lnsChart">
<Chart className="lnsXyExpression__chart">
<Settings
showLegend={legend.isVisible}
legendPosition={legend.position}