Merge pull request #11480 from nanaya/input-container-input-class

Combine input classes and split off interleaved bem
ppy · Sep 13, 2024 · 6f1464b · 6f1464b
2 parents ac21e7d + f174f10
commit 6f1464b
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 47 deletions.
diff --git a/resources/css/bem-index.less b/resources/css/bem-index.less
@@ -112,6 +112,7 @@
 @import "bem/chat-conversation-list-separator";
 @import "bem/chat-conversation-panel";
 @import "bem/chat-form";
+@import "bem/chat-form-users";
 @import "bem/chat-input";
 @import "bem/chat-join-channel";
 @import "bem/chat-message-group";
@@ -201,6 +202,7 @@
 @import "bem/icon-stack";
 @import "bem/imagemap";
 @import "bem/input-container";
+@import "bem/input-text";
 @import "bem/js-accordion";
 @import "bem/js-flash-border";
 @import "bem/js-react-modal";

diff --git a/resources/css/bem/artist-track-search-form.less b/resources/css/bem/artist-track-search-form.less
@@ -74,13 +74,6 @@
     grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
   }
 
-  &__input {
-    .reset-input();
-    background: transparent;
-    font-size: @font-size--title-small-3;
-    width: 100%;
-  }
-
   &__input-group {
     --label-colour: hsl(var(--hsl-c2));
     background: var(--input-bg);

diff --git a/resources/css/bem/chat-form-users.less b/resources/css/bem/chat-form-users.less
@@ -0,0 +1,10 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.chat-form-users {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  justify-content: flex-start;
+  min-width: 0; // so user-card-brick overflows properly.
+}
diff --git a/resources/css/bem/chat-form.less b/resources/css/bem/chat-form.less
@@ -2,8 +2,6 @@
 // See the LICENCE file in the repository root for full licence text.
 
 .chat-form {
-  --input-size: @font-size--title-small-3;
-
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -20,29 +18,10 @@
     flex-direction: column;
     gap: 10px;
     padding: 20px 20px 10px 20px;
-  }
-
-  &__input {
-    .reset-input();
-    color: hsl(var(--hsl-c1));
-    font-size: var(--input-size);
-
-    &--box {
-      flex: 1;
-      resize: none;
-    }
+    font-size: @font-size-base;
   }
 
   &__title {
     font-size: @font-size--title;
   }
-
-  &__users {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2px;
-    justify-content: flex-start;
-    min-width: 0; // so user-card-brick overflows properly.
-    font-size: var(--input-size);
-  }
 }
diff --git a/resources/css/bem/contest-judge-entry.less b/resources/css/bem/contest-judge-entry.less
@@ -82,13 +82,6 @@
     color: hsl(var(--hsl-l1));
   }
 
-  &__textarea {
-    .reset-input();
-
-    resize: none;
-    color: #fff;
-  }
-
   &__value {
     display: flex;
     justify-content: flex-end;

diff --git a/resources/css/bem/input-container.less b/resources/css/bem/input-container.less
@@ -11,6 +11,7 @@
   border-radius: 5px;
   text-transform: initial;
   font-weight: initial;
+  font-size: inherit;
 
   margin: 0;
   padding: 5px 10px 10px;
@@ -33,6 +34,7 @@
 
     border: 2px solid transparent;
     padding: 5px;
+    font-size: var(--input-size);
   }
 
   &--error {
@@ -42,6 +44,8 @@
   &--fill {
     flex: 1;
     min-height: 150px;
+    display: grid;
+    grid-template-rows: auto 1fr;
   }
 
   &--genre {

diff --git a/resources/css/bem/input-text.less b/resources/css/bem/input-text.less
@@ -0,0 +1,10 @@
+// Copyright (c) ppy Pty Ltd <[email protected]>. Licensed under the GNU Affero General Public License v3.0.
+// See the LICENCE file in the repository root for full licence text.
+
+.input-text {
+  .reset-input();
+  color: hsl(var(--hsl-c1));
+  background: transparent;
+  resize: none;
+  width: 100%;
+}
diff --git a/resources/js/artist-tracks-index/search-form.tsx b/resources/js/artist-tracks-index/search-form.tsx
@@ -112,15 +112,15 @@ export default class SearchForm extends React.Component<Props> {
           <div className='artist-track-search-form__advanced'>
             <InputContainer labelKey='artist.tracks.index.form.artist' modifiers='2'>
               <input
-                className='artist-track-search-form__input'
+                className='input-text'
                 name='artist'
                 onChange={this.handleChangeString}
                 value={this.params.artist ?? ''}
               />
             </InputContainer>
             <InputContainer labelKey='artist.tracks.index.form.album' modifiers='2'>
               <input
-                className='artist-track-search-form__input'
+                className='input-text'
                 name='album'
                 onChange={this.handleChangeString}
                 value={this.params.album ?? ''}
@@ -129,7 +129,7 @@ export default class SearchForm extends React.Component<Props> {
 
             <InputContainer labelKey='artist.tracks.index.form.bpm_gte'>
               <input
-                className='artist-track-search-form__input'
+                className='input-text'
                 data-param='bpm'
                 data-range='gte'
                 inputMode='numeric'
@@ -141,7 +141,7 @@ export default class SearchForm extends React.Component<Props> {
 
             <InputContainer labelKey='artist.tracks.index.form.bpm_lte'>
               <input
-                className='artist-track-search-form__input'
+                className='input-text'
                 data-param='bpm'
                 data-range='lte'
                 inputMode='numeric'
@@ -153,7 +153,7 @@ export default class SearchForm extends React.Component<Props> {
 
             <InputContainer labelKey='artist.tracks.index.form.length_gte'>
               <input
-                className='artist-track-search-form__input'
+                className='input-text'
                 data-param='length'
                 data-range='gte'
                 onChange={this.handleChangeRangeNatural}
@@ -164,7 +164,7 @@ export default class SearchForm extends React.Component<Props> {
 
             <InputContainer labelKey='artist.tracks.index.form.length_lte'>
               <input
-                className='artist-track-search-form__input'
+                className='input-text'
                 data-param='length'
                 data-range='lte'
                 onChange={this.handleChangeRangeNatural}

diff --git a/resources/js/chat/create-announcement.tsx b/resources/js/chat/create-announcement.tsx
@@ -54,7 +54,7 @@ export default class CreateAnnouncement extends React.Component<Props> {
             {...this.model.inputContainerPropsFor('name')}
           >
             <input
-              className='chat-form__input'
+              className='input-text'
               defaultValue={this.model.inputs.name}
               name='name'
               onBlur={this.handleBlur}
@@ -67,7 +67,7 @@ export default class CreateAnnouncement extends React.Component<Props> {
             {...this.model.inputContainerPropsFor('description')}
           >
             <input
-              className='chat-form__input'
+              className='input-text'
               defaultValue={this.model.inputs.description}
               name='description'
               onBlur={this.handleBlur}
@@ -80,7 +80,7 @@ export default class CreateAnnouncement extends React.Component<Props> {
             modifiers='chat'
             {...this.model.inputContainerPropsFor('users')}
           >
-            <div className='chat-form__users'>
+            <div className='chat-form-users'>
               <UserCardBrick user={core.currentUserOrFail} />
               <UsernameInput
                 id='chat-form-users'
@@ -100,7 +100,7 @@ export default class CreateAnnouncement extends React.Component<Props> {
           >
             <textarea
               autoComplete='off'
-              className='chat-form__input chat-form__input--box'
+              className='input-text'
               defaultValue={this.model.inputs.message}
               name='message'
               onBlur={this.handleBlur}

diff --git a/resources/js/contest-judge/entry.tsx b/resources/js/contest-judge/entry.tsx
@@ -82,7 +82,7 @@ export default class Entry extends React.Component<Props> {
           showError
         >
           <TextareaAutosize
-            className='contest-judge-entry__textarea'
+            className='input-text'
             maxRows={20}
             onChange={this.handleCommentChange}
             rows={6}