Skip to content

Commit 0bd7fa9

Browse files
tdeekenstdeekens
authored
feat(CollapsiblePanel): add hideExpansionControls (not hidden by default) (#421)
* refactor(collapsible-panel): to show but disable header icon when disabled * feat(collapsible-panel): add hideExpansionControls * chore(collapible-panel): simplify application for theme css * feat(collapsible-panel): add visual route specs for expansion controls and disabled * fix(collapsible-panel): to default not to be disabled * feat(collapsible-panel): add more visual specs
1 parent 531234b commit 0bd7fa9

6 files changed

+213
-54
lines changed

‎src/components/panels/collapsible-panel/README.md

+16-15
Original file line numberDiff line numberDiff line change
@@ -33,21 +33,22 @@ The component can be used in a controlled or uncontrolled manner. Please refer t
3333

3434
#### Properties
3535

36-
| Props | Type | Required | Values | Default | Description |
37-
| ----------------- | -------- | :------------------------------------------------------: | --------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
38-
| `header` | `node` | ✅ | - | - | The title being rendered at top left of the panel |
39-
| `secondaryHeader` | `node` | | - | - | A secondary header for the panel (only pass if needed) | |
40-
| `onToggle` | `func` | (required only if controlled as in `isClosed` is passed) | - | - | function to be triggered whenever the user clicks the top area to collapse the panel's content |
41-
| `isClosed` | `bool` | | - | false | Indicates if the panel's content should be collapsed or shown |
42-
| `isSticky` | `bool` | | - | false | Makes the panel's header sticky in regards to the page's scroll |
43-
| `description` | `String` | | - | | If passed will be shown below the title as more information regarding the panel |
44-
| `isDisabled` | `bool` | | - | false | Disables the panel and all interactions with it |
45-
| `children` | `node` | | - | - | The actual content rendered inside the panel |
46-
| `headerControls` | `node` | | - | - | Controls at the top right part of the panel |
47-
| `tone` | `oneOf` | | ['urgent', 'primary'] | 'primary' | - |
48-
| `className` | `bool` | | - | - | - |
49-
| `theme` | `string` | | ['dark', 'light'] | 'light' | The main color combination of the for the panel header and container |
50-
| `condensed` | `bool` | | - | false | Whenever `true` the headers and content itself will consume less space in that to the borders are smaller and everything has less padding |
36+
| Props | Type | Required | Values | Default | Description |
37+
| ----------------------- | -------- | :------------------------------------------------------: | --------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
38+
| `header` | `node` | ✅ | - | - | The title being rendered at top left of the panel |
39+
| `secondaryHeader` | `node` | | - | - | A secondary header for the panel (only pass if needed) | |
40+
| `onToggle` | `func` | (required only if controlled as in `isClosed` is passed) | - | - | function to be triggered whenever the user clicks the top area to collapse the panel's content |
41+
| `isClosed` | `bool` | | - | false | Indicates if the panel's content should be collapsed or shown |
42+
| `isSticky` | `bool` | | - | false | Makes the panel's header sticky in regards to the page's scroll |
43+
| `description` | `String` | | - | | If passed will be shown below the title as more information regarding the panel |
44+
| `isDisabled` | `bool` | | - | false | Disables the panel and all interactions with it |
45+
| `children` | `node` | | - | - | The actual content rendered inside the panel |
46+
| `hideExpansionControls` | `bool` | | - | - | Controls the visibility of the expansion controls on the left |
47+
| `headerControls` | `node` | | - | - | Controls at the top right part of the panel |
48+
| `tone` | `oneOf` | | ['urgent', 'primary'] | 'primary' | - |
49+
| `className` | `bool` | | - | - | - |
50+
| `theme` | `string` | | ['dark', 'light'] | 'light' | The main color combination of the for the panel header and container |
51+
| `condensed` | `bool` | | - | false | Whenever `true` the headers and content itself will consume less space in that to the borders are smaller and everything has less padding |
5152

5253
#### Where to use
5354

‎src/components/panels/collapsible-panel/collapsible-panel.js

+27-17
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export default class CollapsiblePanel extends React.PureComponent {
2626
tone: PropTypes.oneOf(['urgent', 'primary']),
2727
theme: PropTypes.oneOf(['dark', 'light']),
2828
condensed: PropTypes.bool,
29+
hideExpansionControls: PropTypes.bool,
2930

3031
// props when uncontrolled
3132
isDefaultClosed(props, propName, componentName, ...rest) {
@@ -66,6 +67,7 @@ export default class CollapsiblePanel extends React.PureComponent {
6667
static defaultProps = {
6768
theme: 'dark',
6869
condensed: false,
70+
isDisabled: false,
6971
};
7072

7173
render() {
@@ -81,32 +83,40 @@ export default class CollapsiblePanel extends React.PureComponent {
8183
>
8284
{({ isOpen, toggle, containerStyles, registerContentNode }) => (
8385
<div
84-
className={classnames(this.props.className, {
85-
[styles['container-condensed']]: this.props.condensed,
86-
[styles['container-open']]: isOpen,
87-
[styles['container-theme-light']]: this.props.theme === 'light',
88-
[styles['container-theme-dark']]: this.props.theme === 'dark',
89-
})}
86+
className={classnames(
87+
this.props.className,
88+
styles[`container-theme-${this.props.theme}`],
89+
{
90+
[styles['container-condensed']]: this.props.condensed,
91+
[styles['container-open']]: isOpen,
92+
}
93+
)}
9094
>
9195
<div
9296
onClick={this.props.isDisabled ? undefined : toggle}
93-
className={classnames(styles['base-header-container'], {
94-
[styles['header-container-theme-light']]:
95-
this.props.theme === 'light',
96-
[styles['header-container-theme-dark']]:
97-
this.props.theme === 'dark',
98-
[styles.disabled]: this.props.isDisabled,
99-
[styles.sticky]: this.props.isSticky && isOpen,
100-
[styles['header-closed']]: !isOpen,
101-
})}
97+
className={classnames(
98+
styles['base-header-container'],
99+
styles[`header-container-theme-${this.props.theme}`],
100+
{
101+
[styles.disabled]: this.props.isDisabled,
102+
[styles.sticky]: this.props.isSticky && isOpen,
103+
[styles['header-closed']]: !isOpen,
104+
}
105+
)}
102106
>
103107
<Spacings.InsetSquish scale={scale}>
104-
<div {...dataProps} className={styles.header}>
108+
<div
109+
{...dataProps}
110+
className={classnames(styles.header, {
111+
[styles['header-disabled']]: this.props.isDisabled,
112+
})}
113+
>
105114
<div className={styles['truncate-header']}>
106115
<Spacings.Inline alignItems="center" scale="s">
107-
{!this.props.isDisabled && (
116+
{!this.props.hideExpansionControls && (
108117
<HeaderIcon
109118
isClosed={!isOpen}
119+
isDisabled={this.props.isDisabled}
110120
tone={this.props.tone}
111121
size={this.props.condensed ? 'small' : 'medium'}
112122
/>

‎src/components/panels/collapsible-panel/collapsible-panel.mod.css

+6-12
Original file line numberDiff line numberDiff line change
@@ -100,18 +100,8 @@
100100
margin: 0 0 0 var(--spacing-16);
101101
}
102102

103-
.header-title {
104-
cursor: pointer;
105-
margin-bottom: 0;
106-
white-space: nowrap;
107-
overflow: hidden;
108-
text-overflow: ellipsis;
109-
flex-grow: 1;
110-
}
111-
112-
.header-title-disabled {
113-
composes: header-title;
114-
cursor: default;
103+
.header-disabled {
104+
cursor: not-allowed;
115105
}
116106

117107
.header-icon {
@@ -125,6 +115,10 @@
125115
box-shadow: var(--shadow-7);
126116
}
127117

118+
.header-icon-disabled {
119+
box-shadow: none;
120+
}
121+
128122
.header-icon-small {
129123
height: var(--size-icon-container-small);
130124
width: var(--size-icon-container-small);

‎src/components/panels/collapsible-panel/collapsible-panel.story.js

+1
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ storiesOf('Components|Panels', module)
2828
isSticky={boolean('isSticky', false)}
2929
isDisabled={boolean('isDisabled', false)}
3030
tone={select('tone', ['primary', 'urgent'], 'primary')}
31+
hideExpansionControls={boolean('hideExpansionControls', false)}
3132
headerControls={text('headerControls', 'headerControl')}
3233
theme={select('theme', ['dark', 'light'])}
3334
condensed={condensed}

‎src/components/panels/collapsible-panel/collapsible-panel.visualroute.js

+142-7
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const routePath = '/collapsible-panel';
1111

1212
export const component = () => (
1313
<Suite>
14-
<Spec label="condensed">
14+
<Spec label="condensed - dark">
1515
<CollapsiblePanel
1616
header="Header"
1717
description="Some description"
@@ -25,35 +25,103 @@ export const component = () => (
2525
Content
2626
</CollapsiblePanel>
2727
</Spec>
28-
<Spec label="regular (not condensed)">
28+
<Spec label="condensed - light">
29+
<CollapsiblePanel
30+
header="Header"
31+
description="Some description"
32+
isDisabled={false}
33+
tone="primary"
34+
headerControls="headerControl"
35+
theme="light"
36+
condensed
37+
secondaryHeader="Secondary Header"
38+
>
39+
Content
40+
</CollapsiblePanel>
41+
</Spec>
42+
<Spec label="condensed - light - hideExpansionControls">
43+
<CollapsiblePanel
44+
header="Header"
45+
description="Some description"
46+
isDisabled={false}
47+
hideExpansionControls={true}
48+
tone="primary"
49+
headerControls="headerControl"
50+
theme="light"
51+
condensed
52+
secondaryHeader="Secondary Header"
53+
>
54+
Content
55+
</CollapsiblePanel>
56+
</Spec>
57+
<Spec label="condensed - light - isDisabled">
58+
<CollapsiblePanel
59+
header="Header"
60+
description="Some description"
61+
isDisabled={true}
62+
tone="primary"
63+
headerControls="headerControl"
64+
theme="light"
65+
condensed
66+
secondaryHeader="Secondary Header"
67+
>
68+
Content
69+
</CollapsiblePanel>
70+
</Spec>
71+
<Spec label="regular (not condensed) - dark">
2972
<CollapsiblePanel
3073
header={<CollapsiblePanel.Header>Header</CollapsiblePanel.Header>}
3174
description="Some description"
3275
isDisabled={false}
3376
tone="primary"
3477
headerControls="headerControl"
3578
theme="dark"
36-
condensed
3779
secondaryHeader="Secondary Header"
3880
>
3981
Content
4082
</CollapsiblePanel>
4183
</Spec>
42-
<Spec label="light">
84+
<Spec label="regular (not condensed) - dark - hideExpansionControls">
85+
<CollapsiblePanel
86+
header={<CollapsiblePanel.Header>Header</CollapsiblePanel.Header>}
87+
description="Some description"
88+
isDisabled={false}
89+
hideExpansionControls={true}
90+
tone="primary"
91+
headerControls="headerControl"
92+
theme="dark"
93+
secondaryHeader="Secondary Header"
94+
>
95+
Content
96+
</CollapsiblePanel>
97+
</Spec>
98+
<Spec label="regular (not condensed) - dark - isDisabled">
99+
<CollapsiblePanel
100+
header={<CollapsiblePanel.Header>Header</CollapsiblePanel.Header>}
101+
description="Some description"
102+
isDisabled={true}
103+
tone="primary"
104+
headerControls="headerControl"
105+
theme="dark"
106+
secondaryHeader="Secondary Header"
107+
>
108+
Content
109+
</CollapsiblePanel>
110+
</Spec>
111+
<Spec label="regular (not condensed) - light">
43112
<CollapsiblePanel
44113
header={<CollapsiblePanel.Header>Header</CollapsiblePanel.Header>}
45114
description="Some description"
46115
isDisabled={false}
47116
tone="primary"
48117
headerControls="headerControl"
49118
theme="light"
50-
condensed
51119
secondaryHeader="Secondary Header"
52120
>
53121
Content
54122
</CollapsiblePanel>
55123
</Spec>
56-
<Spec label="urgent and light">
124+
<Spec label="condensed - light and urgent">
57125
<CollapsiblePanel
58126
header={<CollapsiblePanel.Header>Header</CollapsiblePanel.Header>}
59127
description="Some description"
@@ -67,7 +135,7 @@ export const component = () => (
67135
Content
68136
</CollapsiblePanel>
69137
</Spec>
70-
<Spec label="urgent and dark">
138+
<Spec label="condensed - dark and urgent">
71139
<CollapsiblePanel
72140
header={<CollapsiblePanel.Header>Header</CollapsiblePanel.Header>}
73141
description="Some description"
@@ -81,5 +149,72 @@ export const component = () => (
81149
Content
82150
</CollapsiblePanel>
83151
</Spec>
152+
<Spec label="condensed - dark and urgent - isDisabled">
153+
<CollapsiblePanel
154+
header={<CollapsiblePanel.Header>Header</CollapsiblePanel.Header>}
155+
description="Some description"
156+
isDisabled={true}
157+
tone="urgent"
158+
headerControls="headerControl"
159+
theme="dark"
160+
condensed
161+
secondaryHeader="Secondary Header"
162+
>
163+
Content
164+
</CollapsiblePanel>
165+
</Spec>
166+
<Spec label="regular (not condensed) - light and urgent">
167+
<CollapsiblePanel
168+
header={<CollapsiblePanel.Header>Header</CollapsiblePanel.Header>}
169+
description="Some description"
170+
isDisabled={false}
171+
tone="urgent"
172+
headerControls="headerControl"
173+
theme="light"
174+
secondaryHeader="Secondary Header"
175+
>
176+
Content
177+
</CollapsiblePanel>
178+
</Spec>
179+
<Spec label="regular (not condensed) - dark and urgent">
180+
<CollapsiblePanel
181+
header={<CollapsiblePanel.Header>Header</CollapsiblePanel.Header>}
182+
description="Some description"
183+
isDisabled={false}
184+
tone="urgent"
185+
headerControls="headerControl"
186+
theme="dark"
187+
secondaryHeader="Secondary Header"
188+
>
189+
Content
190+
</CollapsiblePanel>
191+
</Spec>
192+
<Spec label="regular (not condensed) - dark and urgent - hideExpansionControls">
193+
<CollapsiblePanel
194+
header={<CollapsiblePanel.Header>Header</CollapsiblePanel.Header>}
195+
description="Some description"
196+
isDisabled={false}
197+
hideExpansionControls={true}
198+
tone="urgent"
199+
headerControls="headerControl"
200+
theme="dark"
201+
secondaryHeader="Secondary Header"
202+
>
203+
Content
204+
</CollapsiblePanel>
205+
</Spec>
206+
<Spec label="regular (not condensed) - dark and urgent - isDisabled">
207+
<CollapsiblePanel
208+
header={<CollapsiblePanel.Header>Header</CollapsiblePanel.Header>}
209+
description="Some description"
210+
isDisabled={true}
211+
tone="urgent"
212+
headerControls="headerControl"
213+
theme="dark"
214+
secondaryHeader="Secondary Header"
215+
>
216+
Content
217+
</CollapsiblePanel>
218+
</Spec>
84219
</Suite>
85220
);

0 commit comments

Comments
 (0)