Skip to content

Conversation

@kgeller
Copy link
Contributor

@kgeller kgeller commented Jul 31, 2025

When I was going through and adding the carousel to the integration-docs, I noticed a couple of things that I thought could be better, so this PR contains those updates

  1. Switches from fixed-height to max-height. Due to some images being smaller then the fixed height, we had too much whitespace, so I took a more adaptive approach and switched to the max-height.
  2. Due to the switch from fixed to max height, I renamed the default and auto setting to be instead called none to better fit the updated setting name.
  3. Switches when you click on the image from opening a new tab to opening a modal with the image expanded to be consistent with the regular Image directive.
  4. Now that the image height isn't fixed, I instead fix the controls at 40% from the top of the smallest image (there can be quite a range in sizing).
  5. Fixed indicators location to be below the images.

Note: this is technically a breaking change with the settings name update, but with it being so new I feel like it's fine.

Test directives
::::{carousel}
:max-height: medium
:::{image} https://epr.elastic.co/package/1password/1.32.0/img/1password-signinattempts-screenshot.png
:alt: Sign-in attempts
:title: Sign-in attempts
:::
:::{image} https://epr.elastic.co/package/1password/1.32.0/img/1password-itemusages-screenshot.png
:alt: Item usages
:title: Item usages
:::
::::


::::{carousel}
:max-height: medium
:::{image} https://epr.elastic.co/package/bitwarden/1.17.0/img/bitwarden-event-dashboard.png
:alt: Event dashboard
:title: Event dashboard
:::
:::{image} https://epr.elastic.co/package/bitwarden/1.17.0/img/bitwarden-group-and-collection-dashboard.png
:alt: Group and Collection dashboard
:title: Group and Collection dashboard
:::
:::{image} https://epr.elastic.co/package/bitwarden/1.17.0/img/bitwarden-member-dashboard.png
:alt: Member dashboard
:title: Member dashboard
:::
:::{image} https://epr.elastic.co/package/bitwarden/1.17.0/img/bitwarden-policy-dashboard.png
:alt: Policy dashboard
:title: Policy dashboard
:::
::::


::::{carousel}
:max-height: medium
:::{image} https://epr.elastic.co/package/armis/0.3.0/img/armis-alerts.png
:alt: Alerts Dashboard
:title: Alerts Dashboard
:::
:::{image} https://epr.elastic.co/package/armis/0.3.0/img/armis-devices.png
:alt: Devices Dashboard
:title: Devices Dashboard
:::
:::{image} https://epr.elastic.co/package/armis/0.3.0/img/armis-vulnerabilities.png
:alt: Vulnerabilities Dashboard
:title: Vulnerabilities Dashboard
:::
::::

[After] Screen recording with a couple examples from the integration docs dashboards

Screen.Recording.2025-07-31.at.10.14.01.AM.mov

[Before] Screen recording with existing carousel functionality from generated output from integration-docs PR

Screen.Recording.2025-07-31.at.10.31.10.AM.mov

Relates https://github.com/elastic/integration-experience/issues/83

@kgeller kgeller requested review from a team as code owners July 31, 2025 14:34
@Mpdreamz Mpdreamz added the fix label Aug 1, 2025
@kgeller
Copy link
Contributor Author

kgeller commented Aug 1, 2025

@reakaleek @Mpdreamz Thank you for approving and adding the label!

Would one of you mind merging as well 🙏 ? I don't have permissions (especially with the failing CI build check)

@reakaleek reakaleek merged commit 58fe884 into elastic:main Aug 1, 2025
17 of 18 checks passed
@kgeller kgeller deleted the carousel-updates branch August 1, 2025 14:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants