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(accordion): pure css, inverted, basic, right, tree, nested fixes #2197

Merged
merged 8 commits into from
Jan 8, 2022

Conversation

lubber-de
Copy link
Member

@lubber-de lubber-de commented Jan 7, 2022

Description

This MR enhances the accordion module:

  • Pure CSS variant now possible using the details/summary tag (yes, IE/old Edge do not support that, that's ok for 2.9.0 and 2022 and you can still use the JS version which works there) 😉 .
  • inverted styled variant
  • tree variant (for proper indentation which a tree view needs) (also works as CSS only!)
  • new right dropdown icon variant, to be able to place the dropdown icon to the right (just as in accordion menu already). Usefull for example when used inside message
  • fixed the right dropdown icon (also in accordion menu)
  • fixed possible usage of title or content elements inside an accordion which are supposed to be parts of different elements
  • basic styled variant which is equal to styled for title handling only (so no borders and always transparent background)

Testcase

https://jsfiddle.net/lubber/4k5y0cjL/38/

Screenshots

accordiontree

Closes

#2278
Semantic-Org/Semantic-UI#2790
Semantic-Org/Semantic-UI#4928
Semantic-Org/Semantic-UI#5238
Semantic-Org/Semantic-UI#5330
Semantic-Org/Semantic-UI#6578
Semantic-Org/Semantic-UI#7048

@lubber-de lubber-de added type/bug Any issue which is a bug or PR which fixes a bug type/feat Any feature requests or improvements state/awaiting-reviews Pull requests which are waiting for reviews tag/sui-issue Taken from an existing Issue/PR of SUI tag/breaking-change Any pull request which is waiting for a breaking change release labels Jan 7, 2022
@lubber-de lubber-de added this to the 2.9.0 milestone Jan 7, 2022
@lubber-de lubber-de added the state/awaiting-docs Pull requests which need doc changes/additions label Jan 7, 2022
@lubber-de lubber-de changed the title [Accordion] Pure CSS, inverted styling, right dropdown , nested fixes [Accordion] Pure CSS, inverted styled, right dropdown , tree variant, nested fixes Jan 7, 2022
@lubber-de lubber-de changed the title [Accordion] Pure CSS, inverted styled, right dropdown , tree variant, nested fixes [Accordion] Pure CSS, inverted styled, basic styled, right dropdown , tree variant, nested fixes Jan 7, 2022
Copy link
Contributor

@exoego exoego left a comment

Choose a reason for hiding this comment

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

This is a huge enhancement to Accordion module 🥇

@lubber-de lubber-de changed the title [Accordion] Pure CSS, inverted styled, basic styled, right dropdown , tree variant, nested fixes feat(accordion): pure css, inverted, basic, right, tree, nested fixes Jan 8, 2022
@lubber-de lubber-de merged commit adc8d1a into fomantic:develop Jan 8, 2022
@lubber-de lubber-de deleted the feat/cssOnlyAccordion branch January 8, 2022 17:50
@lubber-de lubber-de removed the state/awaiting-reviews Pull requests which are waiting for reviews label Jan 8, 2022
lubber-de added a commit that referenced this pull request Jan 8, 2022
Some content inside toasts should remain clickable without closing the toast. (even if closeOnClick is true)
While this was already hardcoded for a tags if fails for possible other tags like accordion or details (Especially when used together with the new #2197 😉 )
The previously hardcoded selector is not a customizable classname setting.

Btw: input is not needed to be set here, because any kind of input inside a toast will already set the whole toast to not closing when clicked (because it is expected to be clicked into the input fields).
The new setting here is supposed for elements which can be clicked, but are not expected to.
@lubber-de
Copy link
Member Author

Docs added by fomantic/Fomantic-UI-Docs#334

@lubber-de lubber-de added state/has-docs A issue/PR which requires documentation changes and has the corresponding PR open in the docs repo and removed state/awaiting-docs Pull requests which need doc changes/additions labels Mar 6, 2022
lubber-de added a commit to fomantic/Fomantic-UI-Docs that referenced this pull request Mar 9, 2022
Added example for compact and very compact variants as of fomantic/Fomantic-UI#2051
Added examples for tree, pure css, basic styled and right icon accordion as of fomantic/Fomantic-UI#2197
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
state/has-docs A issue/PR which requires documentation changes and has the corresponding PR open in the docs repo tag/breaking-change Any pull request which is waiting for a breaking change release tag/sui-issue Taken from an existing Issue/PR of SUI type/bug Any issue which is a bug or PR which fixes a bug type/feat Any feature requests or improvements
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants