Skip to content

Commit

Permalink
[storybook] Improve default story to show off more styles/states
Browse files Browse the repository at this point in the history
+ fix nested caret alignment
  • Loading branch information
cee-chen committed Feb 9, 2024
1 parent 7c9916b commit 80678f4
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 18 deletions.
84 changes: 66 additions & 18 deletions src/components/side_nav/side_nav.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,43 +43,91 @@ type Story = StoryObj<EuiSideNavProps>;

const sharedSideNavItems = [
{
name: 'Has nested children',
id: 'normal_children',
name: 'Root item with carets',
id: 'root_1',
items: [
{
name: 'Child 1',
id: 'child_1',
name: 'Trunk 1',
id: 'trunk_1',
items: [
{
name: 'Selected item',
id: 'selected_item',
name: 'Emphasized branch',
id: 'emphasized_branch',
icon: <EuiIcon type="faceHappy" />,
emphasize: true,
items: [
{
name: 'Yet another branch',
id: 'branch_1',
onClick: () => {},
},
],
},
],
},
],
},
{
name: 'Root item without carets',
id: 'root_2',
items: [
{
name: 'Trunk 2',
id: 'trunk_2',
onClick: () => {}, // Causes the caret to not render
items: [
{
name: 'Branch 2',
id: 'branch_2',
onClick: () => {},
isSelected: true,
items: [],
items: [
{
name: 'All parents are open because this branch is selected',
id: 'selected_branch',
onClick: () => {},
isSelected: true,
truncate: false,
},
],
},
],
},
],
},
{
name: 'Has forceOpen: true',
id: 'force_open',
forceOpen: true,
name: 'Root item with forced open children',
id: 'root_3',
items: [
{
name: 'Child 3',
id: 'child_3',
name: 'Trunk 3',
id: 'trunk_3',
onClick: () => {},
forceOpen: true,
items: [
{
name: 'Disabled branch',
id: 'disabled_branch',
href: '#',
disabled: true,
icon: <EuiIcon type="faceSad" />,
},
],
},
],
},
{
name: 'Children only without link',
id: 'children_only',
onClick: undefined,
name: 'Root item with icon and truncation',
icon: <EuiIcon type="logoElastic" />,
id: 'root_4',
items: [
{
name: 'Child 4',
id: 'child_4',
name: 'Very very long text, truncated by default',
id: 'truncated',
},
{
name: 'Very very long text, truncate set to false',
id: 'truncateFalse',
truncate: false,
},
],
},
Expand Down
1 change: 1 addition & 0 deletions src/components/side_nav/side_nav_item.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,7 @@ export const euiSideNavItemStyles = (euiThemeContext: UseEuiTheme) => {
${logicalCSS('margin-left', euiTheme.size.l)}
`,
trunk: css`
${logicalCSS('width', '100%')} /* Needed for trunks with carets */
${logicalCSS('margin-left', euiTheme.size.s)}
`,
branch: css`
Expand Down

0 comments on commit 80678f4

Please sign in to comment.