Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiResizableContainer] Needs isCollapsed option #4736

Open
KishorBudhathoki10 opened this issue Apr 20, 2021 · 10 comments
Open

[EuiResizableContainer] Needs isCollapsed option #4736

KishorBudhathoki10 opened this issue Apr 20, 2021 · 10 comments
Labels
good first issue help wanted The EUI team is looking for community members to pick up and implement this issue

Comments

@KishorBudhathoki10
Copy link

It will be nice to have a props like isCollapsed for Resizeable Panel. I have a page where I have a resizable component. But when I go from one page to another the resizeable panel goes back to its previous state. I can manage the size of the panels but not collapsible state.

@KishorBudhathoki10 KishorBudhathoki10 changed the title isCollapsed option for Resizeable Panel isCollapsed option for Resizeable Panel (Feature Request) Apr 20, 2021
@cchaos cchaos changed the title isCollapsed option for Resizeable Panel (Feature Request) [EuiResizablePanel] Needs isCollapsed option Apr 20, 2021
@cchaos cchaos changed the title [EuiResizablePanel] Needs isCollapsed option [EuiResizableContainer] Needs isCollapsed option Apr 20, 2021
@cchaos
Copy link
Contributor

cchaos commented Apr 20, 2021

So there actually should be a way to handle this already since you can trigger the collapsed state from outside of the container. I took the last example and added a useEffect to trigger the onChange even initially setting the id of a collapsed panel to 2. https://codesandbox.io/s/interesting-microservice-tkfu1

I'm not 100% sure this is the correct way, but it seems to work. @thompsongl Might have more info.

@cchaos cchaos added ⚠️ needs validation For bugs that need confirmation as to whether they're reproducible and removed feature request labels Apr 20, 2021
@thompsongl
Copy link
Contributor

thompsongl commented Apr 20, 2021

The useEffect method will work, but it's reasonable that there should be an isCollapsed and/or initialIsCollapsed prop on EuiResizablePanel.

Edit: I think initialIsCollapsed makes the most sense. The essential use case being to re-enable the previous state on mount.

@KishorBudhathoki10
Copy link
Author

KishorBudhathoki10 commented Apr 20, 2021

@cchaos I saw in the examples that using buttons we can manage to hide the panel. But, to keep it collapsed with the open icon it does not seem to work. It seems that the collapsed panel gets the width of 33.33% as a inline style. Maybe cause of flex but not sure. You can check it in this link https://codesandbox.io/s/billowing-night-wsw1p.

In the code from sand box that I linked, if you changed the useEffect to:

 useEffect(() => {
    setTimeout(() => {
      onChange(1);
    }, 0);
  }, []);

It seems to work but with a glitch.

@thompsongl I also think initialIsCollapsed makes lot of sense.

@github-actions
Copy link

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

@github-actions
Copy link

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.

@darnautov
Copy link

Thanks for reopening! We came up with a use-case when a resizable container with the isCollapsed prop would come in handy because we'd like to preserve it from the localStorage.

@github-actions
Copy link

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

@github-actions
Copy link

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.

@cee-chen cee-chen added good first issue skip-stale-check help wanted The EUI team is looking for community members to pick up and implement this issue and removed stale-issue stale-issue-closed labels Oct 24, 2022
@cee-chen cee-chen reopened this Oct 24, 2022
@github-actions
Copy link

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

@cee-chen cee-chen removed skip-stale-check ⚠️ needs validation For bugs that need confirmation as to whether they're reproducible labels Apr 24, 2023
Copy link

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue help wanted The EUI team is looking for community members to pick up and implement this issue
Projects
None yet
Development

No branches or pull requests

6 participants