Skip to content

Commit

Permalink
Add Storybook + fix style bugs caught as a result
Browse files Browse the repository at this point in the history
- need `flex-shrink` on icon wrappers

- enforce icon width/heights appropriately for consumers that switch between default and compressed styles
  • Loading branch information
cee-chen committed Feb 5, 2024
1 parent 9a10171 commit e83bda9
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 4 deletions.
19 changes: 16 additions & 3 deletions src/components/tree_view/_tree_view_item.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,11 +67,24 @@ export const euiTreeViewItemStyles = (euiThemeContext: UseEuiTheme) => {
},

icon: {
// Line height helps vertically center the icons
euiTreeView__iconWrapper: css`
line-height: 0;
flex-shrink: 0;
line-height: 0; /* Vertically centers the icon */
/* Handle smaller icons in compressed mode */
& > * {
${logicalCSS('max-width', '100%')}
}
& > .euiToken {
${logicalCSS('max-height', '100%')}
${logicalCSS('height', 'auto')}
svg {
${logicalCSS('width', '100%')}
}
}
`,
euiTreeView__placeholder: css``,
default: css`
${logicalCSS(
'width',
Expand Down
105 changes: 105 additions & 0 deletions src/components/tree_view/tree_view.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
/*
* 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 React from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import { EuiIcon } from '../icon';
import { EuiToken } from '../token';

import { EuiTreeView, EuiTreeViewProps } from './tree_view';

const meta: Meta<EuiTreeViewProps> = {
title: 'EuiTreeView',
component: EuiTreeView,
argTypes: {
'aria-label': {
type: {
name: 'string',
required: true,
},
description:
'Passing either an `aria-label` or an `aria-labelledby` is required for accessibility.',
},
'aria-labelledby': {
type: { name: 'string', required: true },
description:
'Passing either an `aria-label` or an `aria-labelledby` is required for accessibility.',
},
},
args: {
// Component defaults
display: 'default',
expandByDefault: false,
showExpansionArrows: false,
},
};

export default meta;
type Story = StoryObj<EuiTreeViewProps>;

export const Playground: Story = {
args: {
'aria-label': 'Directory of items',
items: [
{
label: 'Item One',
id: 'item_one',
icon: <EuiIcon type="folderClosed" />,
iconWhenExpanded: <EuiIcon type="folderOpen" />,
isExpanded: true,
children: [
{
label: 'Item A',
id: 'item_a',
icon: <EuiIcon type="document" />,
},
{
label: 'Item B',
id: 'item_b',
useEmptyIcon: true,
children: [
{
label: 'A Cloud',
id: 'item_cloud',
icon: <EuiToken iconType="tokenConstant" />,
},
{
label: "I'm a Bug",
id: 'item_bug',
icon: <EuiToken iconType="tokenEnum" />,
},
],
},
{
label: 'Item C',
id: 'item_c',
children: [
{
label: 'Another Cloud',
id: 'item_cloud2',
icon: <EuiToken iconType="tokenConstant" />,
},
{
label:
'This one is a really long string that we will check truncates correctly',
id: 'item_bug2',
useEmptyIcon: true,
callback: () => '',
},
],
},
],
},
{
label: 'Item Two',
id: 'item_two',
},
],
},
};
2 changes: 1 addition & 1 deletion src/components/tree_view/tree_view.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export type CommonTreeProps = CommonProps &
items: Node[];
/**
* Optionally use a variation with smaller text and icon sizes
* @default 'default'
* @default default
*/
display?: EuiTreeViewDisplayOptions;
/**
Expand Down

0 comments on commit e83bda9

Please sign in to comment.