From d57053606af19c2afc26470d08cb5b5ff8f0ed25 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 23 Mar 2023 17:45:33 +0900 Subject: [PATCH 1/4] Move `.form-group label` --- src/forms/form-group.scss | 5 +++++ src/forms/form-validation.scss | 5 ----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss index 188bfd6449..94a1d505b6 100644 --- a/src/forms/form-group.scss +++ b/src/forms/form-group.scss @@ -285,3 +285,8 @@ vertical-align: middle; } } + + // fix for chrome bug, see https://github.com/github/github/issues/53931 + .form-group label { + position: static; + } diff --git a/src/forms/form-validation.scss b/src/forms/form-validation.scss index 83c82fbdbd..6f6281b271 100644 --- a/src/forms/form-validation.scss +++ b/src/forms/form-validation.scss @@ -258,8 +258,3 @@ p.explain { float: right; } } - -// fix for chrome bug, see https://github.com/github/github/issues/53931 -.form-group label { - position: static; -} From 6457480aa02797898027a44d589a937866c66aad Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 23 Mar 2023 17:46:40 +0900 Subject: [PATCH 2/4] Remove `form-validation.scss` --- src/forms/form-validation.scss | 260 --------------------------------- src/forms/index.scss | 1 - 2 files changed, 261 deletions(-) delete mode 100644 src/forms/form-validation.scss diff --git a/src/forms/form-validation.scss b/src/forms/form-validation.scss deleted file mode 100644 index 6f6281b271..0000000000 --- a/src/forms/form-validation.scss +++ /dev/null @@ -1,260 +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; - } -} 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 From e8f5ca6f13d626127ba96009474db3a1c8148186 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 23 Mar 2023 17:54:56 +0900 Subject: [PATCH 3/4] Create .changeset/poor-hotels-roll.md --- .changeset/poor-hotels-roll.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/poor-hotels-roll.md 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 From bf8e99d2235ef7e1d5ad5dbf7f8d544da84d7d60 Mon Sep 17 00:00:00 2001 From: simurai Date: Thu, 23 Mar 2023 22:17:23 +0900 Subject: [PATCH 4/4] Lint --- src/forms/form-group.scss | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/forms/form-group.scss b/src/forms/form-group.scss index 94a1d505b6..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 @@ -285,8 +286,3 @@ vertical-align: middle; } } - - // fix for chrome bug, see https://github.com/github/github/issues/53931 - .form-group label { - position: static; - }