openproject-primer_view_components 0.20.0 → 0.22.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +36 -0
  3. data/app/assets/javascripts/app/components/primer/dialog_helper.d.ts +15 -0
  4. data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  5. data/app/assets/javascripts/primer_view_components.js +1 -1
  6. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  7. data/app/assets/styles/primer_view_components.css +1 -1
  8. data/app/assets/styles/primer_view_components.css.map +1 -1
  9. data/app/components/primer/alpha/action_list.css +1 -1
  10. data/app/components/primer/alpha/action_list.css.map +1 -1
  11. data/app/components/primer/alpha/action_list.pcss +11 -33
  12. data/app/components/primer/alpha/action_menu/action_menu_element.js +8 -0
  13. data/app/components/primer/alpha/action_menu/action_menu_element.ts +8 -0
  14. data/app/components/primer/alpha/action_menu.rb +3 -1
  15. data/app/components/primer/alpha/banner.rb +7 -3
  16. data/app/components/primer/alpha/dialog.css +1 -1
  17. data/app/components/primer/alpha/dialog.css.json +12 -27
  18. data/app/components/primer/alpha/dialog.css.map +1 -1
  19. data/app/components/primer/alpha/dialog.html.erb +2 -2
  20. data/app/components/primer/alpha/dialog.pcss +78 -143
  21. data/app/components/primer/alpha/dialog.rb +10 -13
  22. data/app/components/primer/alpha/overlay.css +1 -1
  23. data/app/components/primer/alpha/overlay.css.json +1 -0
  24. data/app/components/primer/alpha/overlay.css.map +1 -1
  25. data/app/components/primer/alpha/overlay.pcss +1 -1
  26. data/app/components/primer/alpha/segmented_control.css +1 -1
  27. data/app/components/primer/alpha/segmented_control.css.json +0 -4
  28. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  29. data/app/components/primer/alpha/segmented_control.pcss +1 -18
  30. data/app/components/primer/alpha/segmented_control.rb +0 -1
  31. data/app/components/primer/alpha/text_field.css +1 -1
  32. data/app/components/primer/alpha/text_field.css.map +1 -1
  33. data/app/components/primer/base_component.rb +1 -1
  34. data/app/components/primer/dialog_helper.d.ts +15 -0
  35. data/app/components/primer/dialog_helper.js +88 -0
  36. data/app/components/primer/dialog_helper.ts +92 -0
  37. data/app/components/primer/open_project/page_header.rb +3 -3
  38. data/app/components/primer/primer.d.ts +1 -0
  39. data/app/components/primer/primer.js +1 -0
  40. data/app/components/primer/primer.ts +1 -0
  41. data/lib/primer/classify/utilities.rb +1 -1
  42. data/lib/primer/deprecations.yml +3 -3
  43. data/lib/primer/forms/dsl/button_input.rb +4 -0
  44. data/lib/primer/forms/dsl/check_box_input.rb +6 -0
  45. data/lib/primer/forms/dsl/hidden_input.rb +4 -0
  46. data/lib/primer/forms/dsl/input.rb +7 -3
  47. data/lib/primer/forms/dsl/radio_button_input.rb +6 -0
  48. data/lib/primer/forms/dsl/select_input.rb +3 -1
  49. data/lib/primer/forms/dsl/submit_button_input.rb +4 -0
  50. data/lib/primer/forms/form_control.html.erb +3 -1
  51. data/lib/primer/view_components/linters/tooltipped_migration.rb +1 -1
  52. data/lib/primer/view_components/version.rb +1 -1
  53. data/lib/primer/yard/docs_helper.rb +1 -1
  54. data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb +1 -1
  55. data/previews/primer/alpha/dialog_preview/scroll_container.html.erb +35 -0
  56. data/previews/primer/alpha/dialog_preview.rb +61 -1
  57. data/previews/primer/alpha/segmented_control_preview.rb +1 -52
  58. data/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb +2 -3
  59. data/previews/primer/alpha/tooltip_preview.rb +1 -1
  60. data/previews/primer/beta/button_preview/trailing_visual.html.erb +2 -1
  61. data/previews/primer/beta/button_preview.rb +4 -2
  62. data/previews/primer/forms_preview/custom_width_fields_form.html.erb +2 -0
  63. data/previews/primer/open_project/page_header_preview.rb +4 -4
  64. data/static/arguments.json +12 -0
  65. data/static/classes.json +5 -23
  66. data/static/constants.json +19 -15
  67. data/static/info_arch.json +67 -68
  68. data/static/previews.json +54 -67
  69. metadata +8 -3
data/app/components/primer/alpha/text_field.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["text_field.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss","<no source>","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"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","file":"text_field.css","sourcesContent":["/* FormControl */\n\n/* groups label, field, caption and inline error message */\n.FormControl {\n display: inline-flex;\n flex-direction: column;\n gap: var(--base-size-4);\n}\n\n/* fill container */\n.FormControl--fullWidth {\n display: flex;\n}\n\n/* <label> */\n.FormControl-label {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--fgColor-default);\n}\n\n/* optional caption */\n.FormControl-caption {\n margin-bottom: 0;\n font-size: var(--text-caption-size);\n font-weight: var(--text-caption-weight);\n line-height: var(--text-caption-lineHeight);\n color: var(--fgColor-muted);\n}\n\n/* inline validation message */\n.FormControl-inlineValidation {\n display: flex;\n font-size: var(--text-caption-size);\n line-height: var(--text-caption-lineHeight);\n font-weight: var(--base-text-weight-semibold);\n color: var(--control-borderColor-danger);\n fill: var(--control-borderColor-danger);\n flex-direction: row;\n align-items: flex-start;\n gap: var(--base-size-4);\n\n & p {\n margin-bottom: 0;\n }\n}\n\n.FormControl-inlineValidation--success {\n color: var(--control-borderColor-success);\n fill: var(--control-borderColor-success);\n}\n\n.FormControl-inlineValidation--visual {\n align-items: center;\n display: flex;\n min-height: var(--base-size-16);\n}\n\n.FormControl-spacingWrapper {\n display: flex;\n flex-direction: column;\n row-gap: 0.5rem;\n}\n\n.FormControl-horizontalGroup {\n display: flex;\n column-gap: 0.5rem;\n}\n\n/* shared among all form control components (input, select, textarea, checkbox, radio) */\n@define-mixin Field {\n color: var(--fgColor-default);\n background-color: var(--bgColor-default);\n border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));\n box-shadow: var(--shadow-inset);\n\n &[disabled] {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n background-color: var(--control-bgColor-disabled);\n border-color: var(--control-borderColor-disabled);\n opacity: 1;\n box-shadow: none;\n -webkit-text-fill-color: var(--control-fgColor-disabled);\n }\n\n &:not(:focus)[invalid='true'] {\n border-color: var(--control-borderColor-danger);\n }\n\n &:not(:focus)[invalid='false'] {\n border-color: var(--control-borderColor-success);\n }\n\n &:not([type='checkbox'], [type='radio']):focus {\n @mixin focusBoxShadowInset;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n border-color: transparent;\n\n @mixin focusBoxShadowInset 1px transparent;\n }\n }\n\n /* default focus state */\n &:not([type='checkbox'], [type='radio']):focus-visible {\n @mixin focusBoxShadowInset;\n }\n}\n\n/* TextInput structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-input-wrap\n** │ │ ├─ .FormControl-input-leadingVisualWrap\n** │ │ │ ├─ .FormControl-input-leadingVisual\n** │ │ ├─ .FormControl-input\n** │ │ ├─ .FormControl-input-trailingAction\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Select structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-select-wrap\n** │ │ ├─ .FormControl-select\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Textarea structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** ├─ .FormControl-textarea\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n.FormControl-input,\n.FormControl-select,\n.FormControl-textarea {\n @mixin Field;\n\n width: 100%;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium);\n border-radius: var(--borderRadius-medium);\n transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);\n transition-property: color, background-color, box-shadow, border-color;\n padding-inline: var(--control-medium-paddingInline-condensed);\n padding-block: calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));\n\n &[disabled] {\n &::placeholder {\n color: var(--control-fgColor-disabled);\n }\n }\n\n &[readonly] {\n background-color: var(--control-bgColor-disabled);\n }\n\n &::placeholder {\n color: var(--control-fgColor-placeholder);\n opacity: 1;\n }\n\n /* sizes */\n\n &.FormControl-small {\n height: var(--control-small-size);\n padding-inline: var(--control-small-paddingInline-normal);\n padding-block: var(--control-small-paddingBlock);\n font-size: var(--text-body-size-small);\n }\n\n &.FormControl-medium {\n height: var(--control-medium-size);\n }\n\n &.FormControl-large {\n height: var(--control-large-size);\n padding-inline: var(--control-large-paddingInline-normal);\n padding-block: var(--control-large-paddingBlock);\n }\n\n /* variants */\n\n &.FormControl-inset {\n background-color: var(--bgColor-muted);\n\n &:focus-visible,\n &:focus {\n background-color: var(--bgColor-default);\n }\n }\n\n &.FormControl-monospace {\n font-family: var(--fontStack-monospace);\n }\n\n /* validation states */\n\n &.FormControl-error {\n border-color: var(--control-borderColor-danger);\n }\n\n &.FormControl-success {\n border-color: var(--control-borderColor-success);\n }\n\n &.FormControl-warning {\n border-color: var(--control-borderColor-warning);\n }\n}\n\n.FormControl-toggleSwitchInput {\n display: flex;\n align-items: flex-start;\n gap: var(--base-size-16);\n}\n\n/* widths */\n@define-mixin FormControl-input-width {\n &.FormControl-input-width--auto {\n width: auto;\n }\n\n &.FormControl-input-width--small {\n max-width: min(256px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--medium {\n max-width: min(320px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--large {\n max-width: min(480px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--xlarge {\n max-width: min(640px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--xxlarge {\n max-width: min(960px, 100vw - 2rem);\n }\n}\n\n/* positioning for leading/trailing items for TextInput */\n.FormControl-input-wrap {\n position: relative;\n display: grid;\n\n @mixin FormControl-input-width;\n\n & .FormControl-input-leadingVisualWrap {\n position: absolute;\n top: var(--base-size-8);\n left: var(--base-size-8);\n display: block;\n width: var(--base-size-16);\n height: var(--base-size-16);\n color: var(--fgColor-muted);\n pointer-events: none;\n\n /* octicon */\n & .FormControl-input-leadingVisual {\n display: block;\n user-select: none;\n }\n }\n\n /* TODO: replace with new Button component */\n & .FormControl-input-trailingAction {\n position: absolute;\n top: var(--base-size-4);\n right: var(--base-size-4);\n z-index: 4;\n display: grid;\n width: var(--control-xsmall-size);\n height: var(--control-xsmall-size);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n background: transparent;\n border: 0;\n border-radius: var(--borderRadius-small);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n align-items: center;\n justify-content: center;\n\n & svg {\n user-select: none;\n }\n\n &[disabled] {\n color: var(--control-fgColor-disabled);\n pointer-events: none;\n }\n\n &:hover {\n background: var(--control-transparent-bgColor-hover);\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n }\n\n /* show vertical divider line between field and button */\n &.FormControl-input-trailingAction--divider {\n &::before {\n position: absolute;\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);\n left: calc(var(--base-size-4) * -1);\n display: block;\n width: var(--borderWidth-thin);\n height: var(--base-size-16);\n content: '';\n background: var(--borderColor-default);\n }\n }\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n\n @media (pointer: coarse) {\n min-width: var(--control-minTarget-coarse);\n min-height: var(--control-minTarget-coarse);\n }\n }\n }\n\n /* if leadingVisual is present */\n\n /*\n\t┌──32px──┬────────────────────┐\n\t╎ ┌───┐ ┌────────────────┐ ╎\n\t╎ 16px 16px ╎\n\t╎ └───┘ └────────────────┘ ╎\n\t└───────8px───────────────────┘\n\t*/\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input {\n padding-inline-start: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n }\n\n /*\n\t┌──────────────────┬──32px──┐\n\t╎ ┌──────────────┐ ┌────┐ ╎\n\t╎ 24px 24px ╎\n\t╎ └──────────────┘ └────┘ ╎\n\t└──────────────────┴────────┘\n */\n\n /* if trailingAction is present */\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n\n /*\n\t\t32px + 1px border\n\t\t┌──────────────────┬──33px──┐\n\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t╎ 24px 24px ╎\n\t\t╎ └──────────────┘ └────┘ ╎\n\t\t└──────────────────┴────────┘\n\t\t*/\n\n /* if trailingAction divider is present, add 1px padding to accomodate input field text\n ** can be refactored to has(.FormControl-input-trailingAction--divider) */\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +\n var(--borderWidth-thin)\n ); /* 33px */\n }\n }\n }\n\n /* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)\n // sizes */\n &.FormControl-input-wrap--small {\n & .FormControl-input-leadingVisualWrap {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n left: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n }\n\n /*\n ┌──────────────────┬──28px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 20px 20px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)\n ); /* 28px */\n }\n\n /*\n\t\t\t28px + 1px border\n\t\t\t┌──────────────────┬──29px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 20px 20px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +\n var(--borderWidth-thin)\n ); /* 29px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n width: calc(var(--control-small-size) - var(--base-size-8));\n height: calc(var(--control-small-size) - var(--base-size-8));\n\n &::before {\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */\n }\n }\n }\n\n &.FormControl-input-wrap--large {\n & .FormControl-input-leadingVisualWrap {\n top: var(--control-medium-paddingInline-normal);\n left: var(--control-medium-paddingInline-normal);\n }\n\n /*\n ┌──36px──┬───12px padding──────┐\n ╎ ┌───┐ ┌────────────────┐ ╎\n ╎ 16px 16px ╎\n ╎ └───┘ └────────────────┘ ╎\n └12px───8px───────────────────┘\n */\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input.FormControl-large {\n padding-inline-start: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n }\n\n /*\n ┌──────────────────┬──36px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 28px 28px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n\n /*\n\t\t\t┌──────────────────┬──37px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 28px 28px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +\n var(--borderWidth-thin)\n ); /* 37px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n right: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n width: var(--control-small-size);\n height: var(--control-small-size);\n\n &::before {\n top: unset;\n height: var(--base-size-20);\n }\n }\n }\n}\n\n.FormControl-select-wrap {\n display: grid;\n grid-template-columns: minmax(0, auto) var(--base-size-16);\n\n @mixin FormControl-input-width;\n\n /* mask allows for background-color to respect themes */\n &::after {\n width: var(--base-size-16);\n height: var(--base-size-16);\n padding-right: var(--base-size-4);\n pointer-events: none;\n content: '';\n background-color: var(--bgColor-neutral-emphasis);\n mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');\n mask-size: contain;\n mask-repeat: no-repeat;\n grid-column: 2;\n grid-row: 1;\n place-self: center end;\n }\n\n /* spans entire grid below mask */\n & .FormControl-select {\n grid-column: 1/-1;\n grid-row: 1;\n appearance: none;\n padding-right: var(--base-size-20);\n }\n}\n\n/* checkbox + radio specific styles */\n\n/* // Checkbox + Radio structure\n** ===================\n**\n** .FormControl-radio-wrap\n** ├─ .FormControl-radio\n** ├─ .FormControl-radio-labelWrap\n** │ ├─ .FormControl-label\n** │ ├─ .FormControl-caption */\n\n.FormControl-checkbox-wrap,\n.FormControl-radio-wrap {\n display: inline-grid;\n grid-template-columns: min-content auto;\n gap: var(--base-size-8);\n\n & .FormControl-checkbox-labelWrap,\n & .FormControl-radio-labelWrap {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4);\n }\n\n & .FormControl-label {\n cursor: pointer;\n }\n}\n\n.FormControl-radio-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n.FormControl-check-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n/* these selectors are temporary to override base.scss\n** once Field styles are widely adopted, we can adjust this and the global base styles */\ninput[type='checkbox'].FormControl-checkbox {\n @mixin Field;\n\n position: relative;\n display: grid;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--control-borderColor-emphasis);\n border-radius: var(--borderRadius-small);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n place-content: center;\n\n &::before {\n width: var(--base-size-16);\n height: var(--base-size-16);\n visibility: hidden;\n content: '';\n background-color: var(--control-checked-fgColor-rest);\n transition: visibility 0s linear 230ms;\n clip-path: inset(var(--base-size-16) 0 0 0);\n\n /* octicon checkmark image */\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');\n mask-size: 75%;\n mask-repeat: no-repeat;\n mask-position: center;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */\n }\n }\n\n /* extend touch target */\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-checkbox-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n background: var(--control-checked-bgColor-rest, var(--color-accent-fg));\n border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--control-fgColor-disabled);\n border-color: var(--control-fgColor-disabled);\n opacity: 1;\n\n &::before {\n background-color: var(--control-checked-fgColor-rest);\n }\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n &:indeterminate {\n &::before {\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n visibility: visible;\n }\n }\n}\n\ninput[type='radio'].FormControl-radio {\n @mixin Field;\n\n position: relative;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--control-borderColor-emphasis);\n border-radius: var(--borderRadius-full);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));\n border-width: var(--base-size-4);\n\n &[disabled], &:disabled {\n cursor: not-allowed;\n border-color: var(--control-fgColor-disabled);\n\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n}\n\n@keyframes checkmarkIn {\n from {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n}\n\n@keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n border-color: var(--focus-outlineColor);\n outline: none;\n box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n",null,"@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
1
+ {"version":3,"sources":["text_field.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss","<no source>","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"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","file":"text_field.css","sourcesContent":["/* FormControl */\n\n/* groups label, field, caption and inline error message */\n.FormControl {\n display: inline-flex;\n flex-direction: column;\n gap: var(--base-size-4);\n}\n\n/* fill container */\n.FormControl--fullWidth {\n display: flex;\n}\n\n/* <label> */\n.FormControl-label {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--fgColor-default);\n}\n\n/* optional caption */\n.FormControl-caption {\n margin-bottom: 0;\n font-size: var(--text-caption-size);\n font-weight: var(--text-caption-weight);\n line-height: var(--text-caption-lineHeight);\n color: var(--fgColor-muted);\n}\n\n/* inline validation message */\n.FormControl-inlineValidation {\n display: flex;\n font-size: var(--text-caption-size);\n line-height: var(--text-caption-lineHeight);\n font-weight: var(--base-text-weight-semibold);\n color: var(--control-borderColor-danger);\n fill: var(--control-borderColor-danger);\n flex-direction: row;\n align-items: flex-start;\n gap: var(--base-size-4);\n\n & p {\n margin-bottom: 0;\n }\n}\n\n.FormControl-inlineValidation--success {\n color: var(--control-borderColor-success);\n fill: var(--control-borderColor-success);\n}\n\n.FormControl-inlineValidation--visual {\n align-items: center;\n display: flex;\n min-height: var(--base-size-16);\n}\n\n.FormControl-spacingWrapper {\n display: flex;\n flex-direction: column;\n row-gap: 0.5rem;\n}\n\n.FormControl-horizontalGroup {\n display: flex;\n column-gap: 0.5rem;\n}\n\n/* shared among all form control components (input, select, textarea, checkbox, radio) */\n@define-mixin Field {\n color: var(--fgColor-default);\n background-color: var(--bgColor-default);\n border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));\n box-shadow: var(--shadow-inset);\n\n &[disabled] {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n background-color: var(--control-bgColor-disabled);\n border-color: var(--control-borderColor-disabled);\n opacity: 1;\n box-shadow: none;\n -webkit-text-fill-color: var(--control-fgColor-disabled);\n }\n\n &:not(:focus)[invalid='true'] {\n border-color: var(--control-borderColor-danger);\n }\n\n &:not(:focus)[invalid='false'] {\n border-color: var(--control-borderColor-success);\n }\n\n &:not([type='checkbox'], [type='radio']):focus {\n @mixin focusBoxShadowInset;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n border-color: transparent;\n\n @mixin focusBoxShadowInset 1px transparent;\n }\n }\n\n /* default focus state */\n &:not([type='checkbox'], [type='radio']):focus-visible {\n @mixin focusBoxShadowInset;\n }\n}\n\n/* TextInput structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-input-wrap\n** │ │ ├─ .FormControl-input-leadingVisualWrap\n** │ │ │ ├─ .FormControl-input-leadingVisual\n** │ │ ├─ .FormControl-input\n** │ │ ├─ .FormControl-input-trailingAction\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Select structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-select-wrap\n** │ │ ├─ .FormControl-select\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Textarea structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** ├─ .FormControl-textarea\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n.FormControl-input,\n.FormControl-select,\n.FormControl-textarea {\n @mixin Field;\n\n width: 100%;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium);\n border-radius: var(--borderRadius-medium);\n transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);\n transition-property: color, background-color, box-shadow, border-color;\n padding-inline: var(--control-medium-paddingInline-condensed);\n padding-block: calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));\n\n &[disabled] {\n &::placeholder {\n color: var(--control-fgColor-disabled);\n }\n }\n\n &[readonly] {\n background-color: var(--control-bgColor-disabled);\n }\n\n &::placeholder {\n color: var(--control-fgColor-placeholder);\n opacity: 1;\n }\n\n /* sizes */\n\n &.FormControl-small {\n height: var(--control-small-size);\n padding-inline: var(--control-small-paddingInline-normal);\n padding-block: var(--control-small-paddingBlock);\n font-size: var(--text-body-size-small);\n }\n\n &.FormControl-medium {\n height: var(--control-medium-size);\n }\n\n &.FormControl-large {\n height: var(--control-large-size);\n padding-inline: var(--control-large-paddingInline-normal);\n padding-block: var(--control-large-paddingBlock);\n }\n\n /* variants */\n\n &.FormControl-inset {\n background-color: var(--bgColor-muted);\n\n &:focus-visible,\n &:focus {\n background-color: var(--bgColor-default);\n }\n }\n\n &.FormControl-monospace {\n font-family: var(--fontStack-monospace);\n }\n\n /* validation states */\n\n &.FormControl-error {\n border-color: var(--control-borderColor-danger);\n }\n\n &.FormControl-success {\n border-color: var(--control-borderColor-success);\n }\n\n &.FormControl-warning {\n border-color: var(--control-borderColor-warning);\n }\n}\n\n.FormControl-toggleSwitchInput {\n display: flex;\n align-items: flex-start;\n gap: var(--base-size-16);\n}\n\n/* widths */\n@define-mixin FormControl-input-width {\n &.FormControl-input-width--auto {\n width: auto;\n }\n\n &.FormControl-input-width--small {\n max-width: min(256px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--medium {\n max-width: min(320px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--large {\n max-width: min(480px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--xlarge {\n max-width: min(640px, 100vw - 2rem);\n }\n\n &.FormControl-input-width--xxlarge {\n max-width: min(960px, 100vw - 2rem);\n }\n}\n\n/* positioning for leading/trailing items for TextInput */\n.FormControl-input-wrap {\n position: relative;\n display: grid;\n\n @mixin FormControl-input-width;\n\n & .FormControl-input-leadingVisualWrap {\n position: absolute;\n top: var(--base-size-8);\n left: var(--base-size-8);\n display: block;\n width: var(--base-size-16);\n height: var(--base-size-16);\n color: var(--fgColor-muted);\n pointer-events: none;\n\n /* octicon */\n & .FormControl-input-leadingVisual {\n display: block;\n user-select: none;\n }\n }\n\n /* TODO: replace with new Button component */\n & .FormControl-input-trailingAction {\n position: absolute;\n top: var(--base-size-4);\n right: var(--base-size-4);\n z-index: 4;\n display: grid;\n width: var(--control-xsmall-size);\n height: var(--control-xsmall-size);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n background: transparent;\n border: 0;\n border-radius: var(--borderRadius-small);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n align-items: center;\n justify-content: center;\n\n & svg {\n user-select: none;\n }\n\n &[disabled] {\n color: var(--control-fgColor-disabled);\n pointer-events: none;\n }\n\n &:hover {\n background: var(--control-transparent-bgColor-hover);\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n }\n\n /* show vertical divider line between field and button */\n &.FormControl-input-trailingAction--divider {\n &::before {\n position: absolute;\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);\n left: calc(var(--base-size-4) * -1);\n display: block;\n width: var(--borderWidth-thin);\n height: var(--base-size-16);\n content: '';\n background: var(--borderColor-default);\n }\n }\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n\n @media (pointer: coarse) {\n min-width: var(--control-minTarget-coarse);\n min-height: var(--control-minTarget-coarse);\n }\n }\n }\n\n /* if leadingVisual is present */\n\n /*\n\t┌──32px──┬────────────────────┐\n\t╎ ┌───┐ ┌────────────────┐ ╎\n\t╎ 16px 16px ╎\n\t╎ └───┘ └────────────────┘ ╎\n\t└───────8px───────────────────┘\n\t*/\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input {\n padding-inline-start: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n }\n\n /*\n\t┌──────────────────┬──32px──┐\n\t╎ ┌──────────────┐ ┌────┐ ╎\n\t╎ 24px 24px ╎\n\t╎ └──────────────┘ └────┘ ╎\n\t└──────────────────┴────────┘\n */\n\n /* if trailingAction is present */\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n\n /*\n\t\t32px + 1px border\n\t\t┌──────────────────┬──33px──┐\n\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t╎ 24px 24px ╎\n\t\t╎ └──────────────┘ └────┘ ╎\n\t\t└──────────────────┴────────┘\n\t\t*/\n\n /* if trailingAction divider is present, add 1px padding to accomodate input field text\n ** can be refactored to has(.FormControl-input-trailingAction--divider) */\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +\n var(--borderWidth-thin)\n ); /* 33px */\n }\n }\n }\n\n /* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)\n // sizes */\n &.FormControl-input-wrap--small {\n & .FormControl-input-leadingVisualWrap {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n left: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n }\n\n /*\n ┌──────────────────┬──28px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 20px 20px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)\n ); /* 28px */\n }\n\n /*\n\t\t\t28px + 1px border\n\t\t\t┌──────────────────┬──29px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 20px 20px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +\n var(--borderWidth-thin)\n ); /* 29px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n width: calc(var(--control-small-size) - var(--base-size-8));\n height: calc(var(--control-small-size) - var(--base-size-8));\n\n &::before {\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */\n }\n }\n }\n\n &.FormControl-input-wrap--large {\n & .FormControl-input-leadingVisualWrap {\n top: var(--control-medium-paddingInline-normal);\n left: var(--control-medium-paddingInline-normal);\n }\n\n /*\n ┌──36px──┬───12px padding──────┐\n ╎ ┌───┐ ┌────────────────┐ ╎\n ╎ 16px 16px ╎\n ╎ └───┘ └────────────────┘ ╎\n └12px───8px───────────────────┘\n */\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input.FormControl-large {\n padding-inline-start: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n }\n\n /*\n ┌──────────────────┬──36px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 28px 28px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n\n /*\n\t\t\t┌──────────────────┬──37px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 28px 28px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +\n var(--borderWidth-thin)\n ); /* 37px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n right: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n width: var(--control-small-size);\n height: var(--control-small-size);\n\n &::before {\n top: unset;\n height: var(--base-size-20);\n }\n }\n }\n}\n\n.FormControl-select-wrap {\n display: grid;\n grid-template-columns: minmax(0, auto) var(--base-size-16);\n\n @mixin FormControl-input-width;\n\n /* mask allows for background-color to respect themes */\n &::after {\n width: var(--base-size-16);\n height: var(--base-size-16);\n padding-right: var(--base-size-4);\n pointer-events: none;\n content: '';\n background-color: var(--bgColor-neutral-emphasis);\n mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');\n mask-size: contain;\n mask-repeat: no-repeat;\n grid-column: 2;\n grid-row: 1;\n place-self: center end;\n }\n\n /* spans entire grid below mask */\n & .FormControl-select {\n grid-column: 1/-1;\n grid-row: 1;\n appearance: none;\n padding-right: var(--base-size-20);\n }\n}\n\n/* checkbox + radio specific styles */\n\n/* // Checkbox + Radio structure\n** ===================\n**\n** .FormControl-radio-wrap\n** ├─ .FormControl-radio\n** ├─ .FormControl-radio-labelWrap\n** │ ├─ .FormControl-label\n** │ ├─ .FormControl-caption */\n\n.FormControl-checkbox-wrap,\n.FormControl-radio-wrap {\n display: inline-grid;\n grid-template-columns: min-content auto;\n gap: var(--base-size-8);\n\n & .FormControl-checkbox-labelWrap,\n & .FormControl-radio-labelWrap {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4);\n }\n\n & .FormControl-label {\n cursor: pointer;\n }\n}\n\n.FormControl-radio-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n.FormControl-check-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n/* these selectors are temporary to override base.scss\n** once Field styles are widely adopted, we can adjust this and the global base styles */\ninput[type='checkbox'].FormControl-checkbox {\n @mixin Field;\n\n position: relative;\n display: grid;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--control-borderColor-emphasis);\n border-radius: var(--borderRadius-small);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n place-content: center;\n\n &::before {\n width: var(--base-size-16);\n height: var(--base-size-16);\n visibility: hidden;\n content: '';\n background-color: var(--control-checked-fgColor-rest);\n transition: visibility 0s linear 230ms;\n clip-path: inset(var(--base-size-16) 0 0 0);\n\n /* octicon checkmark image */\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');\n mask-size: 75%;\n mask-repeat: no-repeat;\n mask-position: center;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */\n }\n }\n\n /* extend touch target */\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-checkbox-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n background: var(--control-checked-bgColor-rest, var(--color-accent-fg));\n border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--control-fgColor-disabled);\n border-color: var(--control-fgColor-disabled);\n opacity: 1;\n\n &::before {\n background-color: var(--control-checked-fgColor-rest);\n }\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n &:indeterminate {\n &::before {\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n visibility: visible;\n }\n }\n}\n\ninput[type='radio'].FormControl-radio {\n @mixin Field;\n\n position: relative;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--control-borderColor-emphasis);\n border-radius: var(--borderRadius-full);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));\n border-width: var(--base-size-4);\n\n &[disabled], &:disabled {\n cursor: not-allowed;\n border-color: var(--control-fgColor-disabled);\n\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n}\n\n@keyframes checkmarkIn {\n from {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n}\n\n@keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n border-color: var(--focus-outlineColor);\n outline: none;\n box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n",null,"@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
data/app/components/primer/base_component.rb CHANGED
@@ -97,7 +97,7 @@ module Primer
97
97
  # | :- | :- | :- |
98
98
  # | `display` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:display)) %> |
99
99
  # | `w` | Symbol | Sets the element's width. <%= one_of(Primer::Classify::Utilities.mappings(:w)) %> |
100
- # | `h` | Symbol | Sets the element's height. <%= one_of(Primer::Classify::Utilities.mappings(:h)) %> |
100
+ # | `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |
101
101
  # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of(Primer::Classify::Utilities.mappings(:hide)) %> |
102
102
  # | `visibility` | Symbol | Visibility. <%= one_of(Primer::Classify::Utilities.mappings(:visibility)) %> |
103
103
  # | `vertical_align` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:vertical_align)) %> |
data/app/components/primer/dialog_helper.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ export declare class DialogHelperElement extends HTMLElement {
2
+ #private;
3
+ get dialog(): HTMLDialogElement | null;
4
+ connectedCallback(): void;
5
+ disconnectedCallback(): void;
6
+ handleEvent(event: MouseEvent): void;
7
+ }
8
+ declare global {
9
+ interface Window {
10
+ DialogHelperElement: typeof DialogHelperElement;
11
+ }
12
+ interface HTMLElementTagNameMap {
13
+ 'dialog-helper': DialogHelperElement;
14
+ }
15
+ }
data/app/components/primer/dialog_helper.js ADDED
@@ -0,0 +1,88 @@
1
+ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
2
+ if (kind === "m") throw new TypeError("Private method is not writable");
3
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
4
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
5
+ return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
6
+ };
7
+ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
8
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
9
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
10
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
11
+ };
12
+ var _DialogHelperElement_abortController;
13
+ function dialogInvokerButtonHandler(event) {
14
+ const target = event.target;
15
+ const button = target === null || target === void 0 ? void 0 : target.closest('button');
16
+ if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true')
17
+ return;
18
+ // If the user is clicking a valid dialog trigger
19
+ let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
20
+ if (dialogId) {
21
+ event.stopPropagation();
22
+ const dialog = document.getElementById(dialogId);
23
+ if (dialog instanceof HTMLDialogElement) {
24
+ dialog.showModal();
25
+ // A buttons default behaviour in some browsers it to send a pointer event
26
+ // If the behaviour is allowed through the dialog will be shown but then
27
+ // quickly hidden- as if it were never shown. This prevents that.
28
+ event.preventDefault();
29
+ event.stopPropagation();
30
+ }
31
+ }
32
+ dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
33
+ if (dialogId) {
34
+ const dialog = document.getElementById(dialogId);
35
+ if (dialog instanceof HTMLDialogElement && dialog.open) {
36
+ dialog.close();
37
+ }
38
+ }
39
+ }
40
+ export class DialogHelperElement extends HTMLElement {
41
+ constructor() {
42
+ super(...arguments);
43
+ _DialogHelperElement_abortController.set(this, null);
44
+ }
45
+ get dialog() {
46
+ return this.querySelector('dialog');
47
+ }
48
+ connectedCallback() {
49
+ const { signal } = (__classPrivateFieldSet(this, _DialogHelperElement_abortController, new AbortController(), "f"));
50
+ document.addEventListener('click', dialogInvokerButtonHandler, true);
51
+ document.addEventListener('click', this, { signal });
52
+ this.ownerDocument.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - this.ownerDocument.body.clientWidth}px`);
53
+ new MutationObserver(records => {
54
+ for (const record of records) {
55
+ if (record.target === this.dialog) {
56
+ this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'));
57
+ }
58
+ }
59
+ }).observe(this, { subtree: true, attributeFilter: ['open'] });
60
+ }
61
+ disconnectedCallback() {
62
+ var _a;
63
+ (_a = __classPrivateFieldGet(this, _DialogHelperElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
64
+ }
65
+ handleEvent(event) {
66
+ const target = event.target;
67
+ const dialog = this.dialog;
68
+ if (!(dialog === null || dialog === void 0 ? void 0 : dialog.open))
69
+ return;
70
+ // if the target is inside the dialog, but is not the dialog itself, leave
71
+ // the dialog open
72
+ if ((target === null || target === void 0 ? void 0 : target.closest('dialog')) === dialog && target !== dialog)
73
+ return;
74
+ const rect = dialog.getBoundingClientRect();
75
+ const clickWasInsideDialog = rect.top <= event.clientY &&
76
+ event.clientY <= rect.top + rect.height &&
77
+ rect.left <= event.clientX &&
78
+ event.clientX <= rect.left + rect.width;
79
+ if (!clickWasInsideDialog) {
80
+ dialog.close();
81
+ }
82
+ }
83
+ }
84
+ _DialogHelperElement_abortController = new WeakMap();
85
+ if (!window.customElements.get('dialog-helper')) {
86
+ window.DialogHelperElement = DialogHelperElement;
87
+ window.customElements.define('dialog-helper', DialogHelperElement);
88
+ }
data/app/components/primer/dialog_helper.ts ADDED
@@ -0,0 +1,92 @@
1
+ function dialogInvokerButtonHandler(event: Event) {
2
+ const target = event.target as HTMLElement
3
+ const button = target?.closest('button')
4
+
5
+ if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true') return
6
+
7
+ // If the user is clicking a valid dialog trigger
8
+ let dialogId = button?.getAttribute('data-show-dialog-id')
9
+ if (dialogId) {
10
+ event.stopPropagation()
11
+ const dialog = document.getElementById(dialogId)
12
+ if (dialog instanceof HTMLDialogElement) {
13
+ dialog.showModal()
14
+ // A buttons default behaviour in some browsers it to send a pointer event
15
+ // If the behaviour is allowed through the dialog will be shown but then
16
+ // quickly hidden- as if it were never shown. This prevents that.
17
+ event.preventDefault()
18
+ event.stopPropagation()
19
+ }
20
+ }
21
+
22
+ dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id')
23
+ if (dialogId) {
24
+ const dialog = document.getElementById(dialogId)
25
+ if (dialog instanceof HTMLDialogElement && dialog.open) {
26
+ dialog.close()
27
+ }
28
+ }
29
+ }
30
+
31
+ export class DialogHelperElement extends HTMLElement {
32
+ get dialog() {
33
+ return this.querySelector('dialog')
34
+ }
35
+
36
+ #abortController: AbortController | null = null
37
+ connectedCallback() {
38
+ const {signal} = (this.#abortController = new AbortController())
39
+ document.addEventListener('click', dialogInvokerButtonHandler, true)
40
+ document.addEventListener('click', this, {signal})
41
+ this.ownerDocument.body.style.setProperty(
42
+ '--dialog-scrollgutter',
43
+ `${window.innerWidth - this.ownerDocument.body.clientWidth}px`,
44
+ )
45
+ new MutationObserver(records => {
46
+ for (const record of records) {
47
+ if (record.target === this.dialog) {
48
+ this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'))
49
+ }
50
+ }
51
+ }).observe(this, {subtree: true, attributeFilter: ['open']})
52
+ }
53
+
54
+ disconnectedCallback() {
55
+ this.#abortController?.abort()
56
+ }
57
+
58
+ handleEvent(event: MouseEvent) {
59
+ const target = event.target as HTMLElement
60
+ const dialog = this.dialog
61
+ if (!dialog?.open) return
62
+
63
+ // if the target is inside the dialog, but is not the dialog itself, leave
64
+ // the dialog open
65
+ if (target?.closest('dialog') === dialog && target !== dialog) return
66
+
67
+ const rect = dialog.getBoundingClientRect()
68
+ const clickWasInsideDialog =
69
+ rect.top <= event.clientY &&
70
+ event.clientY <= rect.top + rect.height &&
71
+ rect.left <= event.clientX &&
72
+ event.clientX <= rect.left + rect.width
73
+
74
+ if (!clickWasInsideDialog) {
75
+ dialog.close()
76
+ }
77
+ }
78
+ }
79
+
80
+ declare global {
81
+ interface Window {
82
+ DialogHelperElement: typeof DialogHelperElement
83
+ }
84
+ interface HTMLElementTagNameMap {
85
+ 'dialog-helper': DialogHelperElement
86
+ }
87
+ }
88
+
89
+ if (!window.customElements.get('dialog-helper')) {
90
+ window.DialogHelperElement = DialogHelperElement
91
+ window.customElements.define('dialog-helper', DialogHelperElement)
92
+ }
data/app/components/primer/open_project/page_header.rb CHANGED
@@ -7,16 +7,16 @@ module Primer
7
7
  HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
8
8
  HEADING_TAG_FALLBACK = :h2
9
9
 
10
- DEFAULT_HEADER_VARIANT = :medium
10
+ DEFAULT_HEADER_VARIANT = :large
11
11
  HEADER_VARIANT_OPTIONS = [
12
- :large,
12
+ :medium,
13
13
  DEFAULT_HEADER_VARIANT
14
14
  ].freeze
15
15
 
16
16
  DEFAULT_BACK_BUTTON_SIZE = :medium
17
17
  BACK_BUTTON_SIZE_OPTIONS = [
18
18
  :small,
19
- DEFAULT_HEADER_VARIANT,
19
+ DEFAULT_BACK_BUTTON_SIZE,
20
20
  :large
21
21
  ].freeze
22
22
 
data/app/components/primer/primer.d.ts CHANGED
@@ -2,6 +2,7 @@ import '@github/include-fragment-element';
2
2
  import './alpha/action_bar_element';
3
3
  import './alpha/dropdown';
4
4
  import './anchored_position';
5
+ import './dialog_helper';
5
6
  import './focus_group';
6
7
  import './scrollable_region';
7
8
  import './alpha/image_crop';
data/app/components/primer/primer.js CHANGED
@@ -2,6 +2,7 @@ import '@github/include-fragment-element';
2
2
  import './alpha/action_bar_element';
3
3
  import './alpha/dropdown';
4
4
  import './anchored_position';
5
+ import './dialog_helper';
5
6
  import './focus_group';
6
7
  import './scrollable_region';
7
8
  import './alpha/image_crop';
data/app/components/primer/primer.ts CHANGED
@@ -2,6 +2,7 @@ import '@github/include-fragment-element'
2
2
  import './alpha/action_bar_element'
3
3
  import './alpha/dropdown'
4
4
  import './anchored_position'
5
+ import './dialog_helper'
5
6
  import './focus_group'
6
7
  import './scrollable_region'
7
8
  import './alpha/image_crop'
data/lib/primer/classify/utilities.rb CHANGED
@@ -18,6 +18,7 @@ module Primer
18
18
 
19
19
  # Replacements for some classnames that end up being a different argument key
20
20
  REPLACEMENT_KEYS = {
21
+ "^f" => "font_size",
21
22
  "^anim" => "animation",
22
23
  "^v-align" => "vertical_align",
23
24
  "^d" => "display",
@@ -28,7 +29,6 @@ module Primer
28
29
  "^color-bg" => "bg",
29
30
  "^color-border" => "border_color",
30
31
  "^color-fg" => "color",
31
- "^f" => "font_size",
32
32
  "^rounded" => "border_radius"
33
33
  }.freeze
34
34
 
data/lib/primer/deprecations.yml CHANGED
@@ -40,7 +40,7 @@ deprecations:
40
40
  - component: "Primer::ButtonComponent"
41
41
  autocorrect: false
42
42
  replacement: "Primer::Beta::Button"
43
- guide: "https://primer.style/design/guides/development/rails/migration-guides/primer-button-component"
43
+ guide: "https://primer.style/guides/rails/migration-guides/primer-button-component"
44
44
 
45
45
  - component: "Primer::IconButton"
46
46
  autocorrect: true
@@ -49,7 +49,7 @@ deprecations:
49
49
  - component: "Primer::LayoutComponent"
50
50
  autocorrect: false
51
51
  replacement: "Primer::Alpha::Layout"
52
- guide: "https://primer.style/design/guides/development/rails/migration-guides/primer-layout-component"
52
+ guide: "https://primer.style/guides/rails/migration-guides/primer-layout-component"
53
53
 
54
54
  - component: "Primer::Navigation::TabComponent"
55
55
  autocorrect: true
@@ -62,4 +62,4 @@ deprecations:
62
62
  - component: "Primer::Truncate"
63
63
  autocorrect: false
64
64
  replacement: "Primer::Beta::Truncate"
65
- guide: "https://primer.style/design/guides/development/rails/migration-guides/primer-truncate"
65
+ guide: "https://primer.style/guides/rails/migration-guides/primer-truncate"
data/lib/primer/forms/dsl/button_input.rb CHANGED
@@ -23,6 +23,10 @@ module Primer
23
23
  def type
24
24
  :button
25
25
  end
26
+
27
+ def supports_validation?
28
+ false
29
+ end
26
30
  end
27
31
  end
28
32
  end
data/lib/primer/forms/dsl/check_box_input.rb CHANGED
@@ -27,9 +27,11 @@ module Primer
27
27
  end
28
28
 
29
29
  # check boxes cannot be invalid, as both checked and unchecked are valid states
30
+ # :nocov:
30
31
  def valid?
31
32
  true
32
33
  end
34
+ # :nocov:
33
35
 
34
36
  def to_component
35
37
  CheckBox.new(input: self)
@@ -44,6 +46,10 @@ module Primer
44
46
  :check_box
45
47
  end
46
48
 
49
+ def supports_validation?
50
+ false
51
+ end
52
+
47
53
  private
48
54
 
49
55
  def caption_template_name
data/lib/primer/forms/dsl/hidden_input.rb CHANGED
@@ -23,6 +23,10 @@ module Primer
23
23
  def type
24
24
  :hidden
25
25
  end
26
+
27
+ def supports_validation?
28
+ false
29
+ end
26
30
  end
27
31
  end
28
32
  end
data/lib/primer/forms/dsl/input.rb CHANGED
@@ -121,7 +121,7 @@ module Primer
121
121
  @base_id = SecureRandom.uuid
122
122
 
123
123
  @ids = {}.tap do |id_map|
124
- id_map[:validation] = "validation-#{@base_id}"
124
+ id_map[:validation] = "validation-#{@base_id}" if supports_validation?
125
125
  id_map[:caption] = "caption-#{@base_id}" if caption? || caption_template?
126
126
  end
127
127
 
@@ -208,11 +208,11 @@ module Primer
208
208
  end
209
209
 
210
210
  def valid?
211
- validation_messages.empty? && !@invalid
211
+ supports_validation? && validation_messages.empty? && !@invalid
212
212
  end
213
213
 
214
214
  def invalid?
215
- !valid?
215
+ supports_validation? && !valid?
216
216
  end
217
217
 
218
218
  def hidden?
@@ -284,6 +284,10 @@ module Primer
284
284
  true
285
285
  end
286
286
 
287
+ def supports_validation?
288
+ true
289
+ end
290
+
287
291
  def validation_arguments
288
292
  {
289
293
  class: "FormControl-inlineValidation",
data/lib/primer/forms/dsl/radio_button_input.rb CHANGED
@@ -18,9 +18,11 @@ module Primer
18
18
  end
19
19
 
20
20
  # radio buttons cannot be invalid, as both selected and unselected are valid states
21
+ # :nocov:
21
22
  def valid?
22
23
  true
23
24
  end
25
+ # :nocov:
24
26
 
25
27
  def to_component
26
28
  RadioButton.new(input: self)
@@ -36,6 +38,10 @@ module Primer
36
38
  :radio_button
37
39
  end
38
40
  # :nocov:
41
+
42
+ def supports_validation?
43
+ false
44
+ end
39
45
  end
40
46
  end
41
47
  end
data/lib/primer/forms/dsl/select_input.rb CHANGED
@@ -9,12 +9,14 @@ module Primer
9
9
 
10
10
  # :nodoc:
11
11
  class Option
12
+ include Primer::TestSelectorHelper
13
+
12
14
  attr_reader :label, :value, :system_arguments
13
15
 
14
16
  def initialize(label:, value:, **system_arguments)
15
17
  @label = label
16
18
  @value = value
17
- @system_arguments = system_arguments
19
+ @system_arguments = add_test_selector(system_arguments)
18
20
  end
19
21
  end
20
22
 
data/lib/primer/forms/dsl/submit_button_input.rb CHANGED
@@ -23,6 +23,10 @@ module Primer
23
23
  def type
24
24
  :submit_button
25
25
  end
26
+
27
+ def supports_validation?
28
+ false
29
+ end
26
30
  end
27
31
  end
28
32
  end
data/lib/primer/forms/form_control.html.erb CHANGED
@@ -9,7 +9,9 @@
9
9
  <% end %>
10
10
  <% end %>
11
11
  <%= content %>
12
- <%= render(ValidationMessage.new(input: @input)) %>
12
+ <% if @input.supports_validation? %>
13
+ <%= render(ValidationMessage.new(input: @input)) %>
14
+ <% end %>
13
15
  <%= render(Caption.new(input: @input)) %>
14
16
  <% end %>
15
17
  <% else %>
data/lib/primer/view_components/linters/tooltipped_migration.rb CHANGED
@@ -10,7 +10,7 @@ module ERBLint
10
10
  include LinterRegistry
11
11
  include Helpers::RuleHelpers
12
12
 
13
- MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. There are major accessibility concerns with using this tooltip so please take action. See https://primer.style/design/guides/development/rails/migration-guides/primer-css-tooltipped."
13
+ MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. There are major accessibility concerns with using this tooltip so please take action. See https://primer.style/guides/rails/migration-guides/primer-css-tooltipped."
14
14
  TOOLTIPPED_RUBY_PATTERN = /classes:.*tooltipped|class:.*tooltipped/.freeze
15
15
 
16
16
  def run(processed_source)
data/lib/primer/view_components/version.rb CHANGED
@@ -5,7 +5,7 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 20
8
+ MINOR = 22
9
9
  PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
data/lib/primer/yard/docs_helper.rb CHANGED
@@ -8,7 +8,7 @@ module Primer
8
8
  module DocsHelper
9
9
  def one_of(enumerable, lower: false, sort: true)
10
10
  # Sort the array if requested
11
- if sort
11
+ if sort && !enumerable.nil?
12
12
  enumerable = enumerable.sort do |a, b|
13
13
  a.instance_of?(b.class) ? a <=> b : a.class.to_s <=> b.class.to_s
14
14
  end
data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb CHANGED
@@ -1,4 +1,4 @@
1
- <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, subtitle: subtitle, visually_hide_title: false)) do |d| %>
1
+ <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, position: position, subtitle: subtitle, visually_hide_title: false)) do |d| %>
2
2
  <% d.with_show_button { button_text } %>
3
3
  <% d.with_body do %>
4
4
  <p>Dialog One!</p>