From 3e0f408357697c8665c8c0bfa336e3772dacf84b Mon Sep 17 00:00:00 2001 From: Samantha Tan <96286575+samantha-t28@users.noreply.github.com> Date: Fri, 29 Nov 2024 12:34:26 -0800 Subject: [PATCH] Set min-width for DistributionBar and added README for storybook (#202247) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary - This pull request resolves [elastic/kibana#200881](https://github.com/elastic/kibana/issues/200881) by setting a min-width of 10px for the DistributionBar component to prevent it from shrinking too small, ensuring a consistent and readable visual representation for better usability. - Additionally, added a README file with instructions for running Storybook to visually inspect the DistributionBar, as the folder had no documentation before, improving the developer experience. ## Screenshots: **Before** - The min-width of 10px was set, but small segments were not visible in the DistributionBar. ![Screenshot 2024-11-27 at 5 08 13 PM](https://github.com/user-attachments/assets/6b74580d-28a4-429a-9029-0d212100d2a5) - The original mockStatsFindings with 'passed' set to 90 and 'failed' set to 10 did not visually reflect the min-width of 10px in the DistributionBar. The smallest segment was still not visible. ![Screenshot 2024-11-27 at 5 09 49 PM](https://github.com/user-attachments/assets/01be2f80-77e3-4805-b301-f05dc6e3436c) **After**: - Temporarily modified the `mockStatsFindings` in `distribution_bar.stories.tsx` to simulate the DistributionBar with extreme values by setting the count for 'passed' to 9000 (highest) and 'failed' to 1 (lowest): ![Screenshot 2024-11-27 at 5 10 49 PM](https://github.com/user-attachments/assets/7278f81b-174e-4df0-8209-6fb6a7a70f18) - After the modification, the DistributionBar displayed correctly with even the smallest segments visible, confirming that the min-width is working as expected. ![Screenshot 2024-11-27 at 5 10 23 PM](https://github.com/user-attachments/assets/95cfc3d4-d1aa-4a69-9d13-17143445dc7f) - These results were captured in a screenshot for the PR, and no changes were saved to the `distribution_bar.stories.tsx` file. ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --- .../security-solution/distribution_bar/README.md | 10 ++++++++++ .../distribution_bar/src/distribution_bar.tsx | 1 + 2 files changed, 11 insertions(+) create mode 100644 x-pack/packages/security-solution/distribution_bar/README.md diff --git a/x-pack/packages/security-solution/distribution_bar/README.md b/x-pack/packages/security-solution/distribution_bar/README.md new file mode 100644 index 0000000000000..51edea2dd1846 --- /dev/null +++ b/x-pack/packages/security-solution/distribution_bar/README.md @@ -0,0 +1,10 @@ +# Security Solution's Distribution Bar + +The DistributionBar component visually represents data distribution, such as critical, high, medium, and low alerts. + +## Storybook + +General look of the component can be checked visually running the following storybook: +`yarn storybook security_solution_packages` + +Note that all the interactions are mocked. \ No newline at end of file diff --git a/x-pack/packages/security-solution/distribution_bar/src/distribution_bar.tsx b/x-pack/packages/security-solution/distribution_bar/src/distribution_bar.tsx index f2d1099d17c50..c4395ba1d13d1 100644 --- a/x-pack/packages/security-solution/distribution_bar/src/distribution_bar.tsx +++ b/x-pack/packages/security-solution/distribution_bar/src/distribution_bar.tsx @@ -36,6 +36,7 @@ const useStyles = () => { position: relative; border-radius: 2px; height: 5px; + min-width: 10px; // prevents bar from shrinking too small `, empty: css` background-color: ${euiTheme.colors.lightShade};