Skip to content
Snippets Groups Projects

feat(alert): implement alert component

Merged Mark Florian requested to merge 454-add-alert-component into master

This implements the alert component, described by #454 (closed).

Old description

This implements the alert component, described by #454 (closed), with the exception of the correct variant-specific icons.

Currently, intentionally-ugly placeholder icons are rendered instead, since they can only be correctly implemented once #98 (closed) is resolved. This is tracked in a follow up issue: #491 (closed).

Screenshots

alert_3

alert_variants_4

Old screenshots

alert_2

alert_variants_2

Older screenshots

alert

alert_variants

TODO

Edited by Mark Florian

Merge request reports

Loading
Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
  • Mark Florian resolved all threads

    resolved all threads

  • Mark Florian added 1 commit

    added 1 commit

    • fb86a07a - Apply suggestion to documentation/components_documentation.js

    Compare with previous version

  • Mark Florian
  • Mark Florian
  • Mark Florian
  • Mark Florian
  • Mark Florian
  • Mark Florian
  • Mark Florian
  • Mark Florian
  • Great work @markrian! This is looking really good! :thumbsup: I left a few minor comments/questions. Back to you!

  • mentioned in issue gitlab#22992 (closed)

  • mentioned in merge request gitlab!18369 (merged)

  • Mark Florian changed the description

    changed the description

  • Mark Florian added 64 commits

    added 64 commits

    Compare with previous version

  • Mark Florian changed the description

    changed the description

  • Mark Florian added 5 commits

    added 5 commits

    • 37b5ca92 - Document alert visibility/dismissal usage
    • 5d378e75 - Use design-compliant gl-new-button
    • 641a24ad - Make dismiss aria-label configurable
    • 4558f104 - Add alert component tests
    • c4ca29c3 - Preserve styling with GitLab CSS bundle

    Compare with previous version

  • Mark Florian changed the description

    changed the description

    • Author Maintainer
      Resolved by Paul Gascou-Vaillancourt

      @pgascouvaillancourt, would you give this another review pass, please?

      It turns out this is blocked by #98 (closed), but it's now otherwise pretty close to being ready.

      I've updated the styles to fight the leakage from the GitLab CSS bundle, but I'm finding the fonts are different. Other components that are marked followsDesignSystem: true (e.g., tabs) also appear to suffer from this, but they don't seem to have failed the test:visual:gitlab job. Is that expected?

      Finally, what's the recommended approach for stories and examples? If I understand correctly, visual regression snapshots are taken from stories, whereas the examples are used in design.gitlab.com. So both have value, but it seems wasteful to duplicate code between them.

  • Mark Florian added 3 commits

    added 3 commits

    • 7641e8e9 - Update alert documentation
    • b6a095a8 - Simplify common class attribute assignment
    • 71d2b243 - Improve readability of tests

    Compare with previous version

  • Mark Florian added 25 commits

    added 25 commits

    • 71d2b243...1555d4c6 - 13 commits from branch master
    • d5b23aa2 - feat(alert): Implement alert component
    • ee38700c - Don't use new-style buttons
    • 29ae8496 - Fix eslint errors
    • d5eec811 - Document alert visibility/dismissal usage
    • d0cad2a8 - Use design-compliant gl-new-button
    • 6e452658 - Make dismiss aria-label configurable
    • 7e698a10 - Add alert component tests
    • be68ef67 - Preserve styling with GitLab CSS bundle
    • c95c3bf3 - Update alert documentation
    • fbae0212 - Simplify common class attribute assignment
    • b9360a13 - Improve readability of tests
    • c9302413 - Fix dismiss icon alignment with GitLab CSS

    Compare with previous version

  • Mark Florian changed the description

    changed the description

  • Author Maintainer

    If you'd be so kind to give this another pass, @pgascouvaillancourt! :smile:

  • Mark Florian added 23 commits

    added 23 commits

    • c9302413...bcce2e95 - 9 commits from branch master
    • d77a551a - feat(alert): Implement alert component
    • dfa30d44 - Don't use new-style buttons
    • b89801be - Fix eslint errors
    • 5337651e - Document alert visibility/dismissal usage
    • eba1c1d9 - Use design-compliant gl-new-button
    • 9b9f27cc - Make dismiss aria-label configurable
    • e552562a - Add alert component tests
    • 1c98a16e - Preserve styling with GitLab CSS bundle
    • 65d9c2ea - Update alert documentation
    • 7cc95c97 - Simplify common class attribute assignment
    • a7dcf4c9 - Improve readability of tests
    • 24f0dff5 - Fix dismiss icon alignment with GitLab CSS
    • a94599c3 - Reformat and fix after rebase
    • ec6668e9 - Remove superfluous mixin

    Compare with previous version

  • Mark Florian added 2 commits

    added 2 commits

    Compare with previous version

  • Paul Gascou-Vaillancourt approved this merge request

    approved this merge request

  • Mark Florian marked the checklist item Add another story or two (for visual regression testing) as completed

    marked the checklist item Add another story or two (for visual regression testing) as completed

  • Andy Volpe approved this merge request

    approved this merge request

  • Mark Florian added 29 commits

    added 29 commits

    • 05885e6a...d97435ea - 12 commits from branch master
    • 0d06ad3d - feat(alert): Implement alert component
    • 7171e58f - Don't use new-style buttons
    • baec812c - Fix eslint errors
    • 15da1729 - Document alert visibility/dismissal usage
    • a8b189fc - Use design-compliant gl-new-button
    • 6e58e415 - Make dismiss aria-label configurable
    • 0878d118 - Add alert component tests
    • 66bb25bc - Preserve styling with GitLab CSS bundle
    • 6523becf - Update alert documentation
    • cf34db80 - Simplify common class attribute assignment
    • 887fb08e - Improve readability of tests
    • 9e0573e2 - Fix dismiss icon alignment with GitLab CSS
    • 8c236e93 - Reformat and fix after rebase
    • c3b52bdb - Remove superfluous mixin
    • 86d2b8ef - Fix eslint warning
    • 4a87b650 - Add two more alert stories
    • b0ed049d - Use placeholder SVG icons for now

    Compare with previous version

  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Loading
  • Please register or sign in to reply
    Loading