chore: adds deprecation alerts (#1882)

adds deprecation alerts for `.form-control-rg` and `.form-control-md` as well as `.form-select-rg` and `.form-select-md` to documentation and demo --------- Co-authored-by: Oliver Schürch <[email protected]>
swisspost · Oct 4, 2023 · a71de1e · a71de1e
1 parent 97313bf
commit a71de1e
Show file tree

Hide file tree

Showing 13 changed files with 111 additions and 18 deletions.
diff --git a/.changeset/modern-zebras-drive.md b/.changeset/modern-zebras-drive.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-demo': patch
+---
+
+Added deprecation alerts for `.form-control-rg`, `.form-control-md`, `.form-select-rg` and `.form-select-md` form-control variants.
diff --git a/...trap/components/form-control/form-control-demo-page/form-control-demo-page.component.html b/...trap/components/form-control/form-control-demo-page/form-control-demo-page.component.html
@@ -3,6 +3,18 @@ <h1 class="bold font-curve-large">Form control</h1>
   <app-dependency-link documentationPath="forms/form-control"></app-dependency-link>
 </div>
 
+<div class="alert alert-warning mb-bigger-big">
+  <h2 class="alert-heading">
+    We're deprecating the regular and medium sizes for text input, textarea and select.
+  </h2>
+  <div class="mt-0">
+    This will make it easier to select the appropriate size variant: small for internal
+    applications, large for external applications.<br>
+    <code>.form-control-rg</code> and <code>.form-control-md</code> are deprecated and will be removed
+    in the next major version.
+  </div>
+</div>
+
 <section>
   <app-form-control-demo></app-form-control-demo>
 </section>

diff --git a/...app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.html b/...app/bootstrap/components/form-file/form-file-demo-page/form-file-demo-page.component.html
@@ -3,6 +3,18 @@ <h1 class="bold font-curve-large">Form file</h1>
   <app-dependency-link documentationPath="forms/form-control/#file-input"></app-dependency-link>
 </div>
 
+<div class="alert alert-warning mb-bigger-big">
+  <h2 class="alert-heading">
+    We're deprecating the regular and medium sizes for text input, textarea and select.
+  </h2>
+  <div class="mt-0">
+    This will make it easier to select the appropriate size variant: small for internal
+    applications, large for external applications.<br>
+    <code>.form-control-rg</code> and <code>.form-control-md</code> are deprecated and will be removed
+    in the next major version.
+  </div>
+</div>
+
 <section>
   <app-form-file-demo></app-form-file-demo>
 </section>

diff --git a/...ect-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.html b/...ect-multiple/form-select-multiple-demo-page/form-select-multiple-demo-page.component.html
@@ -3,6 +3,18 @@ <h1 class="bold font-curve-large">Form select multiple</h1>
   <app-dependency-link documentationPath="forms/select/#sizing"></app-dependency-link>
 </div>
 
+<div class="alert alert-warning mb-bigger-big">
+  <h2 class="alert-heading">
+    We're deprecating the regular and medium sizes for text input, textarea and select.
+  </h2>
+  <div class="mt-0">
+    This will make it easier to select the appropriate size variant: small for internal
+    applications, large for external applications.<br>
+    <code>.form-select-rg</code> and <code>.form-select-md</code> are deprecated and will be removed
+    in the next major version.
+  </div>
+</div>
+
 <section>
   <app-multiple-select-demo></app-multiple-select-demo>
 </section>

diff --git a/...otstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.html b/...otstrap/components/form-select/form-select-demo-page/form-select-demo-page.component.html
@@ -3,6 +3,18 @@ <h1 class="bold font-curve-large">Form select</h1>
   <app-dependency-link documentationPath="forms/select"></app-dependency-link>
 </div>
 
+<div class="alert alert-warning mb-bigger-big">
+  <h2 class="alert-heading">
+    We're deprecating the regular and medium sizes for text input, textarea and select.
+  </h2>
+  <div class="mt-0">
+    This will make it easier to select the appropriate size variant: small for internal
+    applications, large for external applications.<br>
+    <code>.form-select-rg</code> and <code>.form-select-md</code> are deprecated and will be removed
+    in the next major version.
+  </div>
+</div>
+
 <section>
   <app-select-demo></app-select-demo>
 </section>

diff --git a/...p/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.html b/...p/components/form-textarea/form-textarea-demo-page/form-textarea-demo-page.component.html
@@ -3,6 +3,18 @@ <h1 class="bold font-curve-large">Form textarea</h1>
   <app-dependency-link documentationPath="forms/floating-labels/#textareas"></app-dependency-link>
 </div>
 
+<div class="alert alert-warning mb-bigger-big">
+    <h2 class="alert-heading">
+      We're deprecating the regular and medium sizes for text input, textarea and select.
+    </h2>
+    <div class="mt-0">
+      This will make it easier to select the appropriate size variant: small for internal
+      applications, large for external applications.<br>
+      <code>.form-control-rg</code> and <code>.form-control-md</code> are deprecated and will be removed
+      in the next major version.
+    </div>
+</div>
+
 <section>
   <app-form-textarea-demo></app-form-textarea-demo>
 </section>

diff --git a/...es/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.html b/...es/demo/src/app/bootstrap/components/forms/forms-demo-page/forms-demo-page.component.html
@@ -3,6 +3,18 @@ <h1 class="bold font-curve-large">Forms</h1>
   <app-dependency-link documentationPath="forms/overview"></app-dependency-link>
 </div>
 
+<div class="alert alert-warning mb-bigger-big">
+  <h2 class="alert-heading">
+    We're deprecating the regular and medium sizes for text input, textarea and select.
+  </h2>
+  <div class="mt-0">
+    This will make it easier to select the appropriate size variant: small for internal
+    applications, large for external applications.<br>
+    <code>.form-control-rg</code> and <code>.form-control-md</code> are deprecated and will be removed
+    in the next major version.
+  </div>
+</div>
+
 <section>
   <app-forms-demo></app-forms-demo>
 </section>

diff --git a/packages/documentation/src/stories/components/input/input.docs.mdx b/packages/documentation/src/stories/components/input/input.docs.mdx
@@ -7,8 +7,7 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 # Text input
 
 <div className="lead">
-  Customize the native <code>&lt;input&gt;</code> with CSS that changes the element’s initial
-  appearance.
+  Customize the native `<input>` with CSS that changes the element’s initial appearance.
 </div>
 
 Custom input elements need only the class `.form-control` to trigger the custom styles.
@@ -33,6 +32,13 @@ But note that the `<input>` element must come first, so we can ensure the correc
 
 ### Sizing
 
+{/* prettier-ignore */}
+<div className="alert alert-warning">
+  <h4 className="alert-heading">We're deprecating the regular and medium sizes for text input, textarea and select.</h4>
+  <p className="mt-0">This will make it easier to select the appropriate size variant: small for internal applications, large for external applications.<br />
+    `.form-control-rg` and `.form-control-md` are deprecated and will be removed in the next major version.</p>
+</div>
+
 The size can be changed by simply adding one of four classes:
 
 - Small: `.form-control-sm`
@@ -43,8 +49,8 @@ The size can be changed by simply adding one of four classes:
 <div className="alert alert-info">
   <h4 className="alert-heading">Do not apply size classes on floating-label elements</h4>
   <div className="mt-0">
-    It is not intended to apply the size classes to <code>input</code> elements that are nested in a{' '}
-    <code>.form-floating</code> container.
+    It is not intended to apply the size classes to `input` elements that are nested in a
+    `.form-floating` container.
   </div>
 </div>
 

diff --git a/packages/documentation/src/stories/components/input/input.stories.ts b/packages/documentation/src/stories/components/input/input.stories.ts
@@ -107,8 +107,8 @@ const meta: Meta = {
         type: 'select',
         labels: {
           'form-control-sm': 'Small',
-          'form-control-rg': 'Regular',
-          'null': 'Middle',
+          'form-control-rg': 'Regular (deprecated)',
+          'null': 'Middle (deprecated)',
           'form-control-lg': 'Large',
         },
       },

diff --git a/packages/documentation/src/stories/components/select/select.docs.mdx b/packages/documentation/src/stories/components/select/select.docs.mdx
@@ -7,8 +7,7 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 # Select
 
 <div className="lead">
-  Customize the native <code>&lt;select&gt;</code> with CSS that changes the element’s initial
-  appearance.
+  Customize the native `<select>` with CSS that changes the element’s initial appearance.
 </div>
 
 Custom `<select>` menus need only the class `.form-select` to trigger the custom styles. Custom styles are limited to the `<select>`’s initial appearance and cannot modify the `<option>` elements due to browser limitations.
@@ -34,6 +33,12 @@ But note that the `<select>` must come first, so we can ensure the correct style
 
 ### Sizing
 
+{/* prettier-ignore */}
+<div className="alert alert-warning">
+  <h4 className="alert-heading">We're deprecating the regular and medium sizes for text input, textarea and select.</h4>
+  <p className="mt-0">This will make it easier to select the appropriate size variant: small for internal applications, large for external applications.<br />`.form-select-rg` and `.form-select-md` are deprecated and will be removed in the next major version.</p>
+</div>
+
 The size can be adjusted, by simply adding one of the following four classes:
 
 - Small: `.form-select-sm`
@@ -42,8 +47,7 @@ The size can be adjusted, by simply adding one of the following four classes:
 - Large: `.form-select-lg`
 
 <div className="alert alert-info alert-md">
-  Do not use this classes on <code>select</code> elements wrapped within a{' '}
-  <code>.form-floating</code> container.
+  Do not use this classes on `select` elements wrapped within a `.form-floating` container.
 </div>
 
 <Canvas of={SelectStories.Size} />

diff --git a/packages/documentation/src/stories/components/select/select.stories.ts b/packages/documentation/src/stories/components/select/select.stories.ts
@@ -84,8 +84,8 @@ const meta: Meta = {
         type: 'select',
         labels: {
           'form-select-sm': 'Small',
-          'form-select-rg': 'Regular',
-          'null': 'Medium',
+          'form-select-rg': 'Regular (deprecated)',
+          'null': 'Medium (deprecated)',
           'form-select-lg': 'Large',
         },
       },

diff --git a/packages/documentation/src/stories/components/textarea/textarea.docs.mdx b/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
@@ -7,8 +7,7 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 # Textarea
 
 <div className="lead">
-  Customize the native <code>&lt;textarea&gt;</code> with CSS that changes the element’s initial
-  appearance.
+  Customize the native `<textarea>` with CSS that changes the element’s initial appearance.
 </div>
 
 Custom textarea elements need only the class `.form-control` to trigger the custom styles.
@@ -33,6 +32,12 @@ But note that the `<textarea>` element must come first, so we can ensure the cor
 
 ### Sizing
 
+{/* prettier-ignore */}
+<div className="alert alert-warning">
+  <h4 className="alert-heading">We're deprecating the regular and medium sizes for text input, textarea and select.</h4>
+  <p className="mt-0">This will make it easier to select the appropriate size variant: small for internal applications, large for external applications.<br />`.form-control-rg` and `.form-control-md` are deprecated and will be removed in the next major version.</p>
+</div>
+
 The size can be changed by simply adding one of four classes:
 
 - Small: `.form-control-sm`
@@ -43,8 +48,8 @@ The size can be changed by simply adding one of four classes:
 <div className="alert alert-info">
   <h4 className="alert-heading">Do not apply size classes on floating-label elements</h4>
   <div className="mt-0">
-    It is not intended to apply the size classes to <code>textarea</code> elements that are nested
-    in a <code>.form-floating</code> container.
+    It is not intended to apply the size classes to `textarea` elements that are nested in a
+    `.form-floating` container.
   </div>
 </div>
 

diff --git a/packages/documentation/src/stories/components/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.stories.ts
@@ -83,8 +83,8 @@ const meta: Meta = {
         type: 'select',
         labels: {
           'form-control-sm': 'Small',
-          'form-control-rg': 'Regular',
-          'null': 'Middle',
+          'form-control-rg': 'Regular (deprecated)',
+          'null': 'Middle (deprecated)',
           'form-control-lg': 'Large',
         },
       },