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

[Emotion ] Convert EuiColorStops #6489

Merged
merged 15 commits into from
Dec 21, 2022
Merged

[Emotion ] Convert EuiColorStops #6489

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b57e6c6
Convert to Emotion and improve empty range
elizabetdev Dec 15, 2022
1a7f75e
Added CL
elizabetdev Dec 15, 2022
f019914
Added CL
elizabetdev Dec 15, 2022
a9adb16
Merge remote-tracking branch 'upstream/main' into color-stops-empty-r…
elizabetdev Dec 15, 2022
3748e74
Removing amsterdam styles
elizabetdev Dec 16, 2022
a9ed3b4
Enhanced colors. Added `brighten` color service.
elizabetdev Dec 19, 2022
895e1d3
Converted example to TS
elizabetdev Dec 19, 2022
a68ef05
Fixed popover position
elizabetdev Dec 19, 2022
69d0bef
Fix missing range color
cee-chen Dec 21, 2022
f13b06d
[PR feedback] remove need to pass `isDisabled` as an arg
cee-chen Dec 21, 2022
b1b3a1a
Replace :not selectors with JS logic
cee-chen Dec 21, 2022
3643a9f
[PR feedback] More styles cleanup
cee-chen Dec 21, 2022
28aa89c
Improve popover/drag behavior of color thumbs
cee-chen Dec 21, 2022
1f876f7
changelog
cee-chen Dec 21, 2022
d4cefef
[docs] fix ts-ignore
cee-chen Dec 21, 2022
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
39 changes: 23 additions & 16 deletions ...ocs/src/views/color_picker/color_stops.js → ...cs/src/views/color_picker/color_stops.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState } from 'react';

import {
EuiColorStops,
EuiColorStopsProps,
EuiFormRow,
EuiRange,
EuiFlexGroup,
Expand All @@ -24,7 +25,9 @@ export default () => {
const [value, setValue] = useState(10);
const [isPopoverOpen, setIsPopoverOpen] = useState(false);

const [extendedColorStops, setExtendedColorStops] = useState([
const [extendedColorStops, setExtendedColorStops] = useState<
EuiColorStopsProps['colorStops']
>([
{
stop: 100,
color: '#54B399',
Expand All @@ -39,14 +42,18 @@ export default () => {
},
]);

const handleExtendedChange = (colorStops) => {
const handleExtendedChange = (
colorStops: EuiColorStopsProps['colorStops']
) => {
setExtendedColorStops(colorStops);
};

const [emptyColorStops, setEmptyColorStops] = useState([]);
const [emptyColorStops, setEmptyColorStops] = useState<
EuiColorStopsProps['colorStops']
>([]);

const handleEmptyChange = (colorStops) => {
setEmptyColorStops(colorStops);
const handleEmptyChange: EuiColorStopsProps['onChange'] = (colorStops) => {
setEmptyColorStops(colorStops as EuiColorStopsProps['colorStops']);
};

const onButtonClick = () =>
Expand Down Expand Up @@ -79,26 +86,26 @@ export default () => {
<EuiFormRow label="Standard">
<EuiColorStops
label="Standard"
onChange={setStandardColorStops}
colorStops={standardColorStops}
onChange={setStandardColorStops as EuiColorStopsProps['onChange']}
colorStops={standardColorStops as EuiColorStopsProps['colorStops']}
min={0}
max={100}
/>
</EuiFormRow>
<EuiFormRow label="Random new color">
<EuiColorStops
label="Random new color"
onChange={setRandomColorStops}
colorStops={randomColorStops}
onChange={setRandomColorStops as EuiColorStopsProps['onChange']}
colorStops={randomColorStops as EuiColorStopsProps['colorStops']}
min={0}
max={100}
addColor={addRandomColor}
addColor={addRandomColor as EuiColorStopsProps['addColor']}
/>
</EuiFormRow>
<EuiFormRow label="Extended range">
<EuiColorStops
label="Extended range"
onChange={handleExtendedChange}
onChange={() => handleExtendedChange}
colorStops={extendedColorStops}
min={100}
max={400}
Expand All @@ -107,8 +114,8 @@ export default () => {
<EuiFormRow label="Fixed color segments">
<EuiColorStops
label="Fixed color segments"
onChange={setFixedColorStops}
colorStops={fixedColorStops}
onChange={setFixedColorStops as EuiColorStopsProps['onChange']}
colorStops={fixedColorStops as EuiColorStopsProps['colorStops']}
min={0}
max={100}
stopType="fixed"
Expand All @@ -120,8 +127,8 @@ export default () => {
<EuiFlexItem>
<EuiColorStops
label="Stepped color segments"
onChange={setSteppedColorStops}
colorStops={steppedColorStops}
onChange={setSteppedColorStops as EuiColorStopsProps['onChange']}
colorStops={steppedColorStops as EuiColorStopsProps['colorStops']}
stepNumber={value}
min={0}
max={100}
Expand All @@ -139,7 +146,7 @@ export default () => {
<EuiFormRow label="Number of steps" display="columnCompressed">
<EuiRange
value={value}
onChange={(e) => setValue(parseInt(e.target.value))}
onChange={(e) => setValue(Number(e.currentTarget.value))}
showInput
aria-label="Change the number of steps"
min={2}
Expand Down
1 change: 0 additions & 1 deletion src/components/color_picker/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,5 @@
@import 'color_picker_swatch';
@import 'hue';
@import 'saturation';
@import 'color_stops/index';
@import 'color_palette_picker/index';
@import 'color_palette_display/index';
21 changes: 21 additions & 0 deletions src/components/color_picker/color_picker.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import { UseEuiTheme } from '../../services';
import { mathWithUnits } from '../../global_styling';

export const euiColorPickerVariables = (euiThemeContext: UseEuiTheme) => {
const euiTheme = euiThemeContext.euiTheme;

return {
width: mathWithUnits(
[euiTheme.size.l, euiTheme.size.s],
(x, y) => x * 5 + y * 4
),
};
};
30 changes: 15 additions & 15 deletions src/components/color_picker/color_stops/__snapshots__/color_stop_thumb.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@

exports[`renders EuiColorStopThumb 1`] = `
<div
class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
data-test-subj="test subject string"
style="left:0%"
>
<div
class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
>
<button
aria-disabled="false"
aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
aria-valuemax="24"
aria-valuemin="0"
aria-valuenow="0"
class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
data-test-subj="euiColorStopThumb"
role="slider"
style="background:rgb(255,0,0)"
Expand All @@ -29,20 +29,20 @@ exports[`renders EuiColorStopThumb 1`] = `

exports[`renders disabled EuiColorStopThumb 1`] = `
<div
class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
data-test-subj="test subject string"
style="left:0%"
>
<div
class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
>
<button
aria-disabled="true"
aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
aria-valuemax="24"
aria-valuemin="0"
aria-valuenow="0"
class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
data-test-subj="euiColorStopThumb"
disabled=""
role="slider"
Expand All @@ -57,20 +57,20 @@ exports[`renders disabled EuiColorStopThumb 1`] = `

exports[`renders picker-only EuiColorStopThumb 1`] = `
<div
class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
data-test-subj="test subject string"
style="left:0%"
>
<div
class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
>
<button
aria-disabled="false"
aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
aria-valuemax="24"
aria-valuemin="0"
aria-valuenow="0"
class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
data-test-subj="euiColorStopThumb"
role="slider"
style="background:rgb(255,0,0)"
Expand All @@ -84,20 +84,20 @@ exports[`renders picker-only EuiColorStopThumb 1`] = `

exports[`renders readOnly EuiColorStopThumb 1`] = `
<div
class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
data-test-subj="test subject string"
style="left:0%"
>
<div
class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
>
<button
aria-disabled="false"
aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
aria-valuemax="24"
aria-valuemin="0"
aria-valuenow="0"
class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
data-test-subj="euiColorStopThumb"
role="slider"
style="background:rgb(255,0,0)"
Expand All @@ -111,20 +111,20 @@ exports[`renders readOnly EuiColorStopThumb 1`] = `

exports[`renders swatch-only EuiColorStopThumb 1`] = `
<div
class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover"
class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover"
data-test-subj="test subject string"
style="left:0%"
>
<div
class="euiPopover__anchor euiColorStopPopover__anchor css-16vtueo-render"
class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
>
<button
aria-disabled="false"
aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
aria-valuemax="24"
aria-valuemin="0"
aria-valuenow="0"
class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb"
class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
data-test-subj="euiColorStopThumb"
role="slider"
style="background:rgb(255,0,0)"
Expand Down
Loading