openproject-primer_view_components 0.6.3

data/app/components/primer/beta/button.css.json

@@ -0,0 +1,75 @@
+{
+  "name": "beta/button",
+  "selectors": [
+    ":root",
+    ".Button",
+    ".Button:before",
+    ".Button:hover",
+    ".Button:active",
+    ".Button:disabled",
+    ".Button[aria-disabled=true]",
+    ".Button-withTooltip",
+    "a.Button:hover",
+    "summary.Button:hover",
+    ".Button-content",
+    ".Button-content>:not(:last-child)",
+    ".Button-content--alignStart",
+    ".Button-visual",
+    ".Button-visual .Counter",
+    ".Button-label",
+    ".Button-leadingVisual",
+    ".Button-trailingVisual",
+    ".Button-trailingAction",
+    ".Button--small",
+    ".Button--small .Button-label",
+    ".Button--small .Button-content>:not(:last-child)",
+    ".Button--large",
+    ".Button--large .Button-label",
+    ".Button--large .Button-content>:not(:last-child)",
+    ".Button--fullWidth",
+    ".Button--primary",
+    ".Button--primary:hover:not(:disabled)",
+    ".Button--primary:focus",
+    ".Button--primary:focus:not(:focus-visible)",
+    ".Button--primary:focus-visible",
+    ".Button--primary:active:not(:disabled)",
+    ".Button--primary[aria-pressed=true]",
+    ".Button--primary:disabled",
+    ".Button--primary[aria-disabled=true]",
+    ".Button--primary .Counter",
+    ".Button--secondary",
+    ".Button--secondary:hover:not(:disabled)",
+    ".Button--secondary:active:not(:disabled)",
+    ".Button--secondary[aria-pressed=true]",
+    ".Button--secondary:disabled",
+    ".Button--secondary[aria-disabled=true]",
+    ".Button--invisible",
+    ".Button--invisible:hover:not(:disabled)",
+    ".Button--invisible:active:not(:disabled)",
+    ".Button--invisible[aria-pressed=true]",
+    ".Button--invisible:disabled",
+    ".Button--invisible[aria-disabled=true]",
+    ".Button--invisible.Button--invisible-noVisuals .Button-label",
+    ".Button--invisible .Button-visual",
+    ".Button--invisible .Button-visual .Counter",
+    ".Button--link",
+    ".Button--link:hover:not(:disabled)",
+    ".Button--link:focus",
+    ".Button--link:focus-visible",
+    ".Button--link:disabled",
+    ".Button--link[aria-disabled=true]",
+    ".Button--danger",
+    ".Button--danger:hover:not(:disabled)",
+    ".Button--danger:hover:not(:disabled) .Counter",
+    ".Button--danger:active:not(:disabled)",
+    ".Button--danger[aria-pressed=true]",
+    ".Button--danger:disabled",
+    ".Button--danger[aria-disabled=true]",
+    ".Button--danger:disabled .Counter",
+    ".Button--danger[aria-disabled=true] .Counter",
+    ".Button--danger .Counter",
+    ".Button--iconOnly",
+    ".Button--iconOnly.Button--small",
+    ".Button--iconOnly.Button--large"
+  ]
+}

data/app/components/primer/beta/button.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button  */\n\n/* temporary, pre primitives release */\n:root {\n  --duration-fast: 80ms;\n  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n  cursor: pointer;\n  user-select: none;\n  background-color: transparent;\n  border: var(--borderWidth-thin) solid;\n  border-color: transparent;\n  border-radius: var(--borderRadius-medium);\n  color: var(--button-default-fgColor-rest);\n  transition: var(--duration-fast) var(--easing-easeInOut);\n  transition-property: color, fill, background-color, border-color;\n  text-align: center;\n  height: var(--control-medium-size);\n  padding: 0 var(--control-medium-paddingInline-normal);\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--base-size-4);\n  min-width: max-content;\n\n  /* mobile friendly sizing */\n  @media (pointer: coarse) {\n    &::before {\n      @mixin minTouchTarget 48px, 48px;\n    }\n  }\n\n  /* base states */\n\n  &:hover {\n    transition-duration: var(--duration-fast);\n  }\n\n  &:active {\n    transition: none;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n}\n\n.Button-withTooltip {\n  position: relative;\n  display: inline-block;\n}\n\na.Button,\nsummary.Button {\n  &:hover {\n    text-decoration: none;\n  }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n  flex: 1 0 auto;\n  display: grid;\n  grid-template-areas: 'leadingVisual text trailingVisual';\n  grid-template-columns: min-content minmax(0, auto) min-content;\n  align-items: center;\n  place-content: center;\n\n  /* padding-bottom: 1px; optical alignment for firefox */\n\n  & > :not(:last-child) {\n    margin-right: var(--control-medium-gap);\n  }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n  justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n  display: flex;\n  pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-default-bgColor-rest);\n  }\n}\n\n.Button-label {\n  grid-area: text;\n  white-space: nowrap;\n  line-height: var(--text-body-lineHeight-medium);\n}\n\n.Button-leadingVisual {\n  grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n  grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n  margin-right: calc(var(--base-size-4) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n  font-size: var(--text-body-size-small);\n  height: var(--control-small-size);\n  padding: 0 var(--control-small-paddingInline-condensed);\n  gap: var(--control-small-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-small);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-small-gap);\n    }\n  }\n}\n\n.Button--large {\n  height: var(--control-large-size);\n  padding: 0 var(--control-large-paddingInline-spacious);\n  gap: var(--control-large-gap);\n\n  & .Button-label {\n    line-height: var(--text-body-lineHeight-large);\n  }\n\n  & .Button-content {\n    & > :not(:last-child) {\n      margin-right: var(--control-large-gap);\n    }\n  }\n}\n\n.Button--fullWidth {\n  width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n  color: var(--button-primary-fgColor-rest);\n  fill: var(--button-primary-iconColor-rest);\n  background-color: var(--button-primary-bgColor-rest);\n  border-color: var(--button-primary-borderColor-rest);\n  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-primary-bgColor-hover);\n    border-color: var(--button-primary-borderColor-hover);\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutlineOnEmphasis;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutlineOnEmphasis;\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    background-color: var(--button-primary-bgColor-active);\n    box-shadow: var(--button-primary-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-primary-fgColor-disabled);\n    background-color: var(--button-primary-bgColor-disabled);\n    border-color: var(--button-primary-borderColor-disabled);\n    fill: var(--button-primary-fgColor-disabled);\n  }\n\n  & .Counter {\n    color: inherit;\n    background-color: var(--buttonCounter-primary-bgColor-rest);\n  }\n}\n\n/* default (secondary) */\n.Button--secondary {\n  color: var(--button-default-fgColor-rest);\n  fill: var(--fgColor-muted); /* help this */\n  background-color: var(--button-default-bgColor-rest);\n  border-color: var(--button-default-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-default-bgColor-hover);\n    border-color: var(--button-default-borderColor-hover);\n  }\n\n  &:active:not(:disabled) {\n    background-color: var(--button-default-bgColor-active);\n    border-color: var(--button-default-borderColor-active);\n  }\n\n  &[aria-pressed='true'] {\n    background-color: var(--button-default-bgColor-selected);\n    box-shadow: var(--shadow-inset);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    background-color: var(--button-default-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n    fill: var(--control-fgColor-disabled);\n  }\n}\n\n.Button--invisible {\n  color: var(--button-default-fgColor-rest);\n\n  &:hover:not(:disabled) {\n    background-color: var(--button-invisible-bgColor-hover);\n  }\n\n  &[aria-pressed='true'],\n  &:active:not(:disabled) {\n    background-color: var(--button-invisible-bgColor-active);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-invisible-fgColor-disabled);\n    background-color: var(--button-invisible-bgColor-disabled);\n    border-color: var(--button-invisible-borderColor-disabled);\n    fill: var(--button-invisible-fgColor-disabled);\n  }\n\n  /* if button has no visuals, use link blue for text */\n  &.Button--invisible-noVisuals .Button-label {\n    color: var(--button-invisible-fgColor-rest);\n  }\n\n  & .Button-visual {\n    color: var(--fgColor-muted);\n\n    & .Counter {\n      color: var(--fgColor-default);\n    }\n  }\n}\n\n.Button--link {\n  color: var(--fgColor-link-rest);\n  fill: var(--fgColor-link-rest);\n  display: inline-block;\n  font-size: inherit;\n  border: none;\n  height: unset;\n  padding: 0;\n\n  &:hover:not(:disabled) {\n    text-decoration: underline;\n  }\n\n  &:focus-visible,\n  &:focus {\n    outline-offset: 2px;\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--control-fgColor-disabled);\n    background-color: transparent;\n    border-color: transparent;\n    fill: var(--control-fgColor-disabled);\n  }\n}\n\n/* danger */\n.Button--danger {\n  color: var(--button-danger-fgColor-rest);\n  fill: var(--button-danger-iconColor-rest);\n  background-color: var(--button-danger-bgColor-rest);\n  border-color: var(--button-danger-borderColor-rest);\n  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);\n\n  &:hover:not(:disabled) {\n    color: var(--button-danger-fgColor-hover);\n    fill: var(--button-danger-fgColor-hover);\n    background-color: var(--button-danger-bgColor-hover);\n    border-color: var(--button-danger-borderColor-hover);\n    box-shadow: var(--shadow-resting-small), var(--shadow-highlight);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-hover);\n      background-color: var(--buttonCounter-danger-bgColor-hover);\n    }\n  }\n\n  &:active:not(:disabled),\n  &[aria-pressed='true'] {\n    color: var(--button-danger-fgColor-active);\n    fill: var(--button-danger-fgColor-active);\n    background-color: var(--button-danger-bgColor-active);\n    border-color: var(--button-danger-borderColor-active);\n    box-shadow: var(--button-danger-shadow-selected);\n  }\n\n  &:disabled,\n  &[aria-disabled='true'] {\n    color: var(--button-danger-fgColor-disabled);\n    fill: var(--button-danger-fgColor-disabled);\n    background-color: var(--button-danger-bgColor-disabled);\n    border-color: var(--button-default-borderColor-disabled);\n\n    & .Counter {\n      color: var(--buttonCounter-danger-fgColor-disabled);\n      background-color: var(--buttonCounter-danger-bgColor-disabled);\n    }\n  }\n\n  & .Counter {\n    color: var(--buttonCounter-danger-fgColor-rest);\n    background-color: var(--buttonCounter-danger-bgColor-rest);\n  }\n}\n\n.Button--iconOnly {\n  display: inline-grid;\n  place-content: center;\n  padding: unset;\n  width: var(--control-medium-size);\n\n  &.Button--small {\n    width: var(--control-small-size);\n  }\n\n  &.Button--large {\n    width: var(--control-large-size);\n  }\n}\n",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);\n}\n"]}

data/app/components/primer/beta/button.html.erb

@@ -0,0 +1,23 @@
+<%= render Primer::ConditionalWrapper.new(condition: tooltip.present?, tag: :div, display: (:block if @block), classes: "Button-withTooltip") do -%>
+  <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+    <span class="<%= @align_content_classes %>">
+      <% if leading_visual %>
+        <span class="Button-visual Button-leadingVisual">
+          <%= leading_visual %>
+        </span>
+      <% end %>
+      <span class="Button-label"><%= trimmed_content %></span>
+      <% if trailing_visual %>
+        <span class="Button-visual Button-trailingVisual">
+          <%= trailing_visual %>
+        </span>
+      <% end %>
+    </span>
+    <% if trailing_action %>
+      <span class="Button-visual Button-trailingAction">
+        <%= trailing_action %>
+      </span>
+    <% end %>
+  <% end -%>
+  <%= tooltip %>
+<% end -%>

data/app/components/primer/beta/button.pcss

@@ -0,0 +1,366 @@
+/* CSS for Button  */
+
+/* temporary, pre primitives release */
+:root {
+  --duration-fast: 80ms;
+  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+/* base button */
+.Button {
+  position: relative;
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-medium);
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: var(--borderWidth-thin) solid;
+  border-color: transparent;
+  border-radius: var(--borderRadius-medium);
+  color: var(--button-default-fgColor-rest);
+  transition: var(--duration-fast) var(--easing-easeInOut);
+  transition-property: color, fill, background-color, border-color;
+  text-align: center;
+  height: var(--control-medium-size);
+  padding: 0 var(--control-medium-paddingInline-normal);
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--base-size-4);
+  min-width: max-content;
+
+  /* mobile friendly sizing */
+  @media (pointer: coarse) {
+    &::before {
+      @mixin minTouchTarget 48px, 48px;
+    }
+  }
+
+  /* base states */
+
+  &:hover {
+    transition-duration: var(--duration-fast);
+  }
+
+  &:active {
+    transition: none;
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+}
+
+.Button-withTooltip {
+  position: relative;
+  display: inline-block;
+}
+
+a.Button,
+summary.Button {
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+/* wrap grid content to allow trailingAction to lock-right */
+.Button-content {
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: 'leadingVisual text trailingVisual';
+  grid-template-columns: min-content minmax(0, auto) min-content;
+  align-items: center;
+  place-content: center;
+
+  /* padding-bottom: 1px; optical alignment for firefox */
+
+  & > :not(:last-child) {
+    margin-right: var(--control-medium-gap);
+  }
+}
+
+/* center child elements for fullWidth */
+.Button-content--alignStart {
+  justify-content: start;
+}
+
+/* button child elements */
+
+/* align svg */
+.Button-visual {
+  display: flex;
+  pointer-events: none; /* allow click handler to work, avoiding visuals */
+
+  & .Counter {
+    color: inherit;
+    background-color: var(--buttonCounter-default-bgColor-rest);
+  }
+}
+
+.Button-label {
+  grid-area: text;
+  white-space: nowrap;
+  line-height: var(--text-body-lineHeight-medium);
+}
+
+.Button-leadingVisual {
+  grid-area: leadingVisual;
+}
+
+.Button-trailingVisual {
+  grid-area: trailingVisual;
+}
+
+.Button-trailingAction {
+  margin-right: calc(var(--base-size-4) * -1);
+}
+
+/* sizes */
+
+.Button--small {
+  font-size: var(--text-body-size-small);
+  height: var(--control-small-size);
+  padding: 0 var(--control-small-paddingInline-condensed);
+  gap: var(--control-small-gap);
+
+  & .Button-label {
+    line-height: var(--text-body-lineHeight-small);
+  }
+
+  & .Button-content {
+    & > :not(:last-child) {
+      margin-right: var(--control-small-gap);
+    }
+  }
+}
+
+.Button--large {
+  height: var(--control-large-size);
+  padding: 0 var(--control-large-paddingInline-spacious);
+  gap: var(--control-large-gap);
+
+  & .Button-label {
+    line-height: var(--text-body-lineHeight-large);
+  }
+
+  & .Button-content {
+    & > :not(:last-child) {
+      margin-right: var(--control-large-gap);
+    }
+  }
+}
+
+.Button--fullWidth {
+  width: 100%;
+}
+
+/* variants */
+
+/* primary */
+.Button--primary {
+  color: var(--button-primary-fgColor-rest);
+  fill: var(--button-primary-iconColor-rest);
+  background-color: var(--button-primary-bgColor-rest);
+  border-color: var(--button-primary-borderColor-rest);
+  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));
+
+  &:hover:not(:disabled) {
+    background-color: var(--button-primary-bgColor-hover);
+    border-color: var(--button-primary-borderColor-hover);
+  }
+
+  /* fallback :focus state */
+  &:focus {
+    @mixin focusOutlineOnEmphasis;
+
+    /* remove fallback :focus if :focus-visible is supported */
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  /* default focus state */
+  &:focus-visible {
+    @mixin focusOutlineOnEmphasis;
+  }
+
+  &:active:not(:disabled),
+  &[aria-pressed='true'] {
+    background-color: var(--button-primary-bgColor-active);
+    box-shadow: var(--button-primary-shadow-selected);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    color: var(--button-primary-fgColor-disabled);
+    background-color: var(--button-primary-bgColor-disabled);
+    border-color: var(--button-primary-borderColor-disabled);
+    fill: var(--button-primary-fgColor-disabled);
+  }
+
+  & .Counter {
+    color: inherit;
+    background-color: var(--buttonCounter-primary-bgColor-rest);
+  }
+}
+
+/* default (secondary) */
+.Button--secondary {
+  color: var(--button-default-fgColor-rest);
+  fill: var(--fgColor-muted); /* help this */
+  background-color: var(--button-default-bgColor-rest);
+  border-color: var(--button-default-borderColor-rest);
+  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
+
+  &:hover:not(:disabled) {
+    background-color: var(--button-default-bgColor-hover);
+    border-color: var(--button-default-borderColor-hover);
+  }
+
+  &:active:not(:disabled) {
+    background-color: var(--button-default-bgColor-active);
+    border-color: var(--button-default-borderColor-active);
+  }
+
+  &[aria-pressed='true'] {
+    background-color: var(--button-default-bgColor-selected);
+    box-shadow: var(--shadow-inset);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    color: var(--control-fgColor-disabled);
+    background-color: var(--button-default-bgColor-disabled);
+    border-color: var(--button-default-borderColor-disabled);
+    fill: var(--control-fgColor-disabled);
+  }
+}
+
+.Button--invisible {
+  color: var(--button-default-fgColor-rest);
+
+  &:hover:not(:disabled) {
+    background-color: var(--button-invisible-bgColor-hover);
+  }
+
+  &[aria-pressed='true'],
+  &:active:not(:disabled) {
+    background-color: var(--button-invisible-bgColor-active);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    color: var(--button-invisible-fgColor-disabled);
+    background-color: var(--button-invisible-bgColor-disabled);
+    border-color: var(--button-invisible-borderColor-disabled);
+    fill: var(--button-invisible-fgColor-disabled);
+  }
+
+  /* if button has no visuals, use link blue for text */
+  &.Button--invisible-noVisuals .Button-label {
+    color: var(--button-invisible-fgColor-rest);
+  }
+
+  & .Button-visual {
+    color: var(--fgColor-muted);
+
+    & .Counter {
+      color: var(--fgColor-default);
+    }
+  }
+}
+
+.Button--link {
+  color: var(--fgColor-link-rest);
+  fill: var(--fgColor-link-rest);
+  display: inline-block;
+  font-size: inherit;
+  border: none;
+  height: unset;
+  padding: 0;
+
+  &:hover:not(:disabled) {
+    text-decoration: underline;
+  }
+
+  &:focus-visible,
+  &:focus {
+    outline-offset: 2px;
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    color: var(--control-fgColor-disabled);
+    background-color: transparent;
+    border-color: transparent;
+    fill: var(--control-fgColor-disabled);
+  }
+}
+
+/* danger */
+.Button--danger {
+  color: var(--button-danger-fgColor-rest);
+  fill: var(--button-danger-iconColor-rest);
+  background-color: var(--button-danger-bgColor-rest);
+  border-color: var(--button-danger-borderColor-rest);
+  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
+
+  &:hover:not(:disabled) {
+    color: var(--button-danger-fgColor-hover);
+    fill: var(--button-danger-fgColor-hover);
+    background-color: var(--button-danger-bgColor-hover);
+    border-color: var(--button-danger-borderColor-hover);
+    box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
+
+    & .Counter {
+      color: var(--buttonCounter-danger-fgColor-hover);
+      background-color: var(--buttonCounter-danger-bgColor-hover);
+    }
+  }
+
+  &:active:not(:disabled),
+  &[aria-pressed='true'] {
+    color: var(--button-danger-fgColor-active);
+    fill: var(--button-danger-fgColor-active);
+    background-color: var(--button-danger-bgColor-active);
+    border-color: var(--button-danger-borderColor-active);
+    box-shadow: var(--button-danger-shadow-selected);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    color: var(--button-danger-fgColor-disabled);
+    fill: var(--button-danger-fgColor-disabled);
+    background-color: var(--button-danger-bgColor-disabled);
+    border-color: var(--button-default-borderColor-disabled);
+
+    & .Counter {
+      color: var(--buttonCounter-danger-fgColor-disabled);
+      background-color: var(--buttonCounter-danger-bgColor-disabled);
+    }
+  }
+
+  & .Counter {
+    color: var(--buttonCounter-danger-fgColor-rest);
+    background-color: var(--buttonCounter-danger-bgColor-rest);
+  }
+}
+
+.Button--iconOnly {
+  display: inline-grid;
+  place-content: center;
+  padding: unset;
+  width: var(--control-medium-size);
+
+  &.Button--small {
+    width: var(--control-small-size);
+  }
+
+  &.Button--large {
+    width: var(--control-large-size);
+  }
+}

data/app/components/primer/beta/button.rb

@@ -0,0 +1,197 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
+    class Button < Primer::Component
+      status :beta
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :primary => "Button--primary",
+        :secondary => "Button--secondary",
+        :default => "Button--secondary",
+        :danger => "Button--danger",
+        :invisible => "Button--invisible",
+        :link => "Button--link"
+      }.freeze
+      SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        :small => "Button--small",
+        :medium => "Button--medium",
+        :large => "Button--large",
+        DEFAULT_SIZE => "Button--medium"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      DEFAULT_ALIGN_CONTENT = :center
+      ALIGN_CONTENT_MAPPINGS = {
+        :start => "Button-content--alignStart",
+        :center => "",
+        DEFAULT_ALIGN_CONTENT => ""
+      }.freeze
+      ALIGN_CONTENT_OPTIONS = ALIGN_CONTENT_MAPPINGS.keys
+
+      # Leading visuals appear to the left of the button text.
+      #
+      # Use:
+      #
+      # - `leading_visual_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+      renders_one :leading_visual, types: {
+        icon: lambda { |**system_arguments|
+          Primer::Beta::Octicon.new(**system_arguments)
+        }
+      }
+
+      # Trailing visuals appear to the right of the button text.
+      #
+      # Use:
+      #
+      # - `trailing_visual_counter` for a <%= link_to_component(Primer::Beta::Counter) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
+      renders_one :trailing_visual, types: {
+        icon: Primer::Beta::Octicon,
+        label: Primer::Beta::Label,
+        counter: Primer::Beta::Counter
+      }
+
+      # Trailing action appears to the right of the trailing visual.
+      #
+      # Use:
+      #
+      # - `trailing_action_icon` for a <%= link_to_component(Primer::Beta::Octicon) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+      renders_one :trailing_action, types: {
+        icon: Primer::Beta::Octicon
+      }
+
+      # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
+      # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
+      # Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
+      #
+      # @param type [Symbol] (:description) <%= one_of(Primer::Alpha::Tooltip::TYPE_OPTIONS) %>
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Alpha::Tooltip) %>.
+      renders_one :tooltip, lambda { |**system_arguments|
+        raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank? && !Rails.env.production?
+
+        ActiveSupport::Deprecation.warn("Buttons with visible text should not use a `label` tooltip. Consider using Primer::Beta::IconButton instead.") if system_arguments[:type] == :label
+        system_arguments[:for_id] = @id
+        system_arguments[:type] = :description
+
+        Primer::Alpha::Tooltip.new(**system_arguments)
+      }
+
+      # @example Schemes
+      #   <%= render(Primer::Beta::Button.new) { "Default" } %>
+      #   <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Primary" } %>
+      #   <%= render(Primer::Beta::Button.new(scheme: :danger)) { "Danger" } %>
+      #   <%= render(Primer::Beta::Button.new(scheme: :invisible)) { "Invisible" } %>
+      #
+      # @example Sizes
+      #   <%= render(Primer::Beta::Button.new(size: :small)) { "Small" } %>
+      #   <%= render(Primer::Beta::Button.new(size: :medium)) { "Medium" } %>
+      #
+      # @example Full width
+      #   <%= render(Primer::Beta::Button.new(block: :true)) { "Full width" } %>
+      #   <%= render(Primer::Beta::Button.new(block: :true, scheme: :primary)) { "Primary full width" } %>
+      #
+      # @example With leading visual
+      #   <%= render(Primer::Beta::Button.new) do |component| %>
+      #     <% component.with_leading_visual_icon(icon: :star) %>
+      #     Button
+      #   <% end %>
+      #
+      # @example With trailing visual
+      #   <%= render(Primer::Beta::Button.new) do |component| %>
+      #     <% component.with_trailing_visual_counter(count: 15) %>
+      #     Button
+      #   <% end %>
+      #
+      # @example With leading and trailing visuals
+      #   <%= render(Primer::Beta::Button.new) do |component| %>
+      #     <% component.with_leading_visual_icon(icon: :star) %>
+      #     <% component.with_trailing_visual_counter(count: 15) %>
+      #     Button
+      #   <% end %>
+      #
+      # @example With tooltip
+      #   @description
+      #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
+      #   @code
+      #     <%= render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |component| %>
+      #       <% component.with_tooltip(text: "Tooltip text") %>
+      #       Button
+      #     <% end %>
+      #
+      # @param scheme [Symbol] <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
+      # @param block [Boolean] Whether button is full-width with `display: block`.
+      # @param align_content [Symbol] <%= one_of(Primer::Beta::Button::ALIGN_CONTENT_OPTIONS) %>
+      # @param tag [Symbol] (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+      # @param type [Symbol] (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
+      # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        scheme: DEFAULT_SCHEME,
+        size: DEFAULT_SIZE,
+        block: false,
+        align_content: DEFAULT_ALIGN_CONTENT,
+        disabled: false,
+        **system_arguments
+      )
+        @scheme = scheme
+        @block = block
+
+        @system_arguments = system_arguments
+        @system_arguments[:disabled] = disabled
+
+        @id = @system_arguments[:id]
+
+        raise ArgumentError, "The `variant:` argument is no longer supported on Primer::Beta::Button. Consider `scheme:` or `size:`." if !Rails.env.production? && @system_arguments[:variant].present?
+        raise ArgumentError, "The `dropdown:` argument is no longer supported on Primer::Beta::Button. Use the `trailing_action` slot instead." if !Rails.env.production? && @system_arguments[:dropdown].present?
+
+        @align_content_classes = class_names(
+          "Button-content",
+          ALIGN_CONTENT_MAPPINGS[fetch_or_fallback(ALIGN_CONTENT_OPTIONS, align_content, DEFAULT_ALIGN_CONTENT)]
+        )
+
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
+          "Button",
+          "Button--fullWidth" => @block
+        )
+      end
+
+      private
+
+      def before_render
+        return unless @scheme == :invisible && !trailing_visual && !leading_visual && !trailing_action
+
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Button--invisible-noVisuals"
+        )
+      end
+
+      def trimmed_content
+        return if content.blank?
+
+        trimmed_content = content.strip
+
+        return trimmed_content unless content.html_safe?
+
+        # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
+        trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
+      end
+    end
+  end
+end

data/app/components/primer/beta/button_group.css

@@ -0,0 +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)}