Set minimum width for a single distribution bar #200881
Assignees
Labels
Feature:Cloud-Security
Cloud Security related features
good first issue
low hanging fruit
Team:Cloud Security
Cloud Security team related
Milestone
Comments
maxcold
added
good first issue
|
Hello, I would like to contribute to this issue. Could you please assign it to me? |
|
Hello @samantha-t28, thanks for your continued interest in contributing to Kibana, I've assigned you to this task |
|
hey @opauloh, i want to work on this issue if its still open. |
and aslo please includes the steps to reproduce |
2 tasks
|
I wanted to let you know that I figured out how to mock the DistributionBar component. To make it easier for others, I also added a README file with instructions on how to run the Storybook for the DistributionBar component. I followed a similar approach to the one used in the data_table folder, where it explains how to run the Storybook for the data_table component. If you notice anything missing or feel there’s something that could be improved in the README, please let me know—I’d be happy to update it 🙂 |
opauloh
pushed a commit
that referenced
this issue
Nov 29, 2024
…2247) ## Summary - This pull request resolves [#200881](#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.  - 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.  **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):  - After the modification, the DistributionBar displayed correctly with even the smallest segments visible, confirming that the min-width is working as expected.  - 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)
|
Hi, @samantha-t28 apologies for the delay in replying to you, thank you for improving our documentation regarding Storybook, that was a great contribution! |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Nov 29, 2024
…stic#202247) ## Summary - This pull request resolves [elastic#200881](elastic#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.  - 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.  **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):  - After the modification, the DistributionBar displayed correctly with even the smallest segments visible, confirming that the min-width is working as expected.  - 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) (cherry picked from commit 50a2ffa)
|
Hello @opauloh, no worries at all! I’m happy I could contribute 🙂 |
kibanamachine
added a commit
that referenced
this issue
Nov 29, 2024
#202247) (#202366) # Backport This will backport the following commits from `main` to `8.x`: - [Set min-width for DistributionBar and added README for storybook (#202247)](#202247) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Samantha Tan","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-29T20:34:26Z","message":"Set min-width for DistributionBar and added README for storybook (#202247)\n\n## Summary\r\n- This pull request resolves\r\n[#200881](https://github.com/elastic/kibana/issues/200881)\r\nby setting a min-width of 10px for the DistributionBar component to\r\nprevent it from shrinking too small, ensuring a consistent and readable\r\nvisual representation for better usability.\r\n- Additionally, added a README file with instructions for running\r\nStorybook to visually inspect the DistributionBar, as the folder had no\r\ndocumentation before, improving the developer experience.\r\n\r\n## Screenshots:\r\n**Before**\r\n- The min-width of 10px was set, but small segments were not visible in\r\nthe DistributionBar.\r\n\r\n\r\n- The original mockStatsFindings with 'passed' set to 90 and 'failed'\r\nset to 10 did not visually reflect the min-width of 10px in the\r\nDistributionBar. The smallest segment was still not visible.\r\n\r\n\r\n**After**:\r\n\r\n- Temporarily modified the `mockStatsFindings` in\r\n`distribution_bar.stories.tsx` to simulate the DistributionBar with\r\nextreme values by setting the count for 'passed' to 9000 (highest) and\r\n'failed' to 1 (lowest):\r\n\r\n\r\n- After the modification, the DistributionBar displayed correctly with\r\neven the smallest segments visible, confirming that the min-width is\r\nworking as expected.\r\n\r\n\r\n- These results were captured in a screenshot for the PR, and no changes\r\nwere saved to the `distribution_bar.stories.tsx` file.\r\n\r\n### Checklist\r\n\r\nCheck the PR satisfies following conditions. \r\n\r\nReviewers should verify this PR satisfies this list as well.\r\n\r\n- [x]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas added for features that require explanation or tutorials\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"50a2ffa7f2ffe95e08d93c48eaccce0e32775cc4","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","💝community","v9.0.0","Team:Cloud Security","backport:prev-minor","backport:version","v8.18.0"],"title":"Set min-width for DistributionBar and added README for storybook","number":202247,"url":"https://github.com/elastic/kibana/pull/202247","mergeCommit":{"message":"Set min-width for DistributionBar and added README for storybook (#202247)\n\n## Summary\r\n- This pull request resolves\r\n[#200881](https://github.com/elastic/kibana/issues/200881)\r\nby setting a min-width of 10px for the DistributionBar component to\r\nprevent it from shrinking too small, ensuring a consistent and readable\r\nvisual representation for better usability.\r\n- Additionally, added a README file with instructions for running\r\nStorybook to visually inspect the DistributionBar, as the folder had no\r\ndocumentation before, improving the developer experience.\r\n\r\n## Screenshots:\r\n**Before**\r\n- The min-width of 10px was set, but small segments were not visible in\r\nthe DistributionBar.\r\n\r\n\r\n- The original mockStatsFindings with 'passed' set to 90 and 'failed'\r\nset to 10 did not visually reflect the min-width of 10px in the\r\nDistributionBar. The smallest segment was still not visible.\r\n\r\n\r\n**After**:\r\n\r\n- Temporarily modified the `mockStatsFindings` in\r\n`distribution_bar.stories.tsx` to simulate the DistributionBar with\r\nextreme values by setting the count for 'passed' to 9000 (highest) and\r\n'failed' to 1 (lowest):\r\n\r\n\r\n- After the modification, the DistributionBar displayed correctly with\r\neven the smallest segments visible, confirming that the min-width is\r\nworking as expected.\r\n\r\n\r\n- These results were captured in a screenshot for the PR, and no changes\r\nwere saved to the `distribution_bar.stories.tsx` file.\r\n\r\n### Checklist\r\n\r\nCheck the PR satisfies following conditions. \r\n\r\nReviewers should verify this PR satisfies this list as well.\r\n\r\n- [x]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas added for features that require explanation or tutorials\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"50a2ffa7f2ffe95e08d93c48eaccce0e32775cc4"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202247","number":202247,"mergeCommit":{"message":"Set min-width for DistributionBar and added README for storybook (#202247)\n\n## Summary\r\n- This pull request resolves\r\n[#200881](https://github.com/elastic/kibana/issues/200881)\r\nby setting a min-width of 10px for the DistributionBar component to\r\nprevent it from shrinking too small, ensuring a consistent and readable\r\nvisual representation for better usability.\r\n- Additionally, added a README file with instructions for running\r\nStorybook to visually inspect the DistributionBar, as the folder had no\r\ndocumentation before, improving the developer experience.\r\n\r\n## Screenshots:\r\n**Before**\r\n- The min-width of 10px was set, but small segments were not visible in\r\nthe DistributionBar.\r\n\r\n\r\n- The original mockStatsFindings with 'passed' set to 90 and 'failed'\r\nset to 10 did not visually reflect the min-width of 10px in the\r\nDistributionBar. The smallest segment was still not visible.\r\n\r\n\r\n**After**:\r\n\r\n- Temporarily modified the `mockStatsFindings` in\r\n`distribution_bar.stories.tsx` to simulate the DistributionBar with\r\nextreme values by setting the count for 'passed' to 9000 (highest) and\r\n'failed' to 1 (lowest):\r\n\r\n\r\n- After the modification, the DistributionBar displayed correctly with\r\neven the smallest segments visible, confirming that the min-width is\r\nworking as expected.\r\n\r\n\r\n- These results were captured in a screenshot for the PR, and no changes\r\nwere saved to the `distribution_bar.stories.tsx` file.\r\n\r\n### Checklist\r\n\r\nCheck the PR satisfies following conditions. \r\n\r\nReviewers should verify this PR satisfies this list as well.\r\n\r\n- [x]\r\n[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas added for features that require explanation or tutorials\r\n- [x] The PR description includes the appropriate Release Notes section,\r\nand the correct `release_note:*` label is applied per the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"50a2ffa7f2ffe95e08d93c48eaccce0e32775cc4"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Samantha Tan <[email protected]>
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this issue
Dec 9, 2024
…stic#202247) ## Summary - This pull request resolves [elastic#200881](elastic#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.  - 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.  **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):  - After the modification, the DistributionBar displayed correctly with even the smallest segments visible, confirming that the min-width is working as expected.  - 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)
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this issue
Dec 12, 2024
…stic#202247) ## Summary - This pull request resolves [elastic#200881](elastic#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.  - 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.  **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):  - After the modification, the DistributionBar displayed correctly with even the smallest segments visible, confirming that the min-width is working as expected.  - 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)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Motivation
See discussion for more information
We wish to give a single bar on the distribution bar chart a minimum width of 10px so that users can hover it over easily even when the number of items for this bar is very small
The component lives within
x-pack/packages/security-solution/distribution_barDefinition of done
Out of scope
Related tasks/epics
Team tag
@elastic/kibana-cloud-security-posture
The text was updated successfully, but these errors were encountered: