diff --git a/.changeset/poor-hotels-roll.md b/.changeset/poor-hotels-roll.md new file mode 100644 index 0000000000..597594f9a3 --- /dev/null +++ b/.changeset/poor-hotels-roll.md @@ -0,0 +1,5 @@ +--- +"@primer/css": major +--- + +Remove `form-validation` styles diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss index 188bfd6449..109b1b425e 100644 --- a/src/forms/form-group.scss +++ b/src/forms/form-group.scss @@ -70,7 +70,8 @@ } label { - position: relative; + // fix for chrome bug, see https://github.com/github/github/issues/53931 + position: static; } &.flattened dt, // TODO: Deprecate diff --git a/src/forms/form-validation.scss b/src/forms/form-validation.scss deleted file mode 100644 index 83c82fbdbd..0000000000 --- a/src/forms/form-validation.scss +++ /dev/null @@ -1,265 +0,0 @@ -// stylelint-disable selector-no-qualifying-type, selector-max-type - -// Inline verification - -.inline-form { - display: inline-block; - - .btn-plain { - background-color: transparent; - border: 0; - } -} - -// Drag and drop -// -// Previously part of `_forms.scss` in Primer. Needs accounting for. - -.drag-and-drop { - // stylelint-disable-next-line primer/spacing - padding: 7px 10px; - margin: 0; - // stylelint-disable-next-line primer/typography - font-size: 13px; - // stylelint-disable-next-line primer/typography - line-height: 16px; - color: var(--color-fg-muted); - background-color: var(--color-canvas-subtle); - border: $border-width $border-style var(--color-border-default); - border-top: 0; - border-bottom-right-radius: $border-radius; - border-bottom-left-radius: $border-radius; - - .default, - .loading, - .error { - display: none; - } - - .error { - color: var(--color-danger-fg); - } - - // Spinner - img { - vertical-align: top; - } -} - -.is-default .drag-and-drop .default { - display: inline-block; -} - -.is-uploading .drag-and-drop .loading { - display: inline-block; -} - -.is-bad-file .drag-and-drop .bad-file { - display: inline-block; -} - -.is-duplicate-filename .drag-and-drop .duplicate-filename { - display: inline-block; -} - -.is-too-big .drag-and-drop .too-big { - display: inline-block; -} - -.is-hidden-file .drag-and-drop .hidden-file { - display: inline-block; -} - -.is-empty .drag-and-drop .empty { - display: inline-block; -} - -.is-bad-permissions .drag-and-drop .bad-permissions { - display: inline-block; -} - -.is-repository-required .drag-and-drop .repository-required { - display: inline-block; -} - -.drag-and-drop-error-info { - font-weight: $font-weight-normal; - color: var(--color-fg-muted); - - a { - color: var(--color-accent-fg); - } -} - -.is-failed .drag-and-drop .failed-request { - display: inline-block; -} - -.manual-file-chooser { - position: absolute; - width: 240px; - // stylelint-disable-next-line primer/spacing - padding: 5px; - // stylelint-disable-next-line primer/spacing - margin-left: -80px; - cursor: pointer; - opacity: 0.0001; -} - -.manual-file-chooser:hover + .manual-file-chooser-text { - text-decoration: underline; -} - -.btn { - // align manual-file-chooser inside a button - .manual-file-chooser { - top: 0; - padding: 0; - // stylelint-disable-next-line primer/typography - line-height: 34px; - } -} - -// Focused Textarea styles -.upload-enabled { - textarea { - display: block; - // stylelint-disable-next-line primer/borders - border-bottom: $border-width dashed var(--color-border-default); - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - } - - &.focused { - border-color: var(--color-accent-fg); - border-radius: $border-radius; - outline: none; - // stylelint-disable-next-line primer/box-shadow - box-shadow: 0 0 0 2px var(--color-accent-fg); - - .form-control { - border-color: transparent; - border-bottom-color: var(--color-accent-fg); - box-shadow: none; - } - - .drag-and-drop { - border-color: transparent; - } - } -} - -// Dropping a file on top -.dragover textarea, -.dragover .drag-and-drop { - // stylelint-disable-next-line primer/box-shadow - box-shadow: rgba(#c9ff00, 1) 0 0 3px; -} - -.write-content { - position: relative; -} - -// Form style with a write and a preview tab -.previewable-comment-form { - position: relative; - - .tabnav { - position: relative; - padding: $spacer-2 $spacer-2 0; - } - - .comment { - border: $border-width $border-style var(--color-border-default); - } - - .comment-form-error { - margin-bottom: $spacer-2; - } - - .write-content, - .preview-content { - display: none; - margin: 0 $spacer-2 $spacer-2; - } - - &.write-selected .write-content, - &.preview-selected .preview-content { - display: block; - } - - textarea { - display: block; - width: 100%; - min-height: 100px; - max-height: 500px; - padding: $spacer-2; - resize: vertical; - } -} - -// Used in our boxed-group-less form styles. Give the submit button enough space -// to breathe without the need for the extra hr. -.form-action-spacious { - // stylelint-disable-next-line primer/spacing - margin-top: 10px; -} - -// A two column form, with a .main and a .sidebar column -// -// Override some `.timeline-comment-wrapper` defaults. -// The `div` is needed to be more specific than the other class. -div.composer { - margin-top: 0; - border: 0; -} - -// Override the previewable comment form defaults -.composer .comment-form-textarea { - height: 200px; - min-height: 200px; -} - -.composer .tabnav { - // stylelint-disable-next-line primer/spacing - margin: 0 0 10px; -} - -// Misc CSS -// -// Previously part of `_forms.scss` in Primer. Needs accounting for. - -h2.account { - // stylelint-disable-next-line primer/spacing - margin: 15px 0 0; - // stylelint-disable-next-line primer/typography - font-size: 18px; - font-weight: $font-weight-normal; - color: var(--color-fg-muted); -} - -p.explain { - position: relative; - font-size: $font-size-small; - color: var(--color-fg-muted); - - strong { - color: var(--color-fg-default); - } - - .octicon { - // stylelint-disable-next-line primer/spacing - margin-right: 5px; - color: var(--color-fg-muted); - } - - .minibutton { - top: -4px; - float: right; - } -} - -// fix for chrome bug, see https://github.com/github/github/issues/53931 -.form-group label { - position: static; -} diff --git a/src/forms/index.scss b/src/forms/index.scss index 849a220a22..1802186ca8 100644 --- a/src/forms/index.scss +++ b/src/forms/index.scss @@ -2,7 +2,6 @@ @import './form-control.scss'; @import './form-select.scss'; @import './form-group.scss'; -@import './form-validation.scss'; @import './input-group.scss'; @import './radio-group.scss'; // new pvc components