Skip to content

Commit

Permalink
fix tech preview badge and tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@markov00
markov00 committed Sep 26, 2023
1 parent 411e6af commit 71449a3
Show file tree
Hide file tree
Showing 12 changed files with 233 additions and 111 deletions.
11 changes: 9 additions & 2 deletions ...es/kbn-coloring/src/shared_components/color_mapping/__stories__/color_mapping.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ Default.args = {
{
rule: {
type: 'matchExactly',
values: ['b'],
values: ['b', ['double', 'value']],
},
color: {
type: 'gradient',
Expand All @@ -93,7 +93,14 @@ Default.args = {
{
rule: {
type: 'matchExactly',
values: ['this is', 'a multi-line wrap', 'combo box', 'test combo', '3 lines'],
values: [
'this is',
'a multi-line wrap',
'combo box',
'test combo',
'3 lines',
['double', 'value'],
],
},
color: {
type: 'gradient',
Expand Down
3 changes: 3 additions & 0 deletions ...ges/kbn-coloring/src/shared_components/color_mapping/components/assignment/assignment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export function Assignment({
getPaletteFn,
isDarkMode,
specialTokens,
assignmentValuesCounter,
}: {
data: ColorMappingInputData;
index: number;
Expand All @@ -51,6 +52,7 @@ export function Assignment({
editable: boolean;
isDarkMode: boolean;
specialTokens: Map<string, string>;
assignmentValuesCounter: Map<string | string[], number>;
}) {
const dispatch = useDispatch();

Expand Down Expand Up @@ -96,6 +98,7 @@ export function Assignment({
})
);
}}
assignmentValuesCounter={assignmentValuesCounter}
/>
) : assignment.rule.type === 'range' ? (
<Range
Expand Down
21 changes: 18 additions & 3 deletions packages/kbn-coloring/src/shared_components/color_mapping/components/assignment/match.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@
*/

import React from 'react';
import { EuiComboBox, EuiFlexItem } from '@elastic/eui';
import { EuiComboBox, EuiFlexItem, EuiIcon } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { MULTI_FIELD_KEY_SEPARATOR } from '@kbn/data-plugin/common';
import { euiThemeVars } from '@kbn/ui-theme';
import { ColorMapping } from '../../config';

export const Match: React.FC<{
Expand All @@ -23,17 +24,31 @@ export const Match: React.FC<{
updateValue: (values: Array<string | string[]>) => void;
options: Array<string | string[]>;
specialTokens: Map<unknown, string>;
}> = ({ index, rule, updateValue, editable, options, specialTokens }) => {
assignmentValuesCounter: Map<string | string[], number>;
}> = ({ index, rule, updateValue, editable, options, specialTokens, assignmentValuesCounter }) => {
const selectedOptions =
rule.type === 'auto'
? []
: typeof rule.values === 'string'
? [{ label: rule.values, value: rule.values }]
? [
{
label: rule.values,
value: rule.values,
append:
(assignmentValuesCounter.get(rule.values) ?? 0) > 1 ? (
<EuiIcon size="s" type="warning" color={euiThemeVars.euiColorWarningText} />
) : undefined,
},
]
: rule.values.map((value) => {
const ruleValues = Array.isArray(value) ? value : [value];
return {
label: ruleValues.map((v) => specialTokens.get(v) ?? v).join(MULTI_FIELD_KEY_SEPARATOR),
value,
append:
(assignmentValuesCounter.get(value) ?? 0) > 1 ? (
<EuiIcon size="s" type="warning" color={euiThemeVars.euiColorWarningText} />
) : undefined,
};
});

Expand Down
8 changes: 4 additions & 4 deletions ...coloring/src/shared_components/color_mapping/components/assignment/special_assignment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,12 +65,12 @@ export function SpecialAssignment({
compressed
fullWidth
disabled={true}
placeholder={i18n.translate('coloring.colorMapping.assignments.allOtherPlaceholder', {
defaultMessage: 'All other terms',
placeholder={i18n.translate('coloring.colorMapping.assignments.unassignedPlaceholder', {
defaultMessage: 'Unassigned terms',
})}
aria-label={i18n.translate('coloring.colorMapping.assignments.allOtherAriaLabel', {
aria-label={i18n.translate('coloring.colorMapping.assignments.unassignedAriaLabel', {
defaultMessage:
'Assign this color to all other terms not described in the assignment list',
'Assign this color to every unassigned not described in the assignment list',
})}
/>
</EuiFlexItem>
Expand Down
16 changes: 14 additions & 2 deletions ...kbn-coloring/src/shared_components/color_mapping/components/color_picker/color_swatch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,13 @@ export const ColorSwatch = ({
defaultMessage: 'Pick a color',
})}
data-test-subj={`lns-colorMapping-colorSwatch-${index}`}
onClick={() => dispatch(colorPickerVisibility({ index, visible: true, type: forType }))}
onClick={() =>
dispatch(
colorPickerVisible
? hideColorPickerVisibility()
: colorPickerVisibility({ index, visible: true, type: forType })
)
}
css={css`
background: ${colorHex};
width: 16px;
Expand All @@ -105,7 +111,13 @@ export const ColorSwatch = ({
defaultMessage: 'Pick a color',
})}
data-test-subj={`lns-colorMapping-colorSwatch-${index}`}
onClick={() => dispatch(colorPickerVisibility({ index, visible: true, type: forType }))}
onClick={() =>
dispatch(
colorPickerVisible
? hideColorPickerVisibility()
: colorPickerVisibility({ index, visible: true, type: forType })
)
}
style={{
// the color swatch can't pickup colors written in rgb/css standard
backgroundColor: colorHex,
Expand Down
12 changes: 12 additions & 0 deletions packages/kbn-coloring/src/shared_components/color_mapping/components/container/container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,17 @@ export function Container(props: {

const canAddNewAssignment = !autoAssignmentMode && assignments.length < MAX_ASSIGNABLE_COLORS;

const assignmentValuesCounter = assignments.reduce<Map<string | string[], number>>(
(acc, assignment) => {
const values = assignment.rule.type === 'matchExactly' ? assignment.rule.values : [];
values.forEach((value) => {
acc.set(value, (acc.get(value) ?? 0) + 1);
});
return acc;
},
new Map()
);

return (
<EuiFlexGroup direction="column" gutterSize="s" justifyContent="flexStart">
<EuiFlexItem>
Expand Down Expand Up @@ -160,6 +171,7 @@ export function Container(props: {
assignment={assignment}
disableDelete={assignments.length <= 1 || autoAssignmentMode}
specialTokens={props.specialTokens}
assignmentValuesCounter={assignmentValuesCounter}
/>
</div>
);
Expand Down
180 changes: 93 additions & 87 deletions ...kbn-coloring/src/shared_components/color_mapping/components/palette_selector/gradient.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,27 +81,29 @@ export function Gradient({

return (
<>
<div
className="gradientLine"
css={css`
position: relative;
grid-column: 1;
grid-row: 1;
width: 6px;
margin-left: 5px;
top: 16px;
height: calc(100% - 12px);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background-image: linear-gradient(
to bottom,
${[gradientColorScale(0), gradientColorScale(1 / assignmentsSize)].join(',')}
);
border-left: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
border-top: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
border-right: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
`}
/>
{assignmentsSize > 1 && (
<div
className="gradientLine"
css={css`
position: relative;
grid-column: 1;
grid-row: 1;
width: 6px;
margin-left: 5px;
top: 16px;
height: calc(100% - 12px);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background-image: linear-gradient(
to bottom,
${[gradientColorScale(0), gradientColorScale(1 / assignmentsSize)].join(',')}
);
border-left: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
border-top: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
border-right: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
`}
/>
)}
<div
className="gradientStop"
css={css`
Expand All @@ -125,79 +127,83 @@ export function Gradient({
)}
</div>

<div
className="gradientLine"
css={css`
position: relative;
z-index: 1;
grid-column: 1;
grid-row-start: 2;
grid-row-end: ${assignmentsSize};
background-image: linear-gradient(
to bottom,
${[
gradientColorScale(1 / assignmentsSize),
gradientColorScale((assignmentsSize - 1) / assignmentsSize),
].join(',')}
);
margin: -4px 0;
width: 6px;
margin-left: 5px;
${assignmentsSize === 2 ? 'height: 0;' : ''};
border-left: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
border-right: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
`}
>
{assignmentsSize > 1 && (
<div
className="gradientLine"
css={css`
position: absolute;
width: 16px;
height: 16px;
top: calc(50% - 5px);
margin-left: -6px;
margin-top: -3px;
position: relative;
z-index: 1;
grid-column: 1;
grid-row-start: 2;
grid-row-end: ${assignmentsSize};
background-image: linear-gradient(
to bottom,
${[
gradientColorScale(1 / assignmentsSize),
gradientColorScale((assignmentsSize - 1) / assignmentsSize),
].join(',')}
);
margin: -4px 0;
width: 6px;
margin-left: 5px;
${assignmentsSize === 2 ? 'height: 0;' : ''};
border-left: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
border-right: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
`}
>
{middleMostColorSep ? (
<ColorStop
colorMode={colorMode}
step={middleMostColorSep}
index={middleMostColorStopIndex}
currentPalette={currentPalette}
getPaletteFn={getPaletteFn}
isDarkMode={isDarkMode}
/>
) : colorMode.steps.length === 2 ? (
<AddStop colorMode={colorMode} currentPalette={currentPalette} at={1} />
) : undefined}
<div
css={css`
position: absolute;
width: 16px;
height: 16px;
top: calc(50% - 5px);
margin-left: -6px;
margin-top: -3px;
`}
>
{middleMostColorSep ? (
<ColorStop
colorMode={colorMode}
step={middleMostColorSep}
index={middleMostColorStopIndex}
currentPalette={currentPalette}
getPaletteFn={getPaletteFn}
isDarkMode={isDarkMode}
/>
) : colorMode.steps.length === 2 ? (
<AddStop colorMode={colorMode} currentPalette={currentPalette} at={1} />
) : undefined}
</div>
</div>
</div>
<div
className="gradientLine"
css={css`
position: relative;
)}
{assignmentsSize > 1 && (
<div
className="gradientLine"
css={css`
position: relative;
grid-column: 1;
grid-row: ${assignmentsSize};
background-image: linear-gradient(
to bottom,
grid-column: 1;
grid-row: ${assignmentsSize};
background-image: linear-gradient(
to bottom,
${[
gradientColorScale((assignmentsSize - 1) / assignmentsSize),
gradientColorScale(1),
].join(',')}
);
top: -4px;
height: 24px;
width: 6px;
margin-left: 5px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-left: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
border-bottom: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
border-right: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
`}
/>
${[
gradientColorScale((assignmentsSize - 1) / assignmentsSize),
gradientColorScale(1),
].join(',')}
);
top: -4px;
height: 24px;
width: 6px;
margin-left: 5px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-left: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
border-bottom: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
border-right: 1px solid ${changeAlpha(euiThemeVars.euiColorDarkestShade, 0.2)};
`}
/>
)}

<div
css={css`
Expand Down
Loading

0 comments on commit 71449a3

Please sign in to comment.