primer_view_components 0.6.0 → 0.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (153) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +62 -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_bar.rb +0 -8
  8. data/app/components/primer/alpha/action_list.css +1 -1
  9. data/app/components/primer/alpha/action_list.css.json +1 -0
  10. data/app/components/primer/alpha/action_list.css.map +1 -1
  11. data/app/components/primer/alpha/action_list.pcss +6 -0
  12. data/app/components/primer/alpha/action_menu/action_menu_element.js +45 -7
  13. data/app/components/primer/alpha/action_menu/action_menu_element.ts +49 -6
  14. data/app/components/primer/alpha/action_menu.rb +0 -269
  15. data/app/components/primer/alpha/auto_complete/item.rb +0 -12
  16. data/app/components/primer/alpha/auto_complete.css +1 -1
  17. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  18. data/app/components/primer/alpha/auto_complete.rb +0 -47
  19. data/app/components/primer/alpha/banner.css +1 -1
  20. data/app/components/primer/alpha/banner.css.map +1 -1
  21. data/app/components/primer/alpha/banner.rb +0 -31
  22. data/app/components/primer/alpha/button_marketing.rb +0 -12
  23. data/app/components/primer/alpha/dialog.css +1 -1
  24. data/app/components/primer/alpha/dialog.css.map +1 -1
  25. data/app/components/primer/alpha/dialog.rb +2 -18
  26. data/app/components/primer/alpha/dropdown.css +1 -1
  27. data/app/components/primer/alpha/dropdown.css.map +1 -1
  28. data/app/components/primer/alpha/dropdown.rb +0 -105
  29. data/app/components/primer/alpha/form_control.rb +0 -11
  30. data/app/components/primer/alpha/hellip_button.rb +0 -9
  31. data/app/components/primer/alpha/hidden_text_expander.rb +0 -9
  32. data/app/components/primer/alpha/image.rb +0 -16
  33. data/app/components/primer/alpha/image_crop.rb +0 -11
  34. data/app/components/primer/alpha/layout.css +1 -1
  35. data/app/components/primer/alpha/layout.css.map +1 -1
  36. data/app/components/primer/alpha/layout.pcss +1 -1
  37. data/app/components/primer/alpha/layout.rb +0 -118
  38. data/app/components/primer/alpha/menu.css +1 -1
  39. data/app/components/primer/alpha/menu.css.map +1 -1
  40. data/app/components/primer/alpha/menu.rb +0 -19
  41. data/app/components/primer/alpha/multi_input.rb +0 -33
  42. data/app/components/primer/alpha/nav_list.rb +0 -69
  43. data/app/components/primer/alpha/navigation/tab.rb +0 -35
  44. data/app/components/primer/alpha/octicon_symbols.rb +0 -6
  45. data/app/components/primer/alpha/overlay.rb +0 -14
  46. data/app/components/primer/alpha/segmented_control.css +1 -1
  47. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  48. data/app/components/primer/alpha/segmented_control.rb +0 -61
  49. data/app/components/primer/alpha/tab_container.rb +0 -18
  50. data/app/components/primer/alpha/tab_nav.css +1 -1
  51. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  52. data/app/components/primer/alpha/tab_nav.rb +0 -63
  53. data/app/components/primer/alpha/tab_panels.rb +0 -16
  54. data/app/components/primer/alpha/text_field.css +1 -1
  55. data/app/components/primer/alpha/text_field.css.map +1 -1
  56. data/app/components/primer/alpha/text_field.rb +0 -68
  57. data/app/components/primer/alpha/toggle_switch.css +1 -1
  58. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  59. data/app/components/primer/alpha/toggle_switch.rb +0 -18
  60. data/app/components/primer/alpha/tooltip.rb +1 -69
  61. data/app/components/primer/alpha/underline_nav.css +1 -1
  62. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  63. data/app/components/primer/alpha/underline_nav.rb +0 -61
  64. data/app/components/primer/alpha/underline_panels.rb +0 -19
  65. data/app/components/primer/beta/auto_complete/item.rb +0 -8
  66. data/app/components/primer/beta/auto_complete.rb +0 -56
  67. data/app/components/primer/beta/avatar.css +1 -1
  68. data/app/components/primer/beta/avatar.css.map +1 -1
  69. data/app/components/primer/beta/avatar.rb +0 -18
  70. data/app/components/primer/beta/avatar_stack.css +1 -1
  71. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  72. data/app/components/primer/beta/avatar_stack.rb +0 -21
  73. data/app/components/primer/beta/base_button.rb +0 -4
  74. data/app/components/primer/beta/blankslate.css +1 -1
  75. data/app/components/primer/beta/blankslate.css.map +1 -1
  76. data/app/components/primer/beta/blankslate.rb +0 -104
  77. data/app/components/primer/beta/border_box/header.rb +4 -11
  78. data/app/components/primer/beta/border_box.css +1 -1
  79. data/app/components/primer/beta/border_box.css.map +1 -1
  80. data/app/components/primer/beta/border_box.html.erb +2 -2
  81. data/app/components/primer/beta/border_box.rb +11 -55
  82. data/app/components/primer/beta/breadcrumbs.rb +0 -7
  83. data/app/components/primer/beta/button.css +1 -1
  84. data/app/components/primer/beta/button.css.json +1 -0
  85. data/app/components/primer/beta/button.css.map +1 -1
  86. data/app/components/primer/beta/button.pcss +6 -2
  87. data/app/components/primer/beta/button.rb +7 -43
  88. data/app/components/primer/beta/button_group.css +1 -1
  89. data/app/components/primer/beta/button_group.css.map +1 -1
  90. data/app/components/primer/beta/button_group.rb +0 -16
  91. data/app/components/primer/beta/clipboard_copy.rb +0 -12
  92. data/app/components/primer/beta/close_button.rb +0 -3
  93. data/app/components/primer/beta/counter.rb +0 -8
  94. data/app/components/primer/beta/details.rb +0 -11
  95. data/app/components/primer/beta/flash.css +1 -1
  96. data/app/components/primer/beta/flash.css.map +1 -1
  97. data/app/components/primer/beta/flash.html.erb +1 -3
  98. data/app/components/primer/beta/flash.pcss +1 -2
  99. data/app/components/primer/beta/flash.rb +1 -23
  100. data/app/components/primer/beta/heading.rb +0 -8
  101. data/app/components/primer/beta/icon_button.rb +0 -21
  102. data/app/components/primer/beta/label.css +1 -1
  103. data/app/components/primer/beta/label.css.map +1 -1
  104. data/app/components/primer/beta/label.rb +0 -20
  105. data/app/components/primer/beta/link.rb +0 -22
  106. data/app/components/primer/beta/markdown.rb +1 -262
  107. data/app/components/primer/beta/octicon.rb +0 -10
  108. data/app/components/primer/beta/popover.css +1 -1
  109. data/app/components/primer/beta/popover.css.map +1 -1
  110. data/app/components/primer/beta/popover.rb +0 -43
  111. data/app/components/primer/beta/progress_bar.rb +1 -22
  112. data/app/components/primer/beta/relative_time.rb +0 -9
  113. data/app/components/primer/beta/spinner.rb +2 -10
  114. data/app/components/primer/beta/state.rb +0 -13
  115. data/app/components/primer/beta/subhead.rb +0 -55
  116. data/app/components/primer/beta/text.rb +0 -4
  117. data/app/components/primer/beta/timeline_item.css +1 -1
  118. data/app/components/primer/beta/timeline_item.css.map +1 -1
  119. data/app/components/primer/beta/timeline_item.rb +0 -9
  120. data/app/components/primer/beta/truncate.rb +0 -50
  121. data/app/components/primer/blankslate_component.rb +0 -76
  122. data/app/components/primer/box.rb +0 -6
  123. data/app/components/primer/button_component.rb +0 -49
  124. data/app/components/primer/component.rb +1 -1
  125. data/app/components/primer/conditional_wrapper.rb +2 -17
  126. data/app/components/primer/icon_button.rb +0 -30
  127. data/app/components/primer/layout_component.rb +0 -12
  128. data/app/components/primer/tooltip.rb +0 -27
  129. data/app/components/primer/truncate.rb +0 -19
  130. data/app/lib/primer/fetch_or_fallback_helper.rb +1 -1
  131. data/lib/primer/accessibility.rb +1 -1
  132. data/lib/primer/deprecations.yml +3 -3
  133. data/lib/primer/forms/dsl/input.rb +1 -0
  134. data/lib/primer/static/generate_info_arch.rb +1 -0
  135. data/lib/primer/view_components/linters/details_menu_migration.rb +1 -1
  136. data/lib/primer/view_components/linters/migrations/truncate_component.rb +45 -0
  137. data/lib/primer/view_components/linters/tooltipped_migration.rb +1 -1
  138. data/lib/primer/view_components/linters.rb +1 -0
  139. data/lib/primer/view_components/version.rb +1 -1
  140. data/lib/primer/view_components.rb +18 -0
  141. data/lib/primer/yard.rb +8 -9
  142. data/previews/primer/alpha/tooltip_preview/with_multiple_on_a_page.html.erb +3 -3
  143. data/previews/primer/alpha/tooltip_preview.rb +11 -23
  144. data/previews/primer/beta/button_preview/leading_visual.html.erb +2 -2
  145. data/previews/primer/beta/button_preview/leading_visual_svg.html.erb +12 -0
  146. data/previews/primer/beta/button_preview/trailing_counter.html.erb +1 -1
  147. data/previews/primer/beta/button_preview/trailing_visual.html.erb +1 -1
  148. data/previews/primer/beta/button_preview.rb +22 -0
  149. data/static/arguments.json +12 -1
  150. data/static/info_arch.json +136 -15
  151. data/static/previews.json +13 -13
  152. metadata +4 -3
  153. data/lib/primer/yard/legacy_gatsby_backend.rb +0 -233
@@ -41,10 +41,15 @@ module Primer
41
41
  #
42
42
  # - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
43
43
  #
44
+ # - `leading_visual_svg` to render a SVG.
45
+ #
44
46
  # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
45
47
  renders_one :leading_visual, types: {
46
48
  icon: lambda { |**system_arguments|
47
49
  Primer::Beta::Octicon.new(**system_arguments)
50
+ },
51
+ svg: lambda { |**system_arguments|
52
+ Primer::BaseComponent.new(tag: :svg, width: "16", height: "16", **system_arguments)
48
53
  }
49
54
  }
50
55
 
@@ -81,54 +86,13 @@ module Primer
81
86
  renders_one :tooltip, lambda { |**system_arguments|
82
87
  raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank? && !Rails.env.production?
83
88
 
89
+ ::Primer::ViewComponents.deprecation.warn("Buttons with visible text should not use a `label` tooltip. Consider using Primer::Beta::IconButton instead.") if system_arguments[:type] == :label
84
90
  system_arguments[:for_id] = @id
85
- system_arguments[:type] ||= :description
91
+ system_arguments[:type] = :description
86
92
 
87
93
  Primer::Alpha::Tooltip.new(**system_arguments)
88
94
  }
89
95
 
90
- # @example Schemes
91
- # <%= render(Primer::Beta::Button.new) { "Default" } %>
92
- # <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Primary" } %>
93
- # <%= render(Primer::Beta::Button.new(scheme: :danger)) { "Danger" } %>
94
- # <%= render(Primer::Beta::Button.new(scheme: :invisible)) { "Invisible" } %>
95
- #
96
- # @example Sizes
97
- # <%= render(Primer::Beta::Button.new(size: :small)) { "Small" } %>
98
- # <%= render(Primer::Beta::Button.new(size: :medium)) { "Medium" } %>
99
- #
100
- # @example Full width
101
- # <%= render(Primer::Beta::Button.new(block: :true)) { "Full width" } %>
102
- # <%= render(Primer::Beta::Button.new(block: :true, scheme: :primary)) { "Primary full width" } %>
103
- #
104
- # @example With leading visual
105
- # <%= render(Primer::Beta::Button.new) do |component| %>
106
- # <% component.with_leading_visual_icon(icon: :star) %>
107
- # Button
108
- # <% end %>
109
- #
110
- # @example With trailing visual
111
- # <%= render(Primer::Beta::Button.new) do |component| %>
112
- # <% component.with_trailing_visual_counter(count: 15) %>
113
- # Button
114
- # <% end %>
115
- #
116
- # @example With leading and trailing visuals
117
- # <%= render(Primer::Beta::Button.new) do |component| %>
118
- # <% component.with_leading_visual_icon(icon: :star) %>
119
- # <% component.with_trailing_visual_counter(count: 15) %>
120
- # Button
121
- # <% end %>
122
- #
123
- # @example With tooltip
124
- # @description
125
- # Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
126
- # @code
127
- # <%= render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component| %>
128
- # <% component.with_tooltip(text: "Tooltip text") %>
129
- # Button
130
- # <% end %>
131
- #
132
96
  # @param scheme [Symbol] <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
133
97
  # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
134
98
  # @param block [Boolean] Whether button is full-width with `display: block`.
@@ -1 +1 @@
1
- .ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>.Button-withTooltip:first-child .Button,.ButtonGroup>:first-child{border-bottom-left-radius:var(--borderRadius-medium,6px);border-top-left-radius:var(--borderRadius-medium,6px)}.ButtonGroup>.Button-withTooltip:last-child .Button,.ButtonGroup>:last-child{border-bottom-right-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}
1
+ .ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>.Button-withTooltip:first-child .Button,.ButtonGroup>:first-child{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.ButtonGroup>.Button-withTooltip:last-child .Button,.ButtonGroup>:last-child{border-bottom-right-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}
@@ -1 +1 @@
1
- {"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAyBF,CAvBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,+EAGE,wDAAqD,CADrD,qDAEF,CAEA,6EAGE,yDAAsD,CADtD,sDAEF","file":"button_group.css","sourcesContent":[".ButtonGroup {\n display: inline-flex;\n\n & .Button {\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n\n & > :first-child,\n & > :first-child.Button-withTooltip .Button {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n & > :last-child,\n & > :last-child.Button-withTooltip .Button {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n}\n"]}
1
+ {"version":3,"sources":["button_group.pcss"],"names":[],"mappings":"AAAA,aACE,mBAyBF,CAvBE,qBAGE,eAAgB,CAFhB,sBAAuB,CACvB,iBAQF,CALE,kFAGE,SACF,CAGF,+EAGE,4DAAqD,CADrD,yDAEF,CAEA,6EAGE,6DAAsD,CADtD,0DAEF","file":"button_group.css","sourcesContent":[".ButtonGroup {\n display: inline-flex;\n\n & .Button {\n margin-inline-end: -1px;\n position: relative;\n border-radius: 0;\n\n &:focus,\n &:active,\n &:hover {\n z-index: 1;\n }\n }\n\n & > :first-child,\n & > :first-child.Button-withTooltip .Button {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n & > :last-child,\n & > :last-child.Button-withTooltip .Button {\n border-top-right-radius: var(--borderRadius-medium);\n border-bottom-right-radius: var(--borderRadius-medium);\n }\n}\n"]}
@@ -20,22 +20,6 @@ module Primer
20
20
  end
21
21
  }
22
22
 
23
- # @example Default
24
- #
25
- # <%= render(Primer::Beta::ButtonGroup.new) do |component| %>
26
- # <% component.with_button { "Button 1" } %>
27
- # <% component.with_button { "Button 2" } %>
28
- # <% component.with_button { "Button 3" } %>
29
- # <% end %>
30
- #
31
- # @example Sizes
32
- #
33
- # <%= render(Primer::Beta::ButtonGroup.new(size: :small)) do |component| %>
34
- # <% component.with_button { "Button 1" } %>
35
- # <% component.with_button { "Button 2" } %>
36
- # <% component.with_button { "Button 3" } %>
37
- # <% end %>
38
- #
39
23
  # @param scheme [Symbol] DEPRECATED. <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
40
24
  # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
41
25
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -9,18 +9,6 @@ module Primer
9
9
  class ClipboardCopy < Primer::Component
10
10
  status :beta
11
11
 
12
- # @example Default
13
- # <%= render(Primer::Beta::ClipboardCopy.new(value: "Text to copy", "aria-label": "Copy text to the system clipboard")) %>
14
- #
15
- # @example With text instead of icons
16
- # <%= render(Primer::Beta::ClipboardCopy.new(value: "Text to copy")) do %>
17
- # Click to copy!
18
- # <% end %>
19
- #
20
- # @example Copying from an element
21
- # <%= render(Primer::Beta::ClipboardCopy.new(for: "blob-path", "aria-label": "Copy text to the system clipboard")) %>
22
- # <div id="blob-path">src/index.js</div>
23
- #
24
12
  # @param aria-label [String] String that will be read to screenreaders when the component is focused
25
13
  # @param value [String] Text to copy into the users clipboard when they click the component.
26
14
  # @param for [String] Element id from where to get the copied value.
@@ -14,9 +14,6 @@ module Primer
14
14
  DEFAULT_TYPE = :button
15
15
  TYPE_OPTIONS = [DEFAULT_TYPE, :submit].freeze
16
16
 
17
- # @example Default
18
- # <%= render(Primer::Beta::CloseButton.new) %>
19
- #
20
17
  # @param type [Symbol] <%= one_of(Primer::Beta::CloseButton::TYPE_OPTIONS) %>
21
18
  # @param disabled [Boolean] Whether or not the button is disabled.
22
19
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -23,14 +23,6 @@ module Primer
23
23
  DEPRECATED_SCHEME_OPTIONS = [:gray, :light_gray].freeze
24
24
  SCHEME_OPTIONS = (SCHEME_MAPPINGS.keys - DEPRECATED_SCHEME_OPTIONS).freeze
25
25
 
26
- #
27
- # @example Default
28
- # <%= render(Primer::Beta::Counter.new(count: 25)) %>
29
- #
30
- # @example Schemes
31
- # <%= render(Primer::Beta::Counter.new(count: 25, scheme: :primary)) %>
32
- # <%= render(Primer::Beta::Counter.new(count: 25, scheme: :secondary)) %>
33
- #
34
26
  # @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
35
27
  # @param scheme [Symbol] Color scheme. <%= one_of(Primer::Beta::Counter::SCHEME_OPTIONS) %>
36
28
  # @param limit [Integer, nil] Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+")
@@ -45,17 +45,6 @@ module Primer
45
45
  Primer::BaseComponent.new(**system_arguments)
46
46
  }
47
47
 
48
- # @example Default
49
- #
50
- # <%= render Primer::Beta::Details.new do |component| %>
51
- # <% component.with_summary do %>
52
- # Summary
53
- # <% end %>
54
- # <% component.with_body do %>
55
- # Body
56
- # <% end %>
57
- # <% end %>
58
- #
59
48
  # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
60
49
  # @param reset [Boolean] Defaults to false. If set to true, it will remove the default caret and remove style from the summary element
61
50
  # @param disabled [Boolean] Whether or not to disable the summary button.
@@ -1 +1 @@
1
- .flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin:calc(var(--control-medium-paddingInline-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
1
+ .flash:not(.Banner){background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-subtle)),var(--bgColor-accent-muted,var(--color-accent-subtle)));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,.375rem);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem));color:var(--fgColor-default,var(--color-fg-default));padding:var(--base-size-20,1.25rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.flash:not(.Banner) .octicon{color:var(--fgColor-accent,var(--color-accent-fg));margin-right:var(--base-size-12,.75rem)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--stack-gap-spacious,1.5rem)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin-top:calc(var(--base-size-4,.25rem)*-1);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--stack-gap-spacious,1.5rem);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-small-gap,.25rem)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-warn:not(.Banner) .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.flash-error:not(.Banner){background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-error:not(.Banner) .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.flash-success:not(.Banner){background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.flash-success:not(.Banner) .octicon{color:var(--fgColor-success,var(--color-success-fg))}.flash-full:not(.Banner){border-radius:0;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--bgColor-default,var(--color-canvas-default))}.warning{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}
@@ -1 +1 @@
1
- {"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,4CAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCAUE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAJf,WAAY,CAEZ,iEAA+D,CAD/D,yDAAqD,CAErD,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n\n /* Default color */\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n border-color: var(--borderColor-accent-muted);\n\n & .octicon {\n color: var(--fgColor-accent);\n margin-right: var(--base-size-12);\n }\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n padding: var(--control-medium-paddingInline-spacious);\n margin: calc(var(--control-medium-paddingInline-spacious) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--stack-gap-spacious);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n border-color: var(--borderColor-attention-muted);\n\n & .octicon {\n color: var(--fgColor-attention);\n }\n}\n\n.flash-error:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n border-color: var(--borderColor-danger-muted);\n\n & .octicon {\n color: var(--fgColor-danger);\n }\n}\n\n.flash-success:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n border-color: var(--borderColor-success-muted);\n\n & .octicon {\n color: var(--fgColor-success);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-width: var(--borderWidth-thin) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold);\n background-color: var(--bgColor-attention-muted);\n}\n"]}
1
+ {"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,+IAA2F,CAC3F,sEAA6C,CAL7C,gDAAyC,CAFzC,kBAAmB,CACnB,sDAAqC,CAIrC,oDAA6B,CAN7B,qFAAyE,CADzE,iBAmBF,CARE,6BACE,kDAA4B,CAC5B,uCACF,CAEA,iCACE,eACF,CAIF,gBACE,8CACF,CAGA,gCASE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAHf,WAAY,CACZ,6CAAyC,CACzC,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,4CAAsC,CADtC,eAgBF,CAZE,gDAEE,gDAA2B,CAD3B,4CAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAMJ,yBAEE,2JAAiG,CACjG,4EAAgD,CAFhD,oDAOF,CAHE,kCACE,wDACF,CAGF,0BAEE,+IAA2F,CAC3F,sEAA6C,CAF7C,oDAOF,CAHE,mCACE,kDACF,CAGF,4BAEE,mJAA6F,CAC7F,wEAA8C,CAF9C,oDAOF,CAHE,qCACE,oDACF,CAKF,yBAGE,eAAgB,CADhB,wDAAuC,CADvC,8DAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,mEACF,CAGA,SAIE,6EAAgD,CADhD,gDAA6C,CAD7C,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n position: relative;\n padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n\n /* Default color */\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n border-color: var(--borderColor-accent-muted);\n\n & .octicon {\n color: var(--fgColor-accent);\n margin-right: var(--base-size-12);\n }\n\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n margin-bottom: var(--stack-gap-spacious);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n float: right;\n margin-top: calc(var(--base-size-4) * -1);\n text-align: center;\n cursor: pointer;\n\n /* Undo `<button>` styles */\n background: none;\n border: 0;\n appearance: none;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:active {\n opacity: 0.5;\n }\n\n & .octicon {\n margin-right: 0;\n }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n float: right;\n margin-top: -3px;\n margin-left: var(--stack-gap-spacious);\n background-clip: padding-box;\n\n &.btn .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n &.btn-primary {\n background-clip: border-box;\n\n & .octicon {\n color: inherit;\n }\n }\n}\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n border-color: var(--borderColor-attention-muted);\n\n & .octicon {\n color: var(--fgColor-attention);\n }\n}\n\n.flash-error:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n border-color: var(--borderColor-danger-muted);\n\n & .octicon {\n color: var(--fgColor-danger);\n }\n}\n\n.flash-success:not(.Banner) {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n border-color: var(--borderColor-success-muted);\n\n & .octicon {\n color: var(--fgColor-success);\n }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-width: var(--borderWidth-thin) 0;\n border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n position: fixed;\n top: 0;\n z-index: 90;\n width: 100%;\n border-top: 0;\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n background-color: var(--bgColor-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n padding: 0.5em;\n margin-bottom: 0.8em;\n font-weight: var(--base-text-weight-semibold);\n background-color: var(--bgColor-attention-muted);\n}\n"]}
@@ -1,9 +1,7 @@
1
1
  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
2
  <%= primer_octicon @icon if @icon %><%= content %>
3
3
  <% if @dismissible %>
4
- <button class="flash-close js-flash-close" type="button" aria-label="Close">
5
- <%= primer_octicon "x" %>
6
- </button>
4
+ <%= render Primer::Beta::IconButton.new(icon: :x, scheme: :invisible, wrapper_arguments: { classes: "flash-close" }, classes: "js-flash-close", "aria-label": "Dismiss alert") %>
7
5
  <% end %>
8
6
 
9
7
  <%= action %>
@@ -31,8 +31,7 @@
31
31
  /* Close button */
32
32
  .flash-close:not(.Banner-close) {
33
33
  float: right;
34
- padding: var(--control-medium-paddingInline-spacious);
35
- margin: calc(var(--control-medium-paddingInline-spacious) * -1);
34
+ margin-top: calc(var(--base-size-4) * -1);
36
35
  text-align: center;
37
36
  cursor: pointer;
38
37
 
@@ -24,29 +24,7 @@ module Primer
24
24
  :danger => "flash-error",
25
25
  :success => "flash-success"
26
26
  }.freeze
27
- # @example Schemes
28
- # <%= render(Primer::Beta::Flash.new) { "This is a flash message!" } %>
29
- # <%= render(Primer::Beta::Flash.new(scheme: :warning)) { "This is a warning flash message!" } %>
30
- # <%= render(Primer::Beta::Flash.new(scheme: :danger)) { "This is a danger flash message!" } %>
31
- # <%= render(Primer::Beta::Flash.new(scheme: :success)) { "This is a success flash message!" } %>
32
- #
33
- # @example Full width
34
- # <%= render(Primer::Beta::Flash.new(full: true)) { "This is a full width flash message!" } %>
35
- #
36
- # @example Dismissible
37
- # <%= render(Primer::Beta::Flash.new(dismissible: true)) { "This is a dismissible flash message!" } %>
38
- #
39
- # @example Icon
40
- # <%= render(Primer::Beta::Flash.new(icon: :people)) { "This is a flash message with an icon!" } %>
41
- #
42
- # @example With actions
43
- # <%= render(Primer::Beta::Flash.new) do |component| %>
44
- # This is a flash message with actions!
45
- # <% component.with_action do %>
46
- # <%= render(Primer::ButtonComponent.new(size: :small)) { "Take action" } %>
47
- # <% end %>
48
- # <% end %>
49
- #
27
+
50
28
  # @param full [Boolean] Whether the component should take up the full width of the screen.
51
29
  # @param spacious [Boolean] Whether to add margin to the bottom of the component.
52
30
  # @param dismissible [Boolean] Whether the component can be dismissed with an X button.
@@ -23,14 +23,6 @@ module Primer
23
23
  TAG_FALLBACK = :h2
24
24
  TAG_OPTIONS = [:h1, TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
25
25
 
26
- # @example Default
27
- # <%= render(Primer::Beta::Heading.new(tag: :h1)) { "H1 Text" } %>
28
- # <%= render(Primer::Beta::Heading.new(tag: :h2)) { "H2 Text" } %>
29
- # <%= render(Primer::Beta::Heading.new(tag: :h3)) { "H3 Text" } %>
30
- # <%= render(Primer::Beta::Heading.new(tag: :h4)) { "H4 Text" } %>
31
- # <%= render(Primer::Beta::Heading.new(tag: :h5)) { "H5 Text" } %>
32
- # <%= render(Primer::Beta::Heading.new(tag: :h6)) { "H6 Text" } %>
33
- #
34
26
  # @param tag [String] <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
35
27
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
36
28
  def initialize(tag:, **system_arguments)
@@ -25,27 +25,6 @@ module Primer
25
25
  }.freeze
26
26
  SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
27
27
 
28
- # @example Default
29
- #
30
- # <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button")) %>
31
- #
32
- # @example Schemes
33
- #
34
- # <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search")) %>
35
- # <%= render(Primer::Beta::IconButton.new(icon: :trash, "aria-label": "Delete", scheme: :danger)) %>
36
- #
37
- # @example With an `aria-description`
38
- # @description
39
- # If you need to have a longer description for the icon button, use both the `aria-label` and `aria-description`
40
- # attributes. A label should be short and concise, while the description can be longer as it is intended to provide
41
- # more context and information. See the accessibility section for more information.
42
- # @code
43
- # <%= render(Primer::Beta::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
44
- #
45
- # @example Custom tooltip direction
46
- #
47
- # <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
48
- #
49
28
  # @param icon [String] Name of <%= link_to_octicons %> to use.
50
29
  # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
51
30
  # @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `<div>` tag.
@@ -1 +1 @@
1
- .labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}
1
+ .labels{position:relative}.Label,.label{border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:2em;display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:18px;padding:0 7px;white-space:nowrap}.Label:hover,.label:hover{text-decoration:none}.Label--large{line-height:22px;padding-left:10px;padding-right:10px}.Label--inline{display:inline;font-size:85%;padding:.12em .5em}.Label--primary{border-color:var(--borderColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-default,var(--color-fg-default))}.Label--secondary{border-color:var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted))}.Label--accent,.Label--info{border-color:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-accent,var(--color-accent-fg))}.Label--success{border-color:var(--borderColor-success-emphasis,var(--color-success-emphasis));color:var(--fgColor-success,var(--color-success-fg))}.Label--attention,.Label--warning{border-color:var(--borderColor-attention-emphasis,var(--color-attention-emphasis));color:var(--fgColor-attention,var(--color-attention-fg))}.Label--severe{border-color:var(--borderColor-severe-emphasis,var(--color-severe-emphasis));color:var(--fgColor-severe,var(--color-severe-fg))}.Label--danger{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis));color:var(--fgColor-danger,var(--color-danger-fg))}.Label--open{border-color:var(--borderColor-open-emphasis,var(--color-open-emphasis));color:var(--fgColor-open,var(--color-open-fg))}.Label--closed{border-color:var(--borderColor-closed-emphasis,var(--color-closed-emphasis));color:var(--fgColor-closed,var(--color-closed-fg))}.Label--done{border-color:var(--borderColor-done-emphasis,var(--color-done-emphasis));color:var(--fgColor-done,var(--color-done-fg))}.Label--sponsors{border-color:var(--borderColor-sponsors-emphasis,var(--color-sponsors-emphasis));color:var(--fgColor-sponsors,var(--color-sponsors-fg))}
@@ -1 +1 @@
1
- {"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,6GAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,uEAAiD,CADjD,oDAEF,CAEA,kBAEE,mEAAwC,CADxC,gDAEF,CAIA,4BAGE,sEAAgD,CADhD,kDAEF,CAEA,gBAEE,8EAAiD,CADjD,oDAEF,CAEA,kCAGE,kFAAmD,CADnD,wDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,iBAEE,gFAAkD,CADlD,sDAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n display: inline-block;\n padding: 0 7px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: 18px;\n white-space: nowrap;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: 2em;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* Large 24px */\n\n.Label--large {\n padding-right: 10px;\n padding-left: 10px;\n line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n display: inline;\n padding: 0.12em 0.5em;\n font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n color: var(--fgColor-default);\n border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n color: var(--fgColor-muted);\n border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n color: var(--fgColor-accent);\n border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n color: var(--fgColor-success);\n border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n color: var(--fgColor-attention);\n border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n color: var(--fgColor-severe);\n border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n color: var(--fgColor-danger);\n border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n color: var(--fgColor-open);\n border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n color: var(--fgColor-closed);\n border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n color: var(--fgColor-done);\n border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n color: var(--fgColor-sponsors);\n border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}
1
+ {"version":3,"sources":["label.pcss"],"names":[],"mappings":"AAGA,QACE,iBACF,CAIA,cAQE,6GAAgE,CAChE,iBAAkB,CAPlB,oBAAqB,CAErB,4CAAsC,CACtC,8CAA2C,CAC3C,gBAAiB,CAHjB,aAAc,CAId,kBAOF,CAHE,0BACE,oBACF,CAKF,cAGE,gBAAiB,CADjB,iBAAkB,CADlB,kBAGF,CAMA,eACE,cAAe,CAEf,aAAc,CADd,kBAEF,CAIA,gBAEE,uEAAiD,CADjD,oDAEF,CAEA,kBAEE,mEAAwC,CADxC,gDAEF,CAIA,4BAGE,4EAAgD,CADhD,kDAEF,CAEA,gBAEE,8EAAiD,CADjD,oDAEF,CAEA,kCAGE,kFAAmD,CADnD,wDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,eAEE,4EAAgD,CADhD,kDAEF,CAEA,aAEE,wEAA8C,CAD9C,8CAEF,CAEA,iBAEE,gFAAkD,CADlD,sDAEF","file":"label.css","sourcesContent":["/* Labels */\n\n/* Provide a wrapper to ensure labels stick together */\n.labels {\n position: relative;\n}\n\n/* Default 20px */\n\n.label, /* TODO: Deprecate */\n.Label {\n display: inline-block;\n padding: 0 7px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: 18px;\n white-space: nowrap;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: 2em;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* Large 24px */\n\n.Label--large {\n padding-right: 10px;\n padding-left: 10px;\n line-height: 22px;\n}\n\n/* Inline */\n\n/* Doesn't increase height of parent element\n** Can be used with different font-sizes */\n.Label--inline {\n display: inline;\n padding: 0.12em 0.5em;\n font-size: 85%;\n}\n\n/* Contrast */\n\n.Label--primary {\n color: var(--fgColor-default);\n border-color: var(--borderColor-neutral-emphasis);\n}\n\n.Label--secondary {\n color: var(--fgColor-muted);\n border-color: var(--borderColor-default);\n}\n\n/* Colors */\n\n.Label--info, /* TODO: deprecate */\n.Label--accent {\n color: var(--fgColor-accent);\n border-color: var(--borderColor-accent-emphasis);\n}\n\n.Label--success {\n color: var(--fgColor-success);\n border-color: var(--borderColor-success-emphasis);\n}\n\n.Label--warning, /* TODO: deprecate */\n.Label--attention {\n color: var(--fgColor-attention);\n border-color: var(--borderColor-attention-emphasis);\n}\n\n.Label--severe {\n color: var(--fgColor-severe);\n border-color: var(--borderColor-severe-emphasis);\n}\n\n.Label--danger {\n color: var(--fgColor-danger);\n border-color: var(--borderColor-danger-emphasis);\n}\n\n.Label--open {\n color: var(--fgColor-open);\n border-color: var(--borderColor-open-emphasis);\n}\n\n.Label--closed {\n color: var(--fgColor-closed);\n border-color: var(--borderColor-closed-emphasis);\n}\n\n.Label--done {\n color: var(--fgColor-done);\n border-color: var(--borderColor-done-emphasis);\n}\n\n.Label--sponsors {\n color: var(--fgColor-sponsors);\n border-color: var(--borderColor-sponsors-emphasis);\n}\n"]}
@@ -46,26 +46,6 @@ module Primer
46
46
 
47
47
  INLINE_CLASS = "Label--inline"
48
48
 
49
- # @example Schemes
50
- # <%= render(Primer::Beta::Label.new) { "Default" } %>
51
- # <%= render(Primer::Beta::Label.new(scheme: :primary)) { "Primary" } %>
52
- # <%= render(Primer::Beta::Label.new(scheme: :secondary)) { "Secondary" } %>
53
- # <%= render(Primer::Beta::Label.new(scheme: :accent)) { "Accent" } %>
54
- # <%= render(Primer::Beta::Label.new(scheme: :success)) { "Success" } %>
55
- # <%= render(Primer::Beta::Label.new(scheme: :attention)) { "Attention" } %>
56
- # <%= render(Primer::Beta::Label.new(scheme: :danger)) { "Danger" } %>
57
- # <%= render(Primer::Beta::Label.new(scheme: :severe)) { "Severe" } %>
58
- # <%= render(Primer::Beta::Label.new(scheme: :done)) { "Done" } %>
59
- # <%= render(Primer::Beta::Label.new(scheme: :sponsors)) { "Sponsors" } %>
60
- #
61
- # @example Sizes
62
- # <%= render(Primer::Beta::Label.new) { "Medium" } %>
63
- # <%= render(Primer::Beta::Label.new(size: :large)) { "Large" } %>
64
- #
65
- # @example Inline
66
- # <%= render(Primer::Beta::Label.new) { "Default" } %>
67
- # <%= render(Primer::Beta::Label.new(inline: true)) { "Inline" } %>
68
- #
69
49
  # @param tag [Symbol] <%= one_of(Primer::Beta::Label::TAG_OPTIONS) %>
70
50
  # @param scheme [Symbol] <%= one_of(Primer::Beta::Label::SCHEME_MAPPINGS.keys) %>
71
51
  # @param size [Symbol] <%= one_of(Primer::Beta::Label::SIZE_OPTIONS) %>
@@ -30,28 +30,6 @@ module Primer
30
30
  Primer::Alpha::Tooltip.new(**system_arguments)
31
31
  }
32
32
 
33
- # @example Default
34
- # <%= render(Primer::Beta::Link.new(href: "#")) { "Link" } %>
35
- #
36
- # @example Muted
37
- # <%= render(Primer::Beta::Link.new(href: "#", muted: true)) { "Link" } %>
38
- #
39
- # @example Schemes
40
- # <%= render(Primer::Beta::Link.new(href: "#", scheme: :primary)) { "Primary" } %>
41
- # <%= render(Primer::Beta::Link.new(href: "#", scheme: :secondary)) { "Secondary" } %>
42
- #
43
- # @example Without underline
44
- # <%= render(Primer::Beta::Link.new(href: "#", underline: false)) { "Link" } %>
45
- #
46
- # @example With tooltip
47
- # @description
48
- # Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
49
- # @code
50
- # <%= render(Primer::Beta::Link.new(href: "#", id: "link-with-tooltip")) do |component| %>
51
- # <% component.with_tooltip(text: "Tooltip text") %>
52
- # Link
53
- # <% end %>
54
- #
55
33
  # @param href [String] URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
56
34
  # @param scheme [Symbol] <%= one_of(Primer::Beta::Link::SCHEME_MAPPINGS.keys) %>
57
35
  # @param muted [Boolean] Uses light gray for Link color, and blue on hover.