Skip to content

Commit

Permalink
[Emotion] Convert EuiResizableContainer and EuiResizablePanel (#6287)
Browse files Browse the repository at this point in the history
* [EuiResizableContainer] Convert styles

* [EuiResizablePanel] Emotion setup

- basic styles only
- leave wrapper modifier classes in for now - will handle in another commit
+ rename inlineStyles due to var name conflict

* [EuiResizablePanel] Convert & update padding CSS

- Add new `euiPaddingSizeCSS` util that our internal components can use to generate a CSS map, and update `useEuiPaddingSize` to call that util instead of being its own fn

- Remove panel padding size map in favor of calling euiPaddingSize util directly

- Remove modifier map and ts error

+ add wrapperPadding unit test

* [EuiResizablePanel] Convert remaining collapse CSS to Emotion

+ DRY out axis direction to a const

* [EuiResizablePanel] Remove remaining modifier classes in favor of data attributes

- left out isCollapsible modifier - consumers can likely look for the collapsible button instead

+ fix misc parseInt usage missing `10` radix - prefer parseFloat instead

* [EuiResizablePanel] Convert inline style dimensions to logical properties

+ simplify conditional logic

+ fix logicalSizeStyle util not correctly camelCasing keys

* [EuiResizablePanel] Remove Sass files

* [docs] Convert all resizable examples to Typescript

* Changelog
  • Loading branch information
Constance authored Oct 18, 2022
1 parent 8081fda commit 177a2b3
Show file tree
Hide file tree
Showing 25 changed files with 331 additions and 263 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { EuiText, EuiResizableContainer } from '../../../../src/components';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';

const text = (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import {
EuiFlexItem,
EuiStat,
EuiPanel,
} from '../../../../src/components';
useGeneratedHtmlId,
} from '../../../../src';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';
import { useGeneratedHtmlId } from '../../../../src/services';

const text = (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizableContainerSource,
},
],
Expand Down Expand Up @@ -257,7 +257,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizablePanelsSource,
},
],
Expand Down Expand Up @@ -288,7 +288,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizableContainerResetValuesSource,
},
],
Expand Down Expand Up @@ -322,7 +322,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizableContainerVerticalSource,
},
],
Expand Down Expand Up @@ -365,7 +365,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizablePanelCollapsibleSource,
},
],
Expand Down Expand Up @@ -406,7 +406,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizablePanelCollapsibleResponsiveSource,
},
],
Expand All @@ -424,7 +424,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizablePanelCollapsibleOptsSource,
},
],
Expand Down Expand Up @@ -452,7 +452,7 @@ export const ResizableContainerExample = {
{
source: [
{
type: GuideSectionTypes.JS,
type: GuideSectionTypes.TSX,
code: ResizablePanelCollapsibleExtSource,
},
],
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
import React, { useCallback, useState } from 'react';

import {
EuiFlexGroup,
EuiFlexItem,
EuiText,
EuiResizableContainer,
EuiButton,
EuiSpacer,
} from '../../../../src/components';
htmlIdGenerator,
} from '../../../../src';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';

import { htmlIdGenerator } from '../../../../src/services';

const text = (
<>
<p>{fake('{{lorem.paragraphs}}')}</p>
Expand All @@ -33,7 +32,7 @@ export default () => {
const [savedSizes, setSavedSizes] = useState(storedSizes);
const [sizes, setSizes] = useState(defaultSizes);
const onPanelWidthChange = useCallback((newSizes) => {
setSizes((prevSizes) => ({
setSizes((prevSizes: Record<string, number>) => ({
...prevSizes,
...newSizes,
}));
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';

import { EuiText, EuiResizableContainer } from '../../../../src/components';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';

const text = (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,36 +9,31 @@ import {
EuiSpacer,
EuiPage,
} from '../../../../src/components';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';

const texts = [];

for (let i = 0; i < 4; i++) {
texts.push(<p>{fake('{{lorem.paragraph}}')}</p>);
}

export default () => {
const items = [
{
id: 1,
label: 'First item',
text: texts[0],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
active: true,
},
{
id: 2,
label: 'Second item',
text: texts[1],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 3,
label: 'Third item',
text: texts[2],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 4,
label: 'Forth item',
text: texts[3],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,19 +23,21 @@ const toggleButtons = [
];

export default () => {
const collapseFn = useRef(() => {});
const collapseFn = useRef<Function>(() => {});

const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState({});
const [toggleIdToSelectedMap, setToggleIdToSelectedMap] = useState<
Record<string, boolean>
>({});

const onCollapse = (optionId) => {
const onCollapse = (optionId: string) => {
const newToggleIdToSelectedMap = {
...toggleIdToSelectedMap,
[optionId]: !toggleIdToSelectedMap[optionId],
};
setToggleIdToSelectedMap(newToggleIdToSelectedMap);
};

const onChange = (optionId) => {
const onChange = (optionId: string) => {
onCollapse(optionId);
collapseFn.current(`panel${optionId}`, optionId === '3' ? 'right' : 'left');
};
Expand All @@ -58,8 +60,11 @@ export default () => {
style={{ height: '250px' }}
>
{(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
collapseFn.current = (id, direction = 'left') =>
togglePanel(id, { direction });
collapseFn.current = (
id: string,
direction: 'left' | 'right' = 'left'
) => togglePanel?.(id, { direction });

return (
<>
<EuiResizablePanel id="panel1" initialSize={30} minSize="10%">
Expand Down Expand Up @@ -103,7 +108,7 @@ export default () => {
color="text"
aria-label={'Toggle panel 3'}
iconType="menuRight"
onClick={() => onChange(3)}
onClick={() => onChange('3')}
/>
</EuiFlexItem>
</EuiFlexGroup>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,35 +9,30 @@ import {
EuiText,
EuiPage,
} from '../../../../src/components';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';

const texts = [];

for (let i = 0; i < 4; i++) {
texts.push(<p>{fake('{{lorem.paragraph}}')}</p>);
}

export default () => {
const items = [
{
id: 1,
label: 'First item',
text: texts[0],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 2,
label: 'Second item',
text: texts[1],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 3,
label: 'Third item',
text: texts[2],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 4,
label: 'Forth item',
text: texts[3],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
];

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,36 +10,31 @@ import {
EuiPage,
useIsWithinBreakpoints,
} from '../../../../src';
// @ts-ignore - faker does not have type declarations
import { fake } from 'faker';

const texts = [];

for (let i = 0; i < 4; i++) {
texts.push(<p>{fake('{{lorem.paragraph}}')}</p>);
}

export default () => {
const items = [
{
id: 1,
label: 'First item',
text: texts[0],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
active: true,
},
{
id: 2,
label: 'Second item',
text: texts[1],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 3,
label: 'Third item',
text: texts[2],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
{
id: 4,
label: 'Forth item',
text: texts[3],
text: <p>{fake('{{lorem.paragraphs}}')}</p>,
},
];

Expand Down
Loading

0 comments on commit 177a2b3

Please sign in to comment.