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

feat(side-panel): pinnable and inline side panel #1615

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

Jinnie
Copy link
Contributor

@Jinnie Jinnie commented Nov 12, 2024

PR Checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)
  • If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Copy link
Contributor

github-actions bot commented Nov 12, 2024

👋 @Jinnie,

  • 🙏 The Clarity team thanks you for opening a pull request
  • 🎉 The build for this PR has succeeded
  • 🔍 The PR is now ready for review
  • 🍿 In the meantime, view a preview of this PR
  • 🖐 You can always follow up here. If you're a VMware employee, you can also reach us on our internal Clarity Support space

Thank you,

🤖 Clarity Release Bot

@Jinnie Jinnie self-assigned this Nov 12, 2024
Copy link
Contributor

This PR introduces visual changes: 2eb00bf
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout jinnie/sidebar-pinnable
git fetch https://github.com/vmware-clarity/ng-clarity.git 2eb00bfcfdf94174121446cfbd56c539be7b0f72
git cherry-pick 2eb00bfcfdf94174121446cfbd56c539be7b0f72
git push

@Jinnie Jinnie force-pushed the jinnie/sidebar-pinnable branch from 1af7f2c to 90483e8 Compare November 26, 2024 11:08
Copy link
Contributor

This PR introduces visual changes: c942c34
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout jinnie/sidebar-pinnable
git fetch https://github.com/vmware-clarity/ng-clarity.git c942c34f1318240aaafbe64823c3eaab96bdd014
git cherry-pick c942c34f1318240aaafbe64823c3eaab96bdd014
git push

@Jinnie Jinnie marked this pull request as ready for review November 26, 2024 11:35
@kevinbuhmann kevinbuhmann changed the title feat: pinnable and inline sidebar feat(side-panel): pinnable and inline side panel Nov 26, 2024
Copy link
Contributor

@valentin-mladenov valentin-mladenov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In Storybook dynamically changed clrSidePanelSize while pinned doesn't affect/notify the container to resize itself.

projects/angular/src/modal/_modal.clarity.scss Outdated Show resolved Hide resolved
projects/angular/src/modal/modal.ts Outdated Show resolved Hide resolved
projects/angular/src/modal/modal.ts Outdated Show resolved Hide resolved
Copy link
Contributor

github-actions bot commented Dec 2, 2024

This PR introduces visual changes: a966cd8
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout jinnie/sidebar-pinnable
git fetch https://github.com/vmware-clarity/ng-clarity.git a966cd83e7e4e1564fcad7a0ff1cf86fb6891fd8
git cherry-pick a966cd83e7e4e1564fcad7a0ff1cf86fb6891fd8
git push

Copy link
Contributor

github-actions bot commented Dec 3, 2024

This PR introduces visual changes: 78f0b1a
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout jinnie/sidebar-pinnable
git fetch https://github.com/vmware-clarity/ng-clarity.git 78f0b1aea629139f1bf15151c1361bea3e34c990
git cherry-pick 78f0b1aea629139f1bf15151c1361bea3e34c990
git push

Copy link
Contributor

@valentin-mladenov valentin-mladenov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check my comments regarding side-panel logic in modal.

Comment on lines +31 to +39
<button
type="button"
[attr.aria-label]="commonStrings.keys.sidePanelPin"
class="pinnable"
*ngIf="pinnable"
(click)="togglePinned()"
>
<cds-icon [attr.shape]="pinned ? 'unpin' : 'pin'"></cds-icon>
</button>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make no sense side-panel logic to be inside modal.

Comment on lines +110 to +124
get pinned(): boolean {
return this._pinned;
}

set pinned(pinned: boolean) {
if (this.pinnable) {
this._pinned = pinned;
if (pinned) {
this.displaySideBySide();
} else {
this.displayOverlapping();
}
}
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make no sense side-panel logic to be inside modal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants