primer_view_components 0.5.0 → 0.6.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +66 -0
- data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +3 -2
- data/app/assets/javascripts/app/components/primer/alpha/x_banner.d.ts +3 -1
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list/item.rb +17 -6
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +2 -0
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +4 -2
- data/app/components/primer/alpha/action_list.rb +61 -6
- data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +3 -2
- data/app/components/primer/alpha/action_menu/action_menu_element.js +9 -2
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +10 -5
- data/app/components/primer/alpha/action_menu/list.rb +63 -34
- data/app/components/primer/alpha/action_menu.rb +12 -0
- data/app/components/primer/alpha/banner.html.erb +1 -1
- data/app/components/primer/alpha/banner.rb +13 -9
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.pcss +2 -1
- data/app/components/primer/alpha/modal_dialog.js +1 -1
- data/app/components/primer/alpha/modal_dialog.ts +1 -1
- data/app/components/primer/alpha/nav_list/group.rb +12 -3
- data/app/components/primer/alpha/nav_list.rb +80 -16
- data/app/components/primer/alpha/tool_tip.js +3 -3
- data/app/components/primer/alpha/tool_tip.ts +3 -3
- data/app/components/primer/alpha/x_banner.d.ts +3 -1
- data/app/components/primer/alpha/x_banner.js +24 -10
- data/app/components/primer/alpha/x_banner.ts +14 -12
- data/app/components/primer/base_component.rb +1 -1
- data/app/components/primer/beta/avatar.rb +1 -1
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +1 -1
- data/app/components/primer/beta/counter.css +1 -1
- data/app/components/primer/beta/counter.css.map +1 -1
- data/app/components/primer/beta/counter.pcss +1 -1
- data/app/components/primer/beta/state.css +1 -1
- data/app/components/primer/beta/state.css.map +1 -1
- data/app/components/primer/beta/state.pcss +3 -3
- data/app/forms/submit_button_form.rb +1 -1
- data/lib/primer/classify/utilities.yml +2 -0
- data/lib/primer/forms/button.rb +0 -5
- data/lib/primer/forms/dsl/input.rb +2 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/yard/lookbook_pages_backend.rb +31 -0
- data/lib/tasks/custom_utilities.yml +2 -0
- data/previews/primer/alpha/action_list_preview.rb +89 -17
- data/previews/primer/alpha/action_menu_preview.rb +79 -37
- data/previews/primer/alpha/banner_preview/with_action_button.html.erb +1 -1
- data/previews/primer/alpha/banner_preview/with_action_content.html.erb +1 -1
- data/previews/primer/alpha/banner_preview.rb +11 -14
- data/previews/primer/alpha/nav_list_preview.rb +17 -0
- data/static/arguments.json +6 -12
- data/static/constants.json +6 -0
- data/static/info_arch.json +371 -22
- data/static/previews.json +15 -2
- metadata +2 -2
|
@@ -1 +1 @@
|
|
|
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(--shadow-highlight);\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"]}
|
|
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"]}
|
|
@@ -165,7 +165,7 @@ summary.Button {
|
|
|
165
165
|
fill: var(--button-primary-iconColor-rest);
|
|
166
166
|
background-color: var(--button-primary-bgColor-rest);
|
|
167
167
|
border-color: var(--button-primary-borderColor-rest);
|
|
168
|
-
box-shadow: var(--shadow-resting-small), var(--shadow-highlight);
|
|
168
|
+
box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow)), var(--shadow-highlight, var(--color-btn-primary-inset-shadow));
|
|
169
169
|
|
|
170
170
|
&:hover:not(:disabled) {
|
|
171
171
|
background-color: var(--button-primary-bgColor-hover);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-
|
|
1
|
+
.Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));border-radius:2em;color:var(--fgColor-default,var(--color-fg-default));display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:calc(var(--base-size-20,1.25rem) - var(--borderWidth-thin,max(1px, .0625rem))*2);min-width:var(--base-size-20,1.25rem);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.Counter--secondary{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));color:var(--fgColor-muted,var(--color-fg-muted))}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,
|
|
1
|
+
{"version":3,"sources":["counter.pcss"],"names":[],"mappings":"AAEA,SASE,wEAA0E,CAC1E,6GAAgE,CAChE,iBAAkB,CAJlB,oDAA6B,CAN7B,oBAAqB,CAGrB,4CAAsC,CACtC,8CAA2C,CAC3C,4FAAoE,CAJpE,qCAA8B,CAC9B,aAAc,CAKd,iBAcF,CATE,eACE,YACF,CAGA,kBAEE,UAAY,CADZ,uBAEF,CAGF,kBAEE,uEAAiD,CADjD,2DAEF,CAEA,oBAEE,yEAA8C,CAD9C,gDAEF","file":"counter.css","sourcesContent":["/* Counter */\n\n.Counter {\n display: inline-block;\n min-width: var(--base-size-20); /* makes sure it's a circle with just one digit */\n padding: 0 6px;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-medium);\n line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */\n color: var(--fgColor-default);\n text-align: center;\n background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));\n border: var(--borderWidth-thin) solid var(--counter-borderColor);\n border-radius: 2em;\n\n &:empty {\n display: none;\n }\n\n /* Is this selector used? could not find any use of it */\n & .octicon {\n vertical-align: text-top;\n opacity: 0.8;\n }\n}\n\n.Counter--primary {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-neutral-emphasis);\n}\n\n.Counter--secondary {\n color: var(--fgColor-muted);\n background-color: var(--bgColor-neutral-muted);\n}\n"]}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
line-height: calc(var(--base-size-20) - var(--borderWidth-thin) * 2); /* 20px - 2px for the borders */
|
|
10
10
|
color: var(--fgColor-default);
|
|
11
11
|
text-align: center;
|
|
12
|
-
background-color: var(--bgColor-neutral-muted);
|
|
12
|
+
background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));
|
|
13
13
|
border: var(--borderWidth-thin) solid var(--counter-borderColor);
|
|
14
14
|
border-radius: 2em;
|
|
15
15
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);line-height:var(--control-medium-lineBoxHeight,1.25rem);padding:5px var(--control-medium-paddingInline-normal,.75rem);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000}.State,.State--draft,.State--open,.state{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-
|
|
1
|
+
.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);line-height:var(--control-medium-lineBoxHeight,1.25rem);padding:5px var(--control-medium-paddingInline-normal,.75rem);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000}.State,.State--draft,.State--open,.state{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis))}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis))}.State--closed,.State--merged{color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis))}.State--small{font-size:var(--text-body-size-small,.75rem);line-height:var(--base-size-24,1.5rem);padding:0 10px}.State--small .octicon{width:1em}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,8CAAuC,CACvC,8CAA2C,CAC3C,uDAAgD,CAHhD,6DAAuD,CAIvD,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,uEAAiD,CACjD,4DACF,CAEA,yCALE,2DAQF,CAHA,aAEE,
|
|
1
|
+
{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cASE,iBAAkB,CAPlB,oBAAqB,CAErB,8CAAuC,CACvC,8CAA2C,CAC3C,uDAAgD,CAHhD,6DAAuD,CAIvD,iBAAkB,CAClB,kBAEF,CAEA,4BAIE,uEAAiD,CACjD,4DACF,CAEA,yCALE,2DAQF,CAHA,aAEE,wEACF,CAEA,eAEE,wEACF,CAEA,8BAJE,2DAOF,CAHA,eAEE,4EACF,CAIA,cAEE,4CAAsC,CACtC,sCAAgC,CAFhC,cAOF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n display: inline-block;\n padding: 5px var(--control-medium-paddingInline-normal);\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n line-height: var(--control-medium-lineBoxHeight);\n text-align: center;\n white-space: nowrap;\n border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-neutral-emphasis);\n border: var(--borderWidth-thin) solid transparent;\n}\n\n.State--open {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n}\n\n.State--merged {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n}\n\n.State--closed {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n}\n\n/* Small 24px */\n\n.State--small {\n padding: 0 10px;\n font-size: var(--text-body-size-small);\n line-height: var(--base-size-24);\n\n & .octicon {\n width: 1em; /* Ensures different icons don't change State indicator width */\n }\n}\n"]}
|
|
@@ -24,17 +24,17 @@
|
|
|
24
24
|
|
|
25
25
|
.State--open {
|
|
26
26
|
color: var(--fgColor-onEmphasis);
|
|
27
|
-
background-color: var(--bgColor-open-emphasis);
|
|
27
|
+
background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.State--merged {
|
|
31
31
|
color: var(--fgColor-onEmphasis);
|
|
32
|
-
background-color: var(--bgColor-done-emphasis);
|
|
32
|
+
background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
.State--closed {
|
|
36
36
|
color: var(--fgColor-onEmphasis);
|
|
37
|
-
background-color: var(--bgColor-closed-emphasis);
|
|
37
|
+
background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
/* Small 24px */
|
|
@@ -14,7 +14,7 @@ class SubmitButtonForm < ApplicationForm
|
|
|
14
14
|
)
|
|
15
15
|
|
|
16
16
|
my_form.group(layout: :horizontal) do |button_group|
|
|
17
|
-
button_group.submit(name: :submit, label: "Submit", scheme: :primary, mb: 3) do |component|
|
|
17
|
+
button_group.submit(name: :submit, label: "Submit", scheme: :primary, mb: 3, disabled: true) do |component|
|
|
18
18
|
component.with_leading_visual_icon(icon: :"check-circle")
|
|
19
19
|
end
|
|
20
20
|
|
data/lib/primer/forms/button.rb
CHANGED
|
@@ -39,11 +39,6 @@ module Primer
|
|
|
39
39
|
|
|
40
40
|
# rails uses a string for this, but PVC wants a symbol
|
|
41
41
|
@input.merge_input_arguments!(type: type.to_sym)
|
|
42
|
-
|
|
43
|
-
# Never disable buttons. This overrides the global
|
|
44
|
-
# ActionView::Base.automatically_disable_submit_tag setting.
|
|
45
|
-
# Disabling buttons is not accessible.
|
|
46
|
-
@input.remove_input_data(:disable_with)
|
|
47
42
|
end
|
|
48
43
|
|
|
49
44
|
def input_arguments
|
|
@@ -176,6 +176,7 @@ module Primer
|
|
|
176
176
|
each_component do |component_ref|
|
|
177
177
|
page_for(component_ref).generate
|
|
178
178
|
end
|
|
179
|
+
generate_system_args_docs
|
|
179
180
|
end
|
|
180
181
|
|
|
181
182
|
def page_for(component_ref)
|
|
@@ -194,6 +195,36 @@ module Primer
|
|
|
194
195
|
def each_component(&block)
|
|
195
196
|
manifest.each(&block)
|
|
196
197
|
end
|
|
198
|
+
|
|
199
|
+
def generate_system_args_docs
|
|
200
|
+
docs = registry.find(Primer::BaseComponent)
|
|
201
|
+
|
|
202
|
+
path = File.expand_path(
|
|
203
|
+
File.join(
|
|
204
|
+
*%w[.. .. .. previews pages system-arguments.md.erb]
|
|
205
|
+
), __dir__
|
|
206
|
+
)
|
|
207
|
+
|
|
208
|
+
data = {
|
|
209
|
+
"description_md" => docs.base_docstring.to_s,
|
|
210
|
+
"args_md" => view_context.render(inline: docs.constructor.base_docstring)
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
frontmatter = {
|
|
214
|
+
"title" => "System arguments",
|
|
215
|
+
"id" => "system_arguments",
|
|
216
|
+
"data" => data
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
File.write(
|
|
220
|
+
path, <<~ERB
|
|
221
|
+
#{YAML.dump(frontmatter)}
|
|
222
|
+
---
|
|
223
|
+
<%= @page.data[:description_md] %>
|
|
224
|
+
<%= @page.data[:args_md] %>
|
|
225
|
+
ERB
|
|
226
|
+
)
|
|
227
|
+
end
|
|
197
228
|
end
|
|
198
229
|
end
|
|
199
230
|
end
|
|
@@ -100,11 +100,13 @@ module Primer
|
|
|
100
100
|
scheme: Primer::Alpha::ActionList::DEFAULT_SCHEME,
|
|
101
101
|
show_dividers: false
|
|
102
102
|
)
|
|
103
|
-
render(
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
103
|
+
render(
|
|
104
|
+
Primer::Alpha::ActionList.new(
|
|
105
|
+
role: role,
|
|
106
|
+
scheme: scheme,
|
|
107
|
+
show_dividers: show_dividers
|
|
108
|
+
)
|
|
109
|
+
) do |component|
|
|
108
110
|
component.with_heading(title: "Action List")
|
|
109
111
|
component.with_item(label: "Item one", href: "/") do |item|
|
|
110
112
|
item.with_leading_visual_icon(icon: :gear)
|
|
@@ -145,9 +147,11 @@ module Primer
|
|
|
145
147
|
list_id: "unique-id",
|
|
146
148
|
subtitle: "This is a subtitle"
|
|
147
149
|
)
|
|
148
|
-
render(
|
|
149
|
-
|
|
150
|
-
|
|
150
|
+
render(
|
|
151
|
+
Primer::Alpha::ActionList::Heading.new(
|
|
152
|
+
scheme: scheme, list_id: list_id, title: title, subtitle: subtitle
|
|
153
|
+
)
|
|
154
|
+
)
|
|
151
155
|
end
|
|
152
156
|
|
|
153
157
|
# @label Item [playground]
|
|
@@ -162,7 +166,6 @@ module Primer
|
|
|
162
166
|
# @param description_scheme [Symbol] select [inline, block]
|
|
163
167
|
# @param active toggle
|
|
164
168
|
# @param leading_visual_icon [Symbol] octicon
|
|
165
|
-
# @param leading_visual_avatar_src text
|
|
166
169
|
# @param trailing_visual_icon [Symbol] octicon
|
|
167
170
|
# @param trailing_visual_label text
|
|
168
171
|
# @param trailing_visual_counter number
|
|
@@ -183,7 +186,6 @@ module Primer
|
|
|
183
186
|
active: false,
|
|
184
187
|
expanded: false,
|
|
185
188
|
leading_visual_icon: nil,
|
|
186
|
-
leading_visual_avatar_src: nil,
|
|
187
189
|
trailing_visual_icon: nil,
|
|
188
190
|
trailing_visual_label: nil,
|
|
189
191
|
trailing_visual_counter: nil,
|
|
@@ -206,11 +208,7 @@ module Primer
|
|
|
206
208
|
expanded: expanded,
|
|
207
209
|
id: "tooltip-test"
|
|
208
210
|
) do |item|
|
|
209
|
-
if leading_visual_icon && leading_visual_icon != :none
|
|
210
|
-
item.with_leading_visual_icon(icon: leading_visual_icon)
|
|
211
|
-
elsif leading_visual_avatar_src
|
|
212
|
-
item.with_leading_visual_avatar(src: leading_visual_avatar_src, alt: "An avatar")
|
|
213
|
-
end
|
|
211
|
+
item.with_leading_visual_icon(icon: leading_visual_icon) if leading_visual_icon && leading_visual_icon != :none
|
|
214
212
|
|
|
215
213
|
if trailing_visual_icon && trailing_visual_icon != :none
|
|
216
214
|
item.with_trailing_visual_icon(icon: trailing_visual_icon)
|
|
@@ -224,13 +222,87 @@ module Primer
|
|
|
224
222
|
|
|
225
223
|
if private_leading_action_icon && private_leading_action_icon != :none
|
|
226
224
|
item.with_private_leading_action_icon(icon: private_leading_action_icon)
|
|
227
|
-
elsif private_trailing_action_icon
|
|
225
|
+
elsif private_trailing_action_icon && private_trailing_action_icon != :none
|
|
228
226
|
item.with_private_trailing_action_icon(icon: private_trailing_action_icon)
|
|
229
227
|
end
|
|
230
228
|
|
|
231
229
|
item.with_trailing_action(icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
|
|
232
230
|
|
|
233
|
-
item.
|
|
231
|
+
item.with_description { description } if description
|
|
232
|
+
|
|
233
|
+
item.with_tooltip(text: "Tooltip text", for_id: "tooltip-test", type: :description) if tooltip
|
|
234
|
+
end
|
|
235
|
+
|
|
236
|
+
render(list)
|
|
237
|
+
end
|
|
238
|
+
|
|
239
|
+
# @label Avatar item [playground]
|
|
240
|
+
#
|
|
241
|
+
# @param username text
|
|
242
|
+
# @param truncate_label toggle
|
|
243
|
+
# @param src text
|
|
244
|
+
# @param shape [Symbol] select [circle, square]
|
|
245
|
+
# @param size [Symbol] select [medium, large, xlarge]
|
|
246
|
+
# @param scheme [Symbol] select [default, danger]
|
|
247
|
+
# @param disabled toggle
|
|
248
|
+
# @param full_name text
|
|
249
|
+
# @param full_name_scheme [Symbol] select [inline, block]
|
|
250
|
+
# @param active toggle
|
|
251
|
+
# @param trailing_visual_icon [Symbol] octicon
|
|
252
|
+
# @param trailing_visual_label text
|
|
253
|
+
# @param trailing_visual_counter number
|
|
254
|
+
# @param trailing_visual_text text
|
|
255
|
+
# @param private_trailing_action_icon [Symbol] octicon
|
|
256
|
+
# @param trailing_action toggle
|
|
257
|
+
# @param tooltip toggle
|
|
258
|
+
def avatar_item(
|
|
259
|
+
username: "hulk_smash",
|
|
260
|
+
truncate_label: false,
|
|
261
|
+
src: "https://avatars.githubusercontent.com/u/103004183?v=4",
|
|
262
|
+
shape: Primer::Beta::Avatar::DEFAULT_SHAPE,
|
|
263
|
+
size: Primer::Alpha::ActionList::Item::DEFAULT_SIZE,
|
|
264
|
+
scheme: Primer::Alpha::ActionList::Item::DEFAULT_SCHEME,
|
|
265
|
+
disabled: false,
|
|
266
|
+
full_name: "Bruce Banner",
|
|
267
|
+
full_name_scheme: Primer::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME,
|
|
268
|
+
active: false,
|
|
269
|
+
expanded: false,
|
|
270
|
+
trailing_visual_icon: nil,
|
|
271
|
+
trailing_visual_label: nil,
|
|
272
|
+
trailing_visual_counter: nil,
|
|
273
|
+
trailing_visual_text: nil,
|
|
274
|
+
private_trailing_action_icon: nil,
|
|
275
|
+
trailing_action: false,
|
|
276
|
+
tooltip: false
|
|
277
|
+
)
|
|
278
|
+
list = Primer::Alpha::ActionList.new(aria: { label: "Action List" })
|
|
279
|
+
list.with_avatar_item(
|
|
280
|
+
username: username,
|
|
281
|
+
truncate_label: truncate_label,
|
|
282
|
+
src: src,
|
|
283
|
+
size: size,
|
|
284
|
+
scheme: scheme,
|
|
285
|
+
disabled: disabled,
|
|
286
|
+
full_name: full_name,
|
|
287
|
+
full_name_scheme: full_name_scheme,
|
|
288
|
+
active: active,
|
|
289
|
+
expanded: expanded,
|
|
290
|
+
id: "tooltip-test",
|
|
291
|
+
avatar_arguments: { shape: shape }
|
|
292
|
+
) do |item|
|
|
293
|
+
if trailing_visual_icon && trailing_visual_icon != :none
|
|
294
|
+
item.with_trailing_visual_icon(icon: trailing_visual_icon)
|
|
295
|
+
elsif trailing_visual_label
|
|
296
|
+
item.with_trailing_visual_label { trailing_visual_label }
|
|
297
|
+
elsif trailing_visual_counter
|
|
298
|
+
item.with_trailing_visual_counter(count: trailing_visual_counter)
|
|
299
|
+
elsif trailing_visual_text
|
|
300
|
+
item.with_trailing_visual_text(trailing_visual_text)
|
|
301
|
+
end
|
|
302
|
+
|
|
303
|
+
item.with_private_trailing_action_icon(icon: private_trailing_action_icon) if private_trailing_action_icon && private_trailing_action_icon != :none
|
|
304
|
+
|
|
305
|
+
item.with_trailing_action(icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
|
|
234
306
|
|
|
235
307
|
item.with_tooltip(text: "Tooltip text", for_id: "tooltip-test", type: :description) if tooltip
|
|
236
308
|
end
|
|
@@ -27,15 +27,18 @@ module Primer
|
|
|
27
27
|
|
|
28
28
|
# @label Content labels
|
|
29
29
|
#
|
|
30
|
-
def content_labels
|
|
31
|
-
end
|
|
30
|
+
def content_labels; end
|
|
32
31
|
|
|
33
32
|
# @label Default
|
|
34
33
|
#
|
|
35
34
|
# @snapshot interactive
|
|
36
35
|
def default
|
|
37
36
|
render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
|
|
38
|
-
menu.with_show_button
|
|
37
|
+
menu.with_show_button do |button|
|
|
38
|
+
button.with_trailing_action_icon(icon: :"triangle-down")
|
|
39
|
+
"Menu"
|
|
40
|
+
end
|
|
41
|
+
|
|
39
42
|
menu.with_item(label: "Copy link")
|
|
40
43
|
menu.with_item(label: "Quote reply")
|
|
41
44
|
menu.with_item(label: "Reference in new issue")
|
|
@@ -54,7 +57,10 @@ module Primer
|
|
|
54
57
|
# @snapshot interactive
|
|
55
58
|
def wide
|
|
56
59
|
render(Primer::Alpha::ActionMenu.new(select_variant: :single, size: :medium)) do |menu|
|
|
57
|
-
menu.with_show_button
|
|
60
|
+
menu.with_show_button do |button|
|
|
61
|
+
button.with_trailing_action_icon(icon: :"triangle-down")
|
|
62
|
+
"A wider menu"
|
|
63
|
+
end
|
|
58
64
|
|
|
59
65
|
menu.with_item(label: "Default", active: true, value: "default") do |item|
|
|
60
66
|
item.with_trailing_visual_label(scheme: :accent, inline: true).with_content("Recommended")
|
|
@@ -93,18 +99,30 @@ module Primer
|
|
|
93
99
|
def multiple_select
|
|
94
100
|
render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
|
|
95
101
|
menu.with_show_button { "Menu" }
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
102
|
+
|
|
103
|
+
menu.with_avatar_item(
|
|
104
|
+
src: "https://avatars.githubusercontent.com/u/18661030?v=4",
|
|
105
|
+
username: "langermank",
|
|
106
|
+
full_name: "Katie Langerman",
|
|
107
|
+
full_name_scheme: :inline,
|
|
108
|
+
avatar_arguments: { shape: :square }
|
|
109
|
+
)
|
|
110
|
+
|
|
111
|
+
menu.with_avatar_item(
|
|
112
|
+
src: "https://avatars.githubusercontent.com/u/54012?s=96&v=4",
|
|
113
|
+
username: "jonrohan",
|
|
114
|
+
full_name: "Jon Rohan",
|
|
115
|
+
full_name_scheme: :inline,
|
|
116
|
+
avatar_arguments: { shape: :square }
|
|
117
|
+
)
|
|
118
|
+
|
|
119
|
+
menu.with_avatar_item(
|
|
120
|
+
src: "https://avatars.githubusercontent.com/u/1446503?v=4",
|
|
121
|
+
username: "broccolinisoup",
|
|
122
|
+
full_name: "Armağan Ersöz",
|
|
123
|
+
full_name_scheme: :inline,
|
|
124
|
+
avatar_arguments: { shape: :square }
|
|
125
|
+
)
|
|
108
126
|
end
|
|
109
127
|
end
|
|
110
128
|
|
|
@@ -136,7 +154,10 @@ module Primer
|
|
|
136
154
|
# @snapshot interactive
|
|
137
155
|
def single_select_with_internal_label
|
|
138
156
|
render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Menu")) do |menu|
|
|
139
|
-
menu.with_show_button
|
|
157
|
+
menu.with_show_button do |button|
|
|
158
|
+
button.with_trailing_action_icon(icon: :"triangle-down")
|
|
159
|
+
"Menu"
|
|
160
|
+
end
|
|
140
161
|
menu.with_item(label: "Copy link") do |item|
|
|
141
162
|
item.with_trailing_visual_label(scheme: :accent, inline: true).with_content("Recommended")
|
|
142
163
|
end
|
|
@@ -151,18 +172,29 @@ module Primer
|
|
|
151
172
|
def multiple_selected_items
|
|
152
173
|
render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
|
|
153
174
|
menu.with_show_button { "Menu" }
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
175
|
+
|
|
176
|
+
menu.with_avatar_item(
|
|
177
|
+
src: "https://avatars.githubusercontent.com/u/18661030?v=4",
|
|
178
|
+
username: "langermank",
|
|
179
|
+
full_name: "Katie Langerman",
|
|
180
|
+
full_name_scheme: :inline,
|
|
181
|
+
active: true
|
|
182
|
+
)
|
|
183
|
+
|
|
184
|
+
menu.with_avatar_item(
|
|
185
|
+
src: "https://avatars.githubusercontent.com/u/54012?s=96&v=4",
|
|
186
|
+
username: "jonrohan",
|
|
187
|
+
full_name: "Jon Rohan",
|
|
188
|
+
full_name_scheme: :inline
|
|
189
|
+
)
|
|
190
|
+
|
|
191
|
+
menu.with_avatar_item(
|
|
192
|
+
src: "https://avatars.githubusercontent.com/u/1446503?v=4",
|
|
193
|
+
username: "broccolinisoup",
|
|
194
|
+
full_name: "Armağan Ersöz",
|
|
195
|
+
full_name_scheme: :inline,
|
|
196
|
+
active: true
|
|
197
|
+
)
|
|
166
198
|
end
|
|
167
199
|
end
|
|
168
200
|
|
|
@@ -184,8 +216,7 @@ module Primer
|
|
|
184
216
|
|
|
185
217
|
# @label With actions
|
|
186
218
|
#
|
|
187
|
-
def with_actions
|
|
188
|
-
end
|
|
219
|
+
def with_actions; end
|
|
189
220
|
|
|
190
221
|
# @label Single select form
|
|
191
222
|
#
|
|
@@ -229,7 +260,10 @@ module Primer
|
|
|
229
260
|
#
|
|
230
261
|
def block_description
|
|
231
262
|
render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
|
|
232
|
-
menu.with_show_button
|
|
263
|
+
menu.with_show_button do |button|
|
|
264
|
+
button.with_trailing_action_icon(icon: :"triangle-down")
|
|
265
|
+
"Menu"
|
|
266
|
+
end
|
|
233
267
|
menu.with_item(label: "Item label") do |item|
|
|
234
268
|
item.with_description.with_content("Block description")
|
|
235
269
|
end
|
|
@@ -246,7 +280,10 @@ module Primer
|
|
|
246
280
|
#
|
|
247
281
|
def inline_description
|
|
248
282
|
render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
|
|
249
|
-
menu.with_show_button
|
|
283
|
+
menu.with_show_button do |button|
|
|
284
|
+
button.with_trailing_action_icon(icon: :"triangle-down")
|
|
285
|
+
"Menu"
|
|
286
|
+
end
|
|
250
287
|
menu.with_item(label: "Item label", description_scheme: :inline) do |item|
|
|
251
288
|
item.with_description.with_content("Inline description")
|
|
252
289
|
end
|
|
@@ -257,7 +294,10 @@ module Primer
|
|
|
257
294
|
#
|
|
258
295
|
def leading_visual
|
|
259
296
|
render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
|
|
260
|
-
menu.with_show_button
|
|
297
|
+
menu.with_show_button do |button|
|
|
298
|
+
button.with_trailing_action_icon(icon: :"triangle-down")
|
|
299
|
+
"Menu"
|
|
300
|
+
end
|
|
261
301
|
menu.with_item(label: "Item label", description_scheme: :inline) do |item|
|
|
262
302
|
item.with_leading_visual_icon(icon: :gear)
|
|
263
303
|
item.with_description.with_content("Inline description")
|
|
@@ -269,7 +309,10 @@ module Primer
|
|
|
269
309
|
#
|
|
270
310
|
def leading_visual_single_select
|
|
271
311
|
render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1", select_variant: :single)) do |menu|
|
|
272
|
-
menu.with_show_button
|
|
312
|
+
menu.with_show_button do |button|
|
|
313
|
+
button.with_trailing_action_icon(icon: :"triangle-down")
|
|
314
|
+
"Menu"
|
|
315
|
+
end
|
|
273
316
|
menu.with_item(label: "Item label", description_scheme: :inline) do |item|
|
|
274
317
|
item.with_leading_visual_icon(icon: :gear)
|
|
275
318
|
item.with_description.with_content("Inline description")
|
|
@@ -279,8 +322,7 @@ module Primer
|
|
|
279
322
|
|
|
280
323
|
# @label Two menus
|
|
281
324
|
#
|
|
282
|
-
def two_menus
|
|
283
|
-
end
|
|
325
|
+
def two_menus; end
|
|
284
326
|
end
|
|
285
327
|
end
|
|
286
328
|
end
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<%= render(Primer::Alpha::Banner.new(full: full,
|
|
1
|
+
<%= render(Primer::Alpha::Banner.new(full: full, dismiss_scheme: dismiss_scheme, icon: icon, scheme: scheme)) do |component| %>
|
|
2
2
|
<% component.with_action_button(size: :medium) { "Take action" } %>
|
|
3
3
|
<%= content %>
|
|
4
4
|
<% end %>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<%= render(Primer::Alpha::Banner.new(full: full,
|
|
1
|
+
<%= render(Primer::Alpha::Banner.new(full: full, dismiss_scheme: dismiss_scheme, icon: icon, scheme: scheme)) do |component| %>
|
|
2
2
|
<% component.with_action_content do %>
|
|
3
3
|
<%= render(Primer::Beta::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
|
|
4
4
|
<% end %>
|