Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into storybook/7583-suppor…
Browse files Browse the repository at this point in the history
…t-merged-story-control-configs
  • Loading branch information
mgadewoll committed Mar 25, 2024
2 parents f56bf1a + d2a267d commit f8cfad9
Show file tree
Hide file tree
Showing 58 changed files with 1,980 additions and 228 deletions.
3 changes: 3 additions & 0 deletions .stylelintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,9 @@ module.exports = {
// This is set to deprecate after stylelint v16, but in the meanwhile, is helpful
// for finding extraneous semicolons after utils that already output semicolons (e.g. logicalCSS())
'no-extra-semicolons': true,

// Emotion uses the `label` property to generate the output className string
'property-no-unknown': [true, { ignoreProperties: 'label' }],
},
},
],
Expand Down
3 changes: 3 additions & 0 deletions changelogs/upcoming/7607.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
**Bug fixes**

- Fixed `EuiTextArea`'s CSS box model to no longer render a few extra pixels of strut height
1 change: 1 addition & 0 deletions changelogs/upcoming/7609.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Updated `EuiSelectable` to support scrolling list containers when `listProps.isVirtualization` is set to `false`
2 changes: 1 addition & 1 deletion src-docs/src/views/code/code_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const CodeExample = {
or want to print long code (e.g., printing JSON from an API), we
recommend installing a version of Monaco. If you are building within
the Kibana platform, you can use their{' '}
<EuiLink href="https://github.com/elastic/kibana/tree/main/src/plugins/kibana_react/public/code_editor">
<EuiLink href="https://github.com/elastic/kibana/tree/main/packages/shared-ux/code_editor/impl">
<strong>CodeEditor</strong>
</EuiLink>
.
Expand Down
13 changes: 8 additions & 5 deletions src-docs/src/views/selectable/selectable_example.js
Original file line number Diff line number Diff line change
Expand Up @@ -479,11 +479,14 @@ export const SelectableExample = {
</p>
<p>
If <EuiCode>listProps.isVirtualized</EuiCode> is set to{' '}
<EuiCode>false</EuiCode>, each row will fit its contents and removes
all scrolling. Therefore, we recommend having a large enough
container to accommodate all options. You can also remove truncation
by setting <EuiCode>{'textWrap="wrap"'}</EuiCode> when
virtualization is off.
<EuiCode>false</EuiCode>, each row will fit its content. You can
also remove truncation by setting{' '}
<EuiCode>{'textWrap="wrap"'}</EuiCode> when virtualization is off.
Note that while this is useful for dynamic options, it can also be
computationally expensive as <em>all</em> off-screen options will be
rendered to the DOM. We do not recommend turning off virtualization
for high numbers of options, but if you absolutely must do so, we
suggest using methods such as async loading more options.
</p>
<h3>Custom content</h3>
<p>
Expand Down
5 changes: 5 additions & 0 deletions src/components/form/text_area/_text_area.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@
@include euiFormControlStyle;
line-height: $euiLineHeight; // give more spacing between multiple lines

// <textarea>s default to `inline-block`, which causes an extra 2-3px of
// unnecessary height within its parent `block` form control wrapper.
// @see https://stackoverflow.com/a/27536461/4294462
display: block;

// Textareas have their own sizing
&,
&--compressed {
Expand Down
87 changes: 87 additions & 0 deletions src/components/i18n/i18n.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
/*
* 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 { hideStorybookControls } from '../../../.storybook/utils';
import { EuiI18n, EuiI18nProps, I18nTokensShape } from './i18n';
import { EuiCard } from '../card';

type Props = EuiI18nProps<any, any, string[]>;

const meta: Meta<Props> = {
title: 'Utilities/EuiI18n',
component: EuiI18n,
};

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

export const SingleToken: Story = {
argTypes: {
default: { control: { type: 'text' } },
...hideStorybookControls(['children', 'tokens', 'defaults']),
},
args: {
token: 'euiI18nBasic.basicexample',
default:
'This is the English copy that would be replaced by a translation defined by the euiI18nBasic.basicexample token.',
},
};

export const Interpolation: Story = {
argTypes: {
...hideStorybookControls(['children', 'tokens', 'defaults']),
},
args: {
token: 'euiI18nInterpolation.clickedCount',
default: 'Clicked on button {count} times.',
values: { count: 3 },
},
};

export const MultipleTokens: Story = {
argTypes: {
...hideStorybookControls(['token', 'default']),
},
args: {
tokens: ['euiI18n.title', 'euiI18n.description'],
defaults: ['Card title', 'Card description'],
},
render: ({ tokens, defaults }: I18nTokensShape<string[]>) => (
// eslint-disable-next-line local/i18n
<EuiI18n tokens={tokens} defaults={defaults}>
{([title, description]: string[]) => (
<EuiCard title={title} description={description} />
)}
</EuiI18n>
),
};

export const MultipleTokenInterpolation: Story = {
argTypes: {
...hideStorybookControls(['token', 'default']),
},
args: {
tokens: ['euiI18nMulti.title', 'euiI18nMulti.description'],
defaults: [
'How often was the {name} cuddled?',
'The {name} was cuddled {count} times.',
],
values: { name: 'cat', count: 3 },
},
render: ({ tokens, defaults, values }: I18nTokensShape<string[]>) => (
// eslint-disable-next-line local/i18n
<EuiI18n tokens={tokens} defaults={defaults} values={values}>
{([title, description]: string[]) => (
<EuiCard title={title} description={description} />
)}
</EuiI18n>
),
};
8 changes: 7 additions & 1 deletion src/components/i18n/i18n.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,13 +90,19 @@ type ResolvedType<T> = T extends (...args: any[]) => any ? ReturnType<T> : T;
interface I18nTokenShape<T, DEFAULT extends Renderable<T>> {
token: string;
default: DEFAULT;
/**
* Render function that returns a ReactElement
*/
children?: (x: ResolvedType<DEFAULT>) => ReactChild;
values?: T;
}

interface I18nTokensShape<T extends any[]> {
export interface I18nTokensShape<T extends any[]> {
tokens: string[];
defaults: T;
/**
* Render function that returns a ReactElement
*/
children: (x: Array<T[number]>) => ReactChild;
values?: Record<string, ReactChild>;
}
Expand Down
50 changes: 50 additions & 0 deletions src/components/i18n/i18n_number.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*
* 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, { ReactChild } from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import { hideStorybookControls } from '../../../.storybook/utils';
import { EuiI18nNumber, EuiI18nNumberProps } from './i18n_number';
import { EuiText } from '../text';

const meta: Meta<EuiI18nNumberProps> = {
title: 'Utilities/EuiI18nNumber',
component: EuiI18nNumber,
};

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

export const SingleValue: Story = {
argTypes: hideStorybookControls(['children', 'values']),
args: {
value: 99,
},
render: (args: EuiI18nNumberProps) => (
<EuiText>
<span>Formatted number:</span> <EuiI18nNumber {...args} />
</EuiText>
),
};

export const MultipleValues: Story = {
argTypes: hideStorybookControls(['value']),
args: {
values: [0, 1, 2],
children: (values: ReactChild[]) => (
<>
{values.map((value) => (
<EuiText>
<span>Formatted number: {value}</span>
</EuiText>
))}
</>
),
},
};
29 changes: 29 additions & 0 deletions src/components/icon/icon.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/*
* 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 type { Meta, StoryObj } from '@storybook/react';

import { EuiIcon, EuiIconProps } from './icon';

const meta: Meta<EuiIconProps> = {
title: 'Display/EuiIcon',
component: EuiIcon,
argTypes: {
color: { control: { type: 'text' } },
},
// Component defaults
args: {
type: 'accessibility',
size: 'm',
},
};

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

export const Playground: Story = {};
34 changes: 34 additions & 0 deletions src/components/image/image.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*
* 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 type { Meta, StoryObj } from '@storybook/react';

import { EuiImage } from './image';
import { EuiImageProps } from './image_types';

const meta: Meta<EuiImageProps> = {
title: 'Display/EuiImage',
component: EuiImage,
argTypes: {
size: { control: { type: 'text' } },
caption: { control: { type: 'text' } },
},
// Component defaults
args: {
size: 'original',
},
};

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

export const Playground: Story = {
args: {
src: 'https://images.unsplash.com/photo-1650253618249-fb0d32d3865c?w=900&h=400&fit=crop&q=60',
},
};
38 changes: 38 additions & 0 deletions src/components/inline_edit/inline_edit_text.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/*
* 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 type { Meta, StoryObj } from '@storybook/react';

import { EuiInlineEditText, EuiInlineEditTextProps } from './inline_edit_text';

const meta: Meta<EuiInlineEditTextProps> = {
title: 'Forms/EuiInlineEditText',
component: EuiInlineEditText,
// Component defaults
args: {
size: 'm',
},
};

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

export const Playground: Story = {
args: {
defaultValue: 'Hello World!',
inputAriaLabel: 'Edit text inline',
},
};

export const EditMode: Story = {
args: {
defaultValue: 'Hello World!',
inputAriaLabel: 'Edit text inline',
startWithEditOpen: true,
},
};
43 changes: 43 additions & 0 deletions src/components/inline_edit/inline_edit_title.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/*
* 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 type { Meta, StoryObj } from '@storybook/react';

import {
EuiInlineEditTitle,
EuiInlineEditTitleProps,
} from './inline_edit_title';

const meta: Meta<EuiInlineEditTitleProps> = {
title: 'Forms/EuiInlineEditTitle',
component: EuiInlineEditTitle,
// Component defaults
args: {
size: 'm',
},
};

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

export const Playground: Story = {
args: {
heading: 'h1',
defaultValue: 'Hello World!',
inputAriaLabel: 'Edit title inline',
},
};

export const EditMode: Story = {
args: {
heading: 'h1',
defaultValue: 'Hello World!',
inputAriaLabel: 'Edit title inline',
startWithEditOpen: true,
},
};
Loading

0 comments on commit f8cfad9

Please sign in to comment.