-
Notifications
You must be signed in to change notification settings - Fork 16
fix(action-bar): restrict collapse button to floating layout only #3521
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
base: main
Are you sure you want to change the base?
fix(action-bar): restrict collapse button to floating layout only #3521
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Copilot reviewed 1 out of 1 changed files in this pull request and generated no comments.
📝 WalkthroughWalkthroughThe pull request updates the condition within the Changes
Sequence Diagram(s)sequenceDiagram
participant UI as ActionBar UI
participant AB as ActionBar Component
UI ->> AB: Invoke renderCollapseExpandButton()
alt ActionBar is collapsible and has more than one action
alt layout is not "floating"
AB ->> AB: Render collapse/expand button
else layout is "floating"
AB ->> AB: Skip rendering
end
else
AB ->> AB: Skip rendering
end
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/components/action-bar/examples/action-bar-floating-with-collaps-button.tsxOops! Something went wrong! :( ESLint: 9.20.1 No files matching the pattern "src/components/action-bar/examples/action-bar-floating-with-collaps-button.tsx" were found. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (2)
🧰 Additional context used📓 Path-based instructions (3)`**/*.tsx`: Our `.tsx` files are typically using StencilJS, not React.
`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.
`src/components/**/examples/**/*.{ts,tsx}`: These files are an exception to the rule that all imports should use relative paths. When these example files import something that is p...
🔇 Additional comments (5)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3521/ |
if ( | ||
!this.collapsible || | ||
this.actions.length <= 1 || | ||
this.layout !== 'floating' | ||
) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I feel a bit unsure about having a prop, that only works when another prop is set to a certain state. This is what I was trying to communicate in the other issue as one of the reasons for reconsidering this design choice.
If you wanna keep this as a temporary solution for now, please update the documentations as well as documenting the prop itself as alpha and even perhaps private.
Like below:
/**
* When set to `true`, the action bar will be collapsible,
* but only when the `layout` prop is also set to `floating`.
*
* @private
* @alpha
*/
@Prop({ reflect: true })
public collapsible = false;
As you see, the updated docs feels a bit strange. But if we make it alpha
, it feels safer later to revert the changes.
Summary by CodeRabbit
Bug Fixes
New Features
Review:
Browsers tested:
(Check any that applies, it's ok to leave boxes unchecked if testing something didn't seem relevant.)
Windows:
Linux:
macOS:
Mobile: