diff --git a/.changeset/accordion-plus-toggle-rotate.md b/.changeset/accordion-plus-toggle-rotate.md new file mode 100644 index 000000000..a4223d638 --- /dev/null +++ b/.changeset/accordion-plus-toggle-rotate.md @@ -0,0 +1,6 @@ +--- +"@tabler/core": patch +"@tabler/docs": patch +--- + +Fixed `.accordion-button-toggle-plus` with sprite icons by rotating the plus into a close icon instead of hiding a path. diff --git a/core/scss/ui/_accordion.scss b/core/scss/ui/_accordion.scss index 63a3a73a5..65e0736d0 100644 --- a/core/scss/ui/_accordion.scss +++ b/core/scss/ui/_accordion.scss @@ -96,17 +96,14 @@ color: var(--accordion-active-color); transform: rotate(-180deg); } - - path { - transition: $transition-time opacity; - } } +// A plus turns into a close icon by rotating a quarter turn. Rotating the +// toggle instead of hiding an svg path works with every icon source — inline +// svg, a sprite ``, an icon font (#2606). .accordion-button-toggle-plus { .accordion-button:not(.collapsed) & { - path:first-child { - opacity: 0; - } + transform: rotate(45deg); } } diff --git a/docs/content/ui/components/accordion.mdx b/docs/content/ui/components/accordion.mdx index 6bef0f4d0..09f7d94ad 100644 --- a/docs/content/ui/components/accordion.mdx +++ b/docs/content/ui/components/accordion.mdx @@ -21,7 +21,7 @@ classnames: - class: accordion-button-toggle desc: Chevron indicator on the toggle - class: accordion-button-toggle-plus - desc: Plus and minus indicator instead of a chevron + desc: Plus indicator that turns into a close icon when open modifier: - class: accordion-flush desc: Removes the outer border and rounding, to sit flush in a parent @@ -75,7 +75,7 @@ This preview shows the base structure with one expanded section. ### Plus toggle icon -Use `.accordion-button-toggle-plus` to hide the first SVG path when expanded. This pattern is useful for plus-to-minus toggles. +Use `.accordion-button-toggle-plus` with a `plus` icon. When the section opens, the toggle rotates a quarter turn and the plus becomes a close icon. It rotates the whole toggle, so it works with an inline SVG, a sprite `` or an icon font.