primer_view_components 0.2.0 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (120) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +18 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list.css +1 -1
  8. data/app/components/primer/alpha/action_list.css.json +1 -0
  9. data/app/components/primer/alpha/action_list.css.map +1 -1
  10. data/app/components/primer/alpha/action_list.pcss +45 -42
  11. data/app/components/primer/alpha/auto_complete.css +1 -1
  12. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  13. data/app/components/primer/alpha/auto_complete.pcss +10 -10
  14. data/app/components/primer/alpha/banner.css +1 -1
  15. data/app/components/primer/alpha/banner.css.map +1 -1
  16. data/app/components/primer/alpha/banner.pcss +16 -16
  17. data/app/components/primer/alpha/button_marketing.css +1 -1
  18. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  19. data/app/components/primer/alpha/button_marketing.pcss +9 -9
  20. data/app/components/primer/alpha/dialog.css +1 -1
  21. data/app/components/primer/alpha/dialog.css.map +1 -1
  22. data/app/components/primer/alpha/dialog.pcss +9 -9
  23. data/app/components/primer/alpha/dropdown.css +1 -1
  24. data/app/components/primer/alpha/dropdown.css.map +1 -1
  25. data/app/components/primer/alpha/dropdown.pcss +16 -16
  26. data/app/components/primer/alpha/layout.css +1 -1
  27. data/app/components/primer/alpha/layout.css.map +1 -1
  28. data/app/components/primer/alpha/layout.pcss +3 -3
  29. data/app/components/primer/alpha/menu.css +1 -1
  30. data/app/components/primer/alpha/menu.css.map +1 -1
  31. data/app/components/primer/alpha/menu.pcss +13 -13
  32. data/app/components/primer/alpha/nav_list/heading.rb +36 -0
  33. data/app/components/primer/alpha/nav_list.rb +16 -9
  34. data/app/components/primer/alpha/overlay.css +1 -1
  35. data/app/components/primer/alpha/overlay.css.json +3 -2
  36. data/app/components/primer/alpha/overlay.css.map +1 -1
  37. data/app/components/primer/alpha/overlay.html.erb +8 -6
  38. data/app/components/primer/alpha/overlay.pcss +9 -4
  39. data/app/components/primer/alpha/overlay.rb +2 -3
  40. data/app/components/primer/alpha/segmented_control.css +1 -1
  41. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  42. data/app/components/primer/alpha/segmented_control.pcss +6 -6
  43. data/app/components/primer/alpha/tab_nav.css +1 -1
  44. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  45. data/app/components/primer/alpha/tab_nav.pcss +10 -10
  46. data/app/components/primer/alpha/text_field.css +1 -1
  47. data/app/components/primer/alpha/text_field.css.map +1 -1
  48. data/app/components/primer/alpha/text_field.pcss +38 -38
  49. data/app/components/primer/alpha/toggle_switch.css +1 -1
  50. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  51. data/app/components/primer/alpha/toggle_switch.d.ts +1 -0
  52. data/app/components/primer/alpha/toggle_switch.js +11 -4
  53. data/app/components/primer/alpha/toggle_switch.pcss +23 -23
  54. data/app/components/primer/alpha/toggle_switch.ts +9 -2
  55. data/app/components/primer/alpha/tooltip.rb +13 -13
  56. data/app/components/primer/alpha/underline_nav.css +1 -1
  57. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  58. data/app/components/primer/alpha/underline_nav.pcss +15 -15
  59. data/app/components/primer/anchored_position.js +1 -3
  60. data/app/components/primer/anchored_position.ts +1 -15
  61. data/app/components/primer/beta/avatar.css +1 -1
  62. data/app/components/primer/beta/avatar.css.map +1 -1
  63. data/app/components/primer/beta/avatar.pcss +2 -2
  64. data/app/components/primer/beta/avatar_stack.css +1 -1
  65. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  66. data/app/components/primer/beta/avatar_stack.pcss +10 -10
  67. data/app/components/primer/beta/blankslate.css +1 -1
  68. data/app/components/primer/beta/blankslate.css.map +1 -1
  69. data/app/components/primer/beta/blankslate.pcss +4 -4
  70. data/app/components/primer/beta/border_box.css +1 -1
  71. data/app/components/primer/beta/border_box.css.map +1 -1
  72. data/app/components/primer/beta/border_box.pcss +31 -31
  73. data/app/components/primer/beta/breadcrumbs.css +1 -1
  74. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  75. data/app/components/primer/beta/breadcrumbs.pcss +2 -2
  76. data/app/components/primer/beta/button.css +1 -1
  77. data/app/components/primer/beta/button.css.map +1 -1
  78. data/app/components/primer/beta/button.pcss +70 -70
  79. data/app/components/primer/beta/counter.css +1 -1
  80. data/app/components/primer/beta/counter.css.map +1 -1
  81. data/app/components/primer/beta/counter.pcss +7 -7
  82. data/app/components/primer/beta/flash.css +1 -1
  83. data/app/components/primer/beta/flash.css.map +1 -1
  84. data/app/components/primer/beta/flash.pcss +19 -19
  85. data/app/components/primer/beta/label.css +1 -1
  86. data/app/components/primer/beta/label.css.map +1 -1
  87. data/app/components/primer/beta/label.pcss +23 -23
  88. data/app/components/primer/beta/link.css +1 -1
  89. data/app/components/primer/beta/link.css.map +1 -1
  90. data/app/components/primer/beta/link.pcss +8 -8
  91. data/app/components/primer/beta/popover.css +1 -1
  92. data/app/components/primer/beta/popover.css.map +1 -1
  93. data/app/components/primer/beta/popover.pcss +10 -10
  94. data/app/components/primer/beta/progress_bar.css +1 -1
  95. data/app/components/primer/beta/progress_bar.css.map +1 -1
  96. data/app/components/primer/beta/progress_bar.pcss +1 -1
  97. data/app/components/primer/beta/state.css +1 -1
  98. data/app/components/primer/beta/state.css.map +1 -1
  99. data/app/components/primer/beta/state.pcss +8 -8
  100. data/app/components/primer/beta/subhead.css +1 -1
  101. data/app/components/primer/beta/subhead.css.map +1 -1
  102. data/app/components/primer/beta/subhead.pcss +3 -3
  103. data/app/components/primer/beta/timeline_item.css +1 -1
  104. data/app/components/primer/beta/timeline_item.css.map +1 -1
  105. data/app/components/primer/beta/timeline_item.pcss +13 -13
  106. data/lib/postcss_mixins/activeIndicatorLine.pcss +1 -1
  107. data/lib/postcss_mixins/focusBoxShadowInset.pcss +2 -2
  108. data/lib/postcss_mixins/focusOutline.pcss +1 -1
  109. data/lib/postcss_mixins/focusOutlineOnEmphasis.pcss +2 -2
  110. data/lib/postcss_mixins/targetBoxShadow.pcss +3 -3
  111. data/lib/primer/view_components/linters/accessibility.yml +7 -0
  112. data/lib/primer/view_components/linters/argument_mappers/base.rb +2 -2
  113. data/lib/primer/view_components/linters/base_linter.rb +2 -12
  114. data/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb +2 -2
  115. data/lib/primer/view_components/linters/helpers/rule_helpers.rb +39 -0
  116. data/lib/primer/view_components/linters/tooltipped_migration.rb +37 -0
  117. data/lib/primer/view_components/version.rb +1 -1
  118. data/previews/primer/alpha/nav_list_preview.rb +6 -4
  119. data/previews/primer/alpha/overlay_preview.rb +11 -0
  120. metadata +6 -2
@@ -1 +1 @@
1
- .TimelineItem{display:flex;margin-left:var(--stack-gap-normal,1rem);padding:var(--stack-padding-normal,1rem) 0;position:relative}.TimelineItem:before{background-color:var(--color-border-muted);bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick,max(2px,.125rem))}.TimelineItem:target .TimelineItem-badge{border-color:var(--color-accent-emphasis);box-shadow:0 0 .2em var(--color-accent-muted)}.TimelineItem-badge{align-items:center;background-color:var(--color-timeline-badge-bg);border:var(--borderWidth-thick,max(2px,.125rem)) solid var(--color-canvas-default);border-radius:50%;color:var(--color-fg-muted);display:flex;flex-shrink:0;height:var(--control-medium-size,2rem);justify-content:center;margin-left:calc(var(--control-medium-size,2rem)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed,.5rem);position:relative;width:var(--control-medium-size,2rem);z-index:1}.TimelineItem-badge--success{background-color:var(--color-success-emphasis);border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;color:var(--color-fg-on-emphasis)}.TimelineItem-body{color:var(--color-fg-muted);flex:auto;margin-top:var(--base-size-4,.25rem);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--color-canvas-default);border:0;border-top:var(--borderWidth-thicker,max(4px,.25rem)) solid var(--color-border-default);height:var(--stack-gap-spacious,1.5rem);margin:0;margin-bottom:calc(var(--stack-gap-normal,1rem)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal,1rem)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--color-canvas-default);border:0;color:var(--color-fg-muted);height:var(--base-size-16,1rem);margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}
1
+ .TimelineItem{display:flex;margin-left:var(--stack-gap-normal,1rem);padding:var(--stack-padding-normal,1rem) 0;position:relative}.TimelineItem:before{background-color:var(--borderColor-muted,var(--color-neutral-muted));bottom:0;content:"";display:block;left:0;position:absolute;top:0;width:var(--borderWidth-thick,max(2px,.125rem))}.TimelineItem:target .TimelineItem-badge{border-color:var(--borderColor-accent-emphasis,var(--color-accent-fg));box-shadow:0 0 .2em var(--borderColor-accent-muted,var(--color-accent-muted))}.TimelineItem-badge{align-items:center;background-color:var(--timelineBadge-bgColor,var(--color-timeline-badge-bg));border:var(--borderWidth-thick,max(2px,.125rem)) solid var(--bgColor-default,var(--color-canvas-default));border-radius:50%;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;flex-shrink:0;height:var(--control-medium-size,2rem);justify-content:center;margin-left:calc(var(--control-medium-size,2rem)/-2 + 1px);margin-right:var(--controlStack-medium-gap-condensed,.5rem);position:relative;width:var(--control-medium-size,2rem);z-index:1}.TimelineItem-badge--success{background-color:var(--bgColor-success-emphasis,var(--color-success-fg));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.TimelineItem-body{color:var(--fgColor-muted,var(--color-fg-muted));flex:auto;margin-top:var(--base-size-4,.25rem);max-width:100%;min-width:0}.TimelineItem-avatar{left:-72px;position:absolute;z-index:1}.TimelineItem-break{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;border-top:var(--borderWidth-thicker,max(4px,.25rem)) solid var(--borderColor-default,var(--color-border-default));height:var(--stack-gap-spacious,1.5rem);margin:0;margin-bottom:calc(var(--stack-gap-normal,1rem)*-1);margin-left:-56px;position:relative;z-index:1}.TimelineItem--condensed{padding-bottom:0;padding-top:var(--base-size-4,.25rem)}.TimelineItem--condensed:last-child{padding-bottom:var(--stack-gap-normal,1rem)}.TimelineItem--condensed .TimelineItem-badge{background-color:var(--bgColor-default,var(--color-canvas-default));border:0;color:var(--fgColor-muted,var(--color-fg-muted));height:var(--base-size-16,1rem);margin-bottom:var(--base-size-8,.5rem);margin-top:var(--base-size-8,.5rem)}
@@ -1 +1 @@
1
- {"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,wCAAoC,CADpC,0CAAsC,CAFtC,iBAqBF,CAfE,qBAQE,0CAA2C,CAL3C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,+CAGF,CAEA,yCACE,yCAA0C,CAC1C,6CACF,CAGF,oBASE,kBAAmB,CACnB,+CAAgD,CAChD,kFAAkE,CAClE,iBAAkB,CAJlB,2BAA4B,CAL5B,YAAa,CAWb,aAAc,CATd,sCAAkC,CAQlC,sBAAuB,CANvB,0DAAwD,CADxD,2DAAsD,CALtD,iBAAkB,CAGlB,qCAAiC,CAFjC,SAaF,CAEA,6BAEE,8CAA+C,CAC/C,4DAAiD,CAFjD,iCAGF,CAEA,mBAIE,2BAA4B,CAC5B,SAAU,CAFV,oCAA8B,CAD9B,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,4CAA6C,CAC7C,QAAS,CACT,uFAAwE,CANxE,uCAAiC,CACjC,QAAS,CACT,mDAAiD,CACjD,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,qCAgBF,CAZE,oCACE,2CACF,CAEA,6CAKE,4CAA6C,CAC7C,QAAS,CAFT,2BAA4B,CAH5B,+BAA2B,CAE3B,sCAAiC,CADjC,mCAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n position: relative;\n display: flex;\n padding: var(--stack-padding-normal) 0;\n margin-left: var(--stack-gap-normal);\n\n /* The Timeline */\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n display: block;\n width: var(--borderWidth-thick);\n content: '';\n background-color: var(--color-border-muted);\n }\n\n &:target .TimelineItem-badge {\n border-color: var(--color-accent-emphasis);\n box-shadow: 0 0 0.2em var(--color-accent-muted);\n }\n}\n\n.TimelineItem-badge {\n position: relative;\n z-index: 1;\n display: flex;\n width: var(--control-medium-size);\n height: var(--control-medium-size);\n margin-right: var(--controlStack-medium-gap-condensed);\n margin-left: calc(var(--control-medium-size) / -2 + 1px);\n color: var(--color-fg-muted);\n align-items: center;\n background-color: var(--color-timeline-badge-bg);\n border: var(--borderWidth-thick) solid var(--color-canvas-default);\n border-radius: 50%;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-success-emphasis);\n border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n min-width: 0;\n max-width: 100%;\n margin-top: var(--base-size-4);\n color: var(--color-fg-muted);\n flex: auto;\n}\n\n.TimelineItem-avatar {\n position: absolute;\n left: -72px;\n z-index: 1;\n}\n\n.TimelineItem-break {\n position: relative;\n z-index: 1;\n height: var(--stack-gap-spacious);\n margin: 0;\n margin-bottom: calc(var(--stack-gap-normal) * -1);\n margin-left: -56px;\n background-color: var(--color-canvas-default);\n border: 0;\n border-top: var(--borderWidth-thicker) solid var(--color-border-default);\n}\n\n.TimelineItem--condensed {\n padding-top: var(--base-size-4);\n padding-bottom: 0;\n\n /* TimelineItem--condensed is often grouped. (commits) */\n &:last-child {\n padding-bottom: var(--stack-gap-normal);\n }\n\n & .TimelineItem-badge {\n height: var(--base-size-16);\n margin-top: var(--base-size-8);\n margin-bottom: var(--base-size-8);\n color: var(--color-fg-muted);\n background-color: var(--color-canvas-default);\n border: 0;\n }\n}\n"]}
1
+ {"version":3,"sources":["timeline_item.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,wCAAoC,CADpC,0CAAsC,CAFtC,iBAqBF,CAfE,qBAQE,oEAA0C,CAL1C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,+CAGF,CAEA,yCACE,sEAAgD,CAChD,6EACF,CAGF,oBASE,kBAAmB,CACnB,4EAA8C,CAC9C,yGAA6D,CAC7D,iBAAkB,CAJlB,gDAA2B,CAL3B,YAAa,CAWb,aAAc,CATd,sCAAkC,CAQlC,sBAAuB,CANvB,0DAAwD,CADxD,2DAAsD,CALtD,iBAAkB,CAGlB,qCAAiC,CAFjC,SAaF,CAEA,6BAEE,wEAAiD,CACjD,4DAAiD,CAFjD,2DAGF,CAEA,mBAIE,gDAA2B,CAC3B,SAAU,CAFV,oCAA8B,CAD9B,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,mEAAwC,CACxC,QAAS,CACT,kHAAuE,CANvE,uCAAiC,CACjC,QAAS,CACT,mDAAiD,CACjD,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,qCAgBF,CAZE,oCACE,2CACF,CAEA,6CAKE,mEAAwC,CACxC,QAAS,CAFT,gDAA2B,CAH3B,+BAA2B,CAE3B,sCAAiC,CADjC,mCAKF","file":"timeline_item.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n position: relative;\n display: flex;\n padding: var(--stack-padding-normal) 0;\n margin-left: var(--stack-gap-normal);\n\n /* The Timeline */\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n display: block;\n width: var(--borderWidth-thick);\n content: '';\n background-color: var(--borderColor-muted);\n }\n\n &:target .TimelineItem-badge {\n border-color: var(--borderColor-accent-emphasis);\n box-shadow: 0 0 0.2em var(--borderColor-accent-muted);\n }\n}\n\n.TimelineItem-badge {\n position: relative;\n z-index: 1;\n display: flex;\n width: var(--control-medium-size);\n height: var(--control-medium-size);\n margin-right: var(--controlStack-medium-gap-condensed);\n margin-left: calc(var(--control-medium-size) / -2 + 1px);\n color: var(--fgColor-muted);\n align-items: center;\n background-color: var(--timelineBadge-bgColor);\n border: var(--borderWidth-thick) solid var(--bgColor-default);\n border-radius: 50%;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-success-emphasis);\n border: var(--borderWidth-thin) solid transparent;\n}\n\n.TimelineItem-body {\n min-width: 0;\n max-width: 100%;\n margin-top: var(--base-size-4);\n color: var(--fgColor-muted);\n flex: auto;\n}\n\n.TimelineItem-avatar {\n position: absolute;\n left: -72px;\n z-index: 1;\n}\n\n.TimelineItem-break {\n position: relative;\n z-index: 1;\n height: var(--stack-gap-spacious);\n margin: 0;\n margin-bottom: calc(var(--stack-gap-normal) * -1);\n margin-left: -56px;\n background-color: var(--bgColor-default);\n border: 0;\n border-top: var(--borderWidth-thicker) solid var(--borderColor-default);\n}\n\n.TimelineItem--condensed {\n padding-top: var(--base-size-4);\n padding-bottom: 0;\n\n /* TimelineItem--condensed is often grouped. (commits) */\n &:last-child {\n padding-bottom: var(--stack-gap-normal);\n }\n\n & .TimelineItem-badge {\n height: var(--base-size-16);\n margin-top: var(--base-size-8);\n margin-bottom: var(--base-size-8);\n color: var(--fgColor-muted);\n background-color: var(--bgColor-default);\n border: 0;\n }\n}\n"]}
@@ -15,12 +15,12 @@
15
15
  display: block;
16
16
  width: var(--borderWidth-thick);
17
17
  content: '';
18
- background-color: var(--color-border-muted);
18
+ background-color: var(--borderColor-muted);
19
19
  }
20
20
 
21
21
  &:target .TimelineItem-badge {
22
- border-color: var(--color-accent-emphasis);
23
- box-shadow: 0 0 0.2em var(--color-accent-muted);
22
+ border-color: var(--borderColor-accent-emphasis);
23
+ box-shadow: 0 0 0.2em var(--borderColor-accent-muted);
24
24
  }
25
25
  }
26
26
 
@@ -32,18 +32,18 @@
32
32
  height: var(--control-medium-size);
33
33
  margin-right: var(--controlStack-medium-gap-condensed);
34
34
  margin-left: calc(var(--control-medium-size) / -2 + 1px);
35
- color: var(--color-fg-muted);
35
+ color: var(--fgColor-muted);
36
36
  align-items: center;
37
- background-color: var(--color-timeline-badge-bg);
38
- border: var(--borderWidth-thick) solid var(--color-canvas-default);
37
+ background-color: var(--timelineBadge-bgColor);
38
+ border: var(--borderWidth-thick) solid var(--bgColor-default);
39
39
  border-radius: 50%;
40
40
  justify-content: center;
41
41
  flex-shrink: 0;
42
42
  }
43
43
 
44
44
  .TimelineItem-badge--success {
45
- color: var(--color-fg-on-emphasis);
46
- background-color: var(--color-success-emphasis);
45
+ color: var(--fgColor-onEmphasis);
46
+ background-color: var(--bgColor-success-emphasis);
47
47
  border: var(--borderWidth-thin) solid transparent;
48
48
  }
49
49
 
@@ -51,7 +51,7 @@
51
51
  min-width: 0;
52
52
  max-width: 100%;
53
53
  margin-top: var(--base-size-4);
54
- color: var(--color-fg-muted);
54
+ color: var(--fgColor-muted);
55
55
  flex: auto;
56
56
  }
57
57
 
@@ -68,9 +68,9 @@
68
68
  margin: 0;
69
69
  margin-bottom: calc(var(--stack-gap-normal) * -1);
70
70
  margin-left: -56px;
71
- background-color: var(--color-canvas-default);
71
+ background-color: var(--bgColor-default);
72
72
  border: 0;
73
- border-top: var(--borderWidth-thicker) solid var(--color-border-default);
73
+ border-top: var(--borderWidth-thicker) solid var(--borderColor-default);
74
74
  }
75
75
 
76
76
  .TimelineItem--condensed {
@@ -86,8 +86,8 @@
86
86
  height: var(--base-size-16);
87
87
  margin-top: var(--base-size-8);
88
88
  margin-bottom: var(--base-size-8);
89
- color: var(--color-fg-muted);
90
- background-color: var(--color-canvas-default);
89
+ color: var(--fgColor-muted);
90
+ background-color: var(--bgColor-default);
91
91
  border: 0;
92
92
  }
93
93
  }
@@ -6,6 +6,6 @@
6
6
  width: var(--base-size-4);
7
7
  height: var(--base-size-24);
8
8
  content: '';
9
- background: var(--color-accent-fg);
9
+ background: var(--borderColor-accent-emphasis);
10
10
  border-radius: var(--borderRadius-medium);
11
11
  }
@@ -1,6 +1,6 @@
1
1
  /* inset box-shadow for form controls */
2
- @define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--color-accent-fg) {
3
- border-color: var(--color-accent-fg);
2
+ @define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {
3
+ border-color: var(--focus-outlineColor);
4
4
  outline: none;
5
5
  box-shadow: inset 0 0 0 $outlineWidth $outlineColor;
6
6
  }
@@ -1,4 +1,4 @@
1
- @define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {
1
+ @define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
2
2
  outline: 2px solid $outlineColor;
3
3
  outline-offset: $outlineOffset;
4
4
  box-shadow: none;
@@ -1,6 +1,6 @@
1
1
  /* outline with fg box-shadow for buttons */
2
- @define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {
2
+ @define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {
3
3
  outline: 2px solid $outlineColor;
4
4
  outline-offset: $outlineOffset;
5
- box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);
5
+ box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
6
6
  }
@@ -1,6 +1,6 @@
1
- /* box-shadow for :target styles (no inset) */
2
- /* !important to override PCSS utilities */
3
- @define-mixin targetBoxShadow $outlineWidth: 2px, $outlineColor: var(--color-accent-fg) {
1
+ /* box-shadow for :target styles (no inset), !important to override PCSS utilities */
2
+
3
+ @define-mixin targetBoxShadow $outlineWidth: 2px, $outlineColor: var(--focus-outlineColor) {
4
4
  outline: none !important;
5
5
  box-shadow: 0 0 0 $outlineWidth $outlineColor !important;
6
6
  }
@@ -0,0 +1,7 @@
1
+ # Accessibility-focused lint rule configurations, tracked by accessibility scorecard.
2
+ ---
3
+ linters:
4
+ NoUnusedDisable:
5
+ enabled: true
6
+ Primer::Accessibility::TooltippedMigration:
7
+ enabled: true
@@ -53,7 +53,7 @@ module ERBLint
53
53
  system_arguments = system_arguments_to_args(classes_node.value)
54
54
  args = classes_to_args(system_arguments[:classes]&.split || [])
55
55
 
56
- invalid_classes = args[:classes].select { |class_name| Primer::Classify::Validation.invalid?(class_name) }
56
+ invalid_classes = args[:classes].select { |class_name| ::Primer::Classify::Validation.invalid?(class_name) }
57
57
 
58
58
  raise ConversionError, "Cannot convert #{'class'.pluralize(invalid_classes.size)} #{invalid_classes.join(',')}" if invalid_classes.present?
59
59
 
@@ -81,7 +81,7 @@ module ERBLint
81
81
  end
82
82
 
83
83
  def system_arguments_to_args(classes)
84
- system_arguments = Primer::Classify::Utilities.classes_to_hash(classes)
84
+ system_arguments = ::Primer::Classify::Utilities.classes_to_hash(classes)
85
85
 
86
86
  # need to transform symbols to strings with leading `:`
87
87
  system_arguments.transform_values do |v|
@@ -5,7 +5,7 @@ require "openssl"
5
5
  require "primer/view_components/constants"
6
6
 
7
7
  require_relative "tag_tree_helpers"
8
-
8
+ require_relative "helpers/rule_helpers"
9
9
  # :nocov:
10
10
 
11
11
  module ERBLint
@@ -17,6 +17,7 @@ module ERBLint
17
17
  # * `REQUIRED_ARGUMENTS` - optional - A list of HTML attributes that are required by the component.
18
18
  class BaseLinter < Linter
19
19
  include TagTreeHelpers
20
+ include Helpers::RuleHelpers
20
21
 
21
22
  DUMP_FILE = ".erblint-counter-ignore.json"
22
23
  DISALLOWED_CLASSES = [].freeze
@@ -134,10 +135,6 @@ module ERBLint
134
135
  end
135
136
  end
136
137
 
137
- def tags(processed_source)
138
- processed_source.parser.nodes_with_type(:tag).map { |tag_node| BetterHtml::Tree::Tag.from_node(tag_node) }
139
- end
140
-
141
138
  def counter_correct?(processed_source)
142
139
  comment_node = nil
143
140
  expected_count = 0
@@ -178,13 +175,6 @@ module ERBLint
178
175
  end
179
176
  end
180
177
 
181
- def generate_offense(klass, processed_source, tag, message = nil, replacement = nil)
182
- message ||= klass::MESSAGE
183
- klass_name = klass.name.demodulize
184
- offense = ["#{klass_name}:#{message}", tag.node.loc.source].join("\n")
185
- add_offense(processed_source.to_source_range(tag.loc), offense, replacement)
186
- end
187
-
188
178
  def dump_data(processed_source)
189
179
  return if @total_offenses.zero?
190
180
 
@@ -8,11 +8,11 @@ module ERBLint
8
8
  # Helpers to share between DeprecatedComponents ERB lint and Rubocop cop
9
9
  module DeprecatedComponentsHelpers
10
10
  def message(component_name)
11
- Primer::Deprecations.deprecation_message(component_name)
11
+ ::Primer::Deprecations.deprecation_message(component_name)
12
12
  end
13
13
 
14
14
  def deprecated_components
15
- Primer::Deprecations.deprecated_components
15
+ ::Primer::Deprecations.deprecated_components
16
16
  end
17
17
  end
18
18
  end
@@ -0,0 +1,39 @@
1
+ # frozen_string_literal: true
2
+
3
+ module ERBLint
4
+ module Linters
5
+ module Helpers
6
+ # Helpers for writing rules
7
+ module RuleHelpers
8
+ def tags(processed_source)
9
+ processed_source.parser.nodes_with_type(:tag).map { |tag_node| BetterHtml::Tree::Tag.from_node(tag_node) }
10
+ end
11
+
12
+ def generate_offense(klass, processed_source, tag, message = nil, replacement = nil)
13
+ message ||= klass::MESSAGE
14
+ klass_name = klass.name.demodulize
15
+ offense = ["#{klass_name}:#{message}", tag.node.loc.source].join("\n")
16
+ add_offense(processed_source.to_source_range(tag.loc), offense, replacement)
17
+ end
18
+
19
+ # Generate offense for ERB node tag
20
+ def generate_node_offense(klass, processed_source, node, message = nil)
21
+ message ||= klass::MESSAGE
22
+ offense = ["#{klass.name}:#{message}", node.loc.source].join("\n")
23
+ add_offense(processed_source.to_source_range(node.loc), offense)
24
+ end
25
+
26
+ def erb_nodes(processed_source)
27
+ processed_source.parser.ast.descendants(:erb)
28
+ end
29
+
30
+ def extract_ruby_from_erb_node(erb_node)
31
+ return unless erb_node.type == :erb
32
+
33
+ _, _, code_node = *erb_node
34
+ code_node.loc.source.strip
35
+ end
36
+ end
37
+ end
38
+ end
39
+ end
@@ -0,0 +1,37 @@
1
+ # frozen_string_literal: true
2
+
3
+ require_relative "helpers/rule_helpers"
4
+ module ERBLint
5
+ module Linters
6
+ module Primer
7
+ module Accessibility
8
+ # Flag when `.tooltipped` is being used and offer alternatives.
9
+ class TooltippedMigration < Linter
10
+ include LinterRegistry
11
+ include Helpers::RuleHelpers
12
+
13
+ MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. Tooltip should never be set on a non-interactive element (e.g. <span>, <div>, <li>). " \
14
+ "Find alternatives in https://primer.style/design/guides/accessibility/tooltip-alternatives/. " \
15
+ "If you're setting a tooltip on an interactive element, use the latest tooltip in https://primer.style/view-components."
16
+ TOOLTIPPED_RUBY_PATTERN = /classes:.*tooltipped|class:.*tooltipped/.freeze
17
+
18
+ def run(processed_source)
19
+ # HTML tags
20
+ tags(processed_source).each do |tag|
21
+ next if tag.closing?
22
+
23
+ classes = tag.attributes["class"]&.value
24
+ generate_offense(self.class, processed_source, tag, MIGRATE_TO_NEWER_TOOLTIP) if classes&.include?("tooltipped")
25
+ end
26
+
27
+ # ERB nodes
28
+ erb_nodes(processed_source).each do |node|
29
+ code = extract_ruby_from_erb_node(node)
30
+ generate_node_offense(self.class, processed_source, node, MIGRATE_TO_NEWER_TOOLTIP) if code.match?(TOOLTIPPED_RUBY_PATTERN)
31
+ end
32
+ end
33
+ end
34
+ end
35
+ end
36
+ end
37
+ end
@@ -5,7 +5,7 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 2
8
+ MINOR = 3
9
9
  PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
@@ -6,7 +6,7 @@ module Primer
6
6
  class NavListPreview < ViewComponent::Preview
7
7
  # @label Playground
8
8
  def playground
9
- render(Primer::Alpha::NavList.new(aria: { label: "Repository settings" }, selected_item_id: :collaborators)) do |list|
9
+ render(Primer::Alpha::NavList.new(selected_item_id: :collaborators)) do |list|
10
10
  list.with_heading(title: "Repository settings")
11
11
 
12
12
  list.with_item(label: "General", href: "/general") do |item|
@@ -33,7 +33,7 @@ module Primer
33
33
 
34
34
  # @label Default
35
35
  def default
36
- render(Primer::Alpha::NavList.new(aria: { label: "Repository settings" }, selected_item_id: :code_review_limits)) do |list|
36
+ render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
37
37
  list.with_heading(title: "Repository settings")
38
38
 
39
39
  list.with_item(label: "General", href: "/general") do |item|
@@ -67,7 +67,7 @@ module Primer
67
67
  # @label Top-level items
68
68
  #
69
69
  def top_level_items
70
- render(Primer::Alpha::NavList.new(aria: { label: "Account settings" })) do |list|
70
+ render(Primer::Alpha::NavList.new) do |list|
71
71
  list.with_heading(title: "Account settings")
72
72
 
73
73
  list.with_item(label: "General", href: "/general") do |item|
@@ -91,7 +91,9 @@ module Primer
91
91
  group.with_heading(title: "My favorite foods")
92
92
  group.with_item(label: "Popplers", href: "/foods/popplers")
93
93
  group.with_item(label: "Slurm", href: "/foods/slurm")
94
- group.with_show_more_item(label: "Show more foods", src: UrlHelpers.nav_list_items_path, pages: 2)
94
+ group.with_show_more_item(label: "Show more foods", src: UrlHelpers.nav_list_items_path, pages: 2) do |item|
95
+ item.with_trailing_visual_icon(icon: :plus)
96
+ end
95
97
  end
96
98
  end
97
99
  end
@@ -163,6 +163,17 @@ module Primer
163
163
  body_text: body_text
164
164
  })
165
165
  end
166
+
167
+ # @label Dialog with header and footer
168
+ #
169
+ def dialog_with_header_footer
170
+ render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d|
171
+ d.with_header(title: "Large Dialog Header", divider: true)
172
+ d.with_show_button { "Show Overlay" }
173
+ d.with_footer { "Large Dialog Footer" }
174
+ d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 }
175
+ end
176
+ end
166
177
  end
167
178
  end
168
179
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: primer_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.2.0
4
+ version: 0.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GitHub Open Source
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-06-16 00:00:00.000000000 Z
11
+ date: 2023-06-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: actionview
@@ -492,6 +492,7 @@ files:
492
492
  - app/components/primer/alpha/nav_list/divider.rb
493
493
  - app/components/primer/alpha/nav_list/group.html.erb
494
494
  - app/components/primer/alpha/nav_list/group.rb
495
+ - app/components/primer/alpha/nav_list/heading.rb
495
496
  - app/components/primer/alpha/nav_list/item.html.erb
496
497
  - app/components/primer/alpha/nav_list/item.rb
497
498
  - app/components/primer/alpha/navigation/tab.html.erb
@@ -874,6 +875,7 @@ files:
874
875
  - lib/primer/view_components/constants.rb
875
876
  - lib/primer/view_components/engine.rb
876
877
  - lib/primer/view_components/linters.rb
878
+ - lib/primer/view_components/linters/accessibility.yml
877
879
  - lib/primer/view_components/linters/argument_mappers/base.rb
878
880
  - lib/primer/view_components/linters/argument_mappers/button.rb
879
881
  - lib/primer/view_components/linters/argument_mappers/clipboard_copy.rb
@@ -897,12 +899,14 @@ files:
897
899
  - lib/primer/view_components/linters/flash_migration_counter.rb
898
900
  - lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb
899
901
  - lib/primer/view_components/linters/helpers/rubocop_helpers.rb
902
+ - lib/primer/view_components/linters/helpers/rule_helpers.rb
900
903
  - lib/primer/view_components/linters/label_component_migration_counter.rb
901
904
  - lib/primer/view_components/linters/migrate_deprecated_flash_arguments.rb
902
905
  - lib/primer/view_components/linters/severity_schema.rb
903
906
  - lib/primer/view_components/linters/subhead_component_migration_counter.rb
904
907
  - lib/primer/view_components/linters/super_in_component_templates.rb
905
908
  - lib/primer/view_components/linters/tag_tree_helpers.rb
909
+ - lib/primer/view_components/linters/tooltipped_migration.rb
906
910
  - lib/primer/view_components/linters/two_column_layout_migration_counter.rb
907
911
  - lib/primer/view_components/statuses.rb
908
912
  - lib/primer/view_components/version.rb