Skip to content

Commit

Permalink
Adjusting EuiToken for use as ES field types (#2758)
Browse files Browse the repository at this point in the history 
* Updated token color map to match the order of the color blind vis palette

Slight changes to these colors:
- Neon pink became light pink
- Primary is no longer used but uses the blue from vis palette instead

* Allowing custom `iconType` in token map and correctly add the icon sizing

* Adding more tokens and modifying a few to match Kibana palette

* Undoing map.iconType and changing names of new ones to match icon glyph names

Cleans up Token code
Makes background color more subtle

* [Breaking] Simplifying `EuiTokenMapDisplayOptions`

- Fill now takes ‘light’, ‘dark’, or ‘none’
- No more `hideBorder`, comes with ‘light’ fill

* Add token sized icons for field types

* Update document icon

* Using “behingText” variants and altering a few colors

- Had to create a couple mixins to support changing the tint color from the graphic to behindText variant
- $tokenTypes -> $euiTokenTypes
- Now restricting to only 10 colors
   - removed 12 (hot pink)
   - changed usage of 11 (hot green) to 00 (vis green)
- Added $euiPaletteColorBlindKeys for finding if key exists in map

* Removed the naming scheme `tokenTint` in favor of simply using the same names for the vis palette (euiColorVis)

Plus on extra called “gray” that gets appended via SASS map-merge

* Removed `displayOptions` in favor of using them directly

- Allowing passing of a custom color value (but only works with none or dark fill)

* Using tokens in EuiDataGrid

* Update docs comments

* Render span and no fill text is graphic color

* Cleanup

* Fixed sizing of xs Token and TreeView usage

* Addressing a few PR comments & fixing snaps

* Remove `style` from type declaration

* Adding comment
  • Loading branch information
@cchaos
cchaos authored Feb 5, 2020
1 parent 93c34b2 commit 76d4435
Show file tree
Hide file tree
Showing 35 changed files with 1,465 additions and 401 deletions.
6 changes: 3 additions & 3 deletions src-docs/src/views/datagrid/datagrid_example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const gridSnippet = `
rowCount={200}
// Required. Sets up three columns, the last of which has a custom schema we later define down below.
// The second column B won't allow clicking in to see the content in a popup.
// The first column defines an starting width of 150px and prevents the user from resizing it
// The first column defines a starting width of 150px and prevents the user from resizing it
columns={[{ id: 'A', initialWidth: 150, isResizable: false }, { id: 'B', isExpandable: false }, {id: 'C', schema: 'franchise'}]}
// Optional. This allows you to initially hide columns. Users can still turn them on.
columnVisibility={{
Expand Down Expand Up @@ -105,9 +105,9 @@ const gridSnippet = `
sortTextAsc: 'Star Wars-Star Trek',
// Text for what the DESC sort does.
sortTextDesc: 'Star Trek-Star Wars',
// EuiIcon to signify this schema.
// EuiIcon or Token to signify this schema.
icon: 'star',
// The color to use for the icon.
// The color to use for the icon token.
color: '#000000',
},
]}
Expand Down
35 changes: 10 additions & 25 deletions src-docs/src/views/icon/icon_example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,16 @@ const tokensSource = require('!!raw-loader!./tokens');
const tokensSnippet = [
'<EuiToken type="tokenAnnotation" />',
`<EuiToken
iconType="visMapCoordinate"
displayOptions={{
color: 'tokenTint05',
shape: 'circle',
}}
iconType="tokenElement"
color="euiColorVis07"
shape="circle"
/>`,
`<EuiToken
iconType="tokenElement"
iconType="visMapCoordinate"
size="l"
displayOptions={{
color: 'tokenTint07',
shape: 'rectangle',
hideBorder: true
}}
color="#FF0000"
shape="rectangle"
fill="dark"
/>`,
];

Expand Down Expand Up @@ -210,23 +206,12 @@ export const IconExample = {
text: (
<div>
<p>
Tokens are most commonly used in search to help visually classify
results. The tokens included in EUI can be used to identify a number
of code-based search results.
</p>

<p>
An <EuiCode>EuiToken</EuiCode> accepts any valid{' '}
Tokens are most commonly used to visually signify field or code
types. An <EuiCode>EuiToken</EuiCode> accepts any valid{' '}
<EuiCode>EuiIcon</EuiCode> as its
<EuiCode>iconType</EuiCode> property. However, icons designed
specifically for use in the <EuiCode>EuiToken</EuiCode> are prefixed
with &quot;token&quot; in their name.
</p>

<p>
Multiple variants are available including: <EuiCode>shape</EuiCode>,{' '}
<EuiCode>size</EuiCode>,<EuiCode>color</EuiCode>,{' '}
<EuiCode>hideBorder</EuiCode>, and <EuiCode>fill</EuiCode>.
with &quot;token&quot; in their name and have pre-defined styles.
</p>
</div>
),
Expand Down
73 changes: 43 additions & 30 deletions src-docs/src/views/icon/tokens.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,18 @@ import {
} from '../../../../src/components';

const tokens = [
'tokenString',
'tokenNumber',
'tokenBoolean',
'tokenDate',
'tokenGeo',
'tokenIP',
'tokenShape',
'tokenNested',
'tokenAlias',
'tokenRange',
'tokenAnnotation',
'tokenArray',
'tokenBoolean',
'tokenClass',
'tokenConstant',
'tokenElement',
Expand All @@ -41,13 +50,11 @@ const tokens = [
'tokenModule',
'tokenNamespace',
'tokenNull',
'tokenNumber',
'tokenObject',
'tokenOperator',
'tokenPackage',
'tokenParameter',
'tokenProperty',
'tokenString',
'tokenStruct',
'tokenVariable',
'tokenFile',
Expand Down Expand Up @@ -87,11 +94,13 @@ export default () => (
<EuiSpacer />

<EuiText size="s">
<h3>Custom tokens</h3>
<p>
By default the <EuiCode>iconType</EuiCode> prop defines the styling of
the token. However, <EuiCode>displayOptions</EuiCode> allows you to
overwrite the color, shape and fill used if you need a more custom token
using any of the EUI glyph set.
By default, an <EuiCode>iconType</EuiCode> with the token prefix (i.e.
those listed above) will have predefined styles. However, any valid{' '}
<EuiCode>iconType</EuiCode> can be passed and, in either case, the{' '}
<EuiCode>shape</EuiCode>, <EuiCode>size</EuiCode>,{' '}
<EuiCode>color</EuiCode>, and <EuiCode>fill</EuiCode> can be customized.
</p>
</EuiText>

Expand All @@ -106,18 +115,25 @@ export default () => (
justifyContent: 'center',
marginBottom: '8px',
}}>
<EuiToken
iconType="tokenEvent"
size="m"
displayOptions={{
color: 'tokenTint10',
shape: 'square',
fill: true,
}}
/>
<EuiToken iconType="tokenStruct" size="xs" color="gray" />
</div>
<EuiText size="s">
<p>A custom token</p>
<p>An xs, gray tokenStruct</p>
</EuiText>
</EuiPanel>
</EuiFlexItem>
<EuiFlexItem className="guideDemo__icon">
<EuiPanel>
<div
style={{
display: 'flex',
justifyContent: 'center',
marginBottom: '8px',
}}>
<EuiToken iconType="tokenStruct" fill="none" />
</div>
<EuiText size="s">
<p>A none fill tokenStruct</p>
</EuiText>
</EuiPanel>
</EuiFlexItem>
Expand All @@ -130,15 +146,14 @@ export default () => (
marginBottom: '8px',
}}>
<EuiToken
iconType="visMapCoordinate"
displayOptions={{
color: 'tokenTint05',
shape: 'circle',
}}
iconType="tokenStruct"
size="m"
shape="circle"
color="#FF0000"
/>
</div>
<EuiText size="s">
<p>A custom token</p>
<p>A size m, circle, #FF0000 tokenStruct</p>
</EuiText>
</EuiPanel>
</EuiFlexItem>
Expand All @@ -151,17 +166,15 @@ export default () => (
marginBottom: '8px',
}}>
<EuiToken
iconType="tokenElement"
iconType="faceNeutral"
size="l"
displayOptions={{
color: 'tokenTint07',
shape: 'rectangle',
hideBorder: true,
}}
color="euiColorVis7"
shape="rectangle"
fill="dark"
/>
</div>
<EuiText size="s">
<p>A custom token</p>
<p>A completely custom token</p>
</EuiText>
</EuiPanel>
</EuiFlexItem>
Expand Down
19 changes: 8 additions & 11 deletions src/components/datagrid/column_sorting.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,13 @@ import {
euiDragDropReorder,
} from '../drag_and_drop';
import { DropResult } from 'react-beautiful-dnd';
import { EuiIcon } from '../icon';
import { EuiDataGridColumnSortingDraggable } from './column_sorting_draggable';
import {
EuiDataGridSchema,
EuiDataGridSchemaDetector,
getDetailsForSchema,
} from './data_grid_schema';
import { euiPaletteColorBlind } from '../../services/color/eui_palettes';
import { EuiToken } from '../token';

export const useColumnSorting = (
columns: EuiDataGridColumn[],
Expand All @@ -35,7 +34,6 @@ export const useColumnSorting = (
): ReactNode => {
const [isOpen, setIsOpen] = useState(false);
const [avilableColumnsisOpen, setAvailableColumnsIsOpen] = useState(false);
const defaultSchemaColor: string = euiPaletteColorBlind()[4];

// prune any non-existant/hidden columns from sorting
useEffect(() => {
Expand Down Expand Up @@ -143,7 +141,6 @@ export const useColumnSorting = (
sorting={sorting}
schema={schema}
schemaDetectors={schemaDetectors}
defaultSchemaColor={defaultSchemaColor}
/>
);
})}
Expand Down Expand Up @@ -216,24 +213,24 @@ export const useColumnSorting = (
gutterSize="s"
component="span">
<EuiFlexItem grow={false}>
<EuiIcon
color={
<EuiToken
iconType={
schema.hasOwnProperty(id) &&
schema[id].columnType != null
? getDetailsForSchema(
schemaDetectors,
schema[id].columnType
).color
: defaultSchemaColor
).icon
: 'tokenString'
}
type={
color={
schema.hasOwnProperty(id) &&
schema[id].columnType != null
? getDetailsForSchema(
schemaDetectors,
schema[id].columnType
).icon
: 'string'
).color
: undefined
}
/>
</EuiFlexItem>
Expand Down
21 changes: 6 additions & 15 deletions src/components/datagrid/column_sorting_draggable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
EuiDataGridSchemaDetector,
} from './data_grid_schema';
import { EuiDataGridSorting } from './data_grid_types';
import { EuiToken } from '../token';

export interface EuiDataGridColumnSortingDraggableProps {
id: string;
Expand All @@ -20,21 +21,11 @@ export interface EuiDataGridColumnSortingDraggableProps {
sorting: EuiDataGridSorting;
schema: EuiDataGridSchema;
schemaDetectors: EuiDataGridSchemaDetector[];
defaultSchemaColor: string;
}

export const EuiDataGridColumnSortingDraggable: FunctionComponent<
EuiDataGridColumnSortingDraggableProps
> = ({
id,
direction,
index,
sorting,
schema,
schemaDetectors,
defaultSchemaColor,
...rest
}) => {
> = ({ id, direction, index, sorting, schema, schemaDetectors, ...rest }) => {
const textSortAsc =
schema.hasOwnProperty(id) && schema[id].columnType != null ? (
getDetailsForSchema(schemaDetectors, schema[id].columnType).sortTextAsc
Expand Down Expand Up @@ -116,22 +107,22 @@ export const EuiDataGridColumnSortingDraggable: FunctionComponent<
</EuiFlexItem>

<EuiFlexItem grow={false}>
<EuiIcon
<EuiToken
color={
schema.hasOwnProperty(id) && schema[id].columnType != null
? getDetailsForSchema(
schemaDetectors,
schema[id].columnType
).color
: defaultSchemaColor
: undefined
}
type={
iconType={
schema.hasOwnProperty(id) && schema[id].columnType != null
? getDetailsForSchema(
schemaDetectors,
schema[id].columnType
).icon
: 'string'
: 'tokenString'
}
/>
</EuiFlexItem>
Expand Down
Loading

0 comments on commit 76d4435

Please sign in to comment.