Merge pull request #2446 from Akshat55/theme-deprecation

fix: Mark theme as deprecated

Author: zvonimirfras

.storybook/preview.js

@@ -17,20 +17,22 @@ import {
  * This is to prevent properties like `onTouched = () => {...}` & `propagateChange = () => {}`
  * from being rewritten as string by storybook.
  */
-components = components.map(comp => {
-	return {
-		...comp,
-		// Removes properties
-		propertiesClass: [],
-		outputsClass: comp.outputsClass.map((output) => {
-			return {
-				...output,
-				// Prevents control type appearing as `string`
-				defaultValue: undefined
-			}
-		})
-	}
-});
+components = components.map(comp => ({
+	...comp,
+	inputsClass: comp.inputsClass.map((input) => ({
+		...input,
+		// Storybook does not seem to display deprecated message currently
+		// Bypassing this by updating rawdescription
+		rawdescription: input.deprecated ? `**@Deprecatated**\n\n${input.deprecationMessage}` : input.rawdescription
+	})),
+	// Removes properties
+	propertiesClass: [],
+	outputsClass: comp.outputsClass.map((output) => ({
+		...output,
+		// Prevents control type appearing as `string`
+		defaultValue: undefined
+	}))
+}));
 
 // Integrate compodoc documentation with storybook
 setCompodocJson({

src/code-snippet/code-snippet.component.ts

@@ -182,7 +182,8 @@ export class CodeSnippet extends BaseIconButton implements OnInit, AfterViewInit
 	 */
 	@HostBinding("class.cds--snippet--wraptext") @Input() wrapText = false;
 	/**
-	 * Set to `"light"` to apply the light style on the code snippet.
+	 * @deprecated since v5 - Use `ibmLayer` directive instead
+	 * Set to `"light"` to apply the light style
 	 */
 	@Input() theme: "light" | "dark" = "dark";
 	/**

src/combobox/combobox.component.ts

@@ -325,7 +325,7 @@ export class ComboBox implements OnChanges, AfterViewInit, AfterContentInit, OnD
 	 */
 	@Input() maxLength: number = null;
 	/**
-	 * `light` or `dark` dropdown theme
+	 * @deprecated since v5 - Use `ibmLayer` directive instead
 	 */
 	@Input() theme: "light" | "dark" = "dark";
 	/**

src/datepicker-input/datepicker-input.component.ts

@@ -119,6 +119,10 @@ export class DatePickerInput {
 
 	@Output() valueChange: EventEmitter<string> = new EventEmitter();
 
+	/**
+	 * @deprecated since v5 - Use `ibmLayer` directive instead
+	 * Set to `"light"` to apply the light style
+	 */
 	@Input() theme: "light" | "dark" = "dark";
 
 	@Input() disabled = false;

src/datepicker/datepicker.component.ts

@@ -155,6 +155,10 @@ export class DatePicker implements
 		return this._value;
 	}
 
+	/**
+	 * @deprecated since v5 - Use `ibmLayer` directive instead
+	 * Set to `"light"` to apply the light style
+	 */
 	@Input() theme: "light" | "dark" = "dark";
 
 	@Input() disabled = false;

src/dropdown/dropdown.component.ts

@@ -203,6 +203,7 @@ export class Dropdown implements OnInit, AfterContentInit, AfterViewInit, OnDest
 	 */
 	@Input() type: "single" | "multi" = "single";
 	/**
+	 * @deprecated since v5 - Use `ibmLayer` directive instead
 	 * `light` or `dark` dropdown theme
 	 */
 	@Input() theme: "light" | "dark" = "dark";

src/input/input.directive.ts

@@ -16,6 +16,7 @@ import { Directive, HostBinding, Input } from "@angular/core";
 })
 export class TextInput {
 	/**
+	 * @deprecated since v5 - Use `ibmLayer` directive instead
 	 * `light` or `dark` input theme
 	 */
 	@Input() theme: "light" | "dark" = "dark";

src/input/text-area.directive.ts

@@ -16,6 +16,7 @@ import { Directive, HostBinding, Input } from "@angular/core";
 })
 export class TextArea {
 	/**
+	 * @deprecated since v5 - Use `ibmLayer` directive instead
 	 * `light` or `dark` input theme
 	 */
 	@Input() theme: "light" | "dark" = "dark";

src/modal/modal-header.component.ts

@@ -21,7 +21,7 @@ import { ExperimentalService } from "carbon-components-angular/experimental";
 @Component({
 	selector: "ibm-modal-header",
 	template: `
-		<header class="{{theme}} cds--modal-header">
+		<header class="cds--modal-header {{theme}}">
 			<ng-content></ng-content>
 			<button
 				*ngIf="showCloseButton"
@@ -37,6 +37,7 @@ import { ExperimentalService } from "carbon-components-angular/experimental";
 })
 export class ModalHeader {
 	/**
+	 * @deprecated since v5
 	 * Sets the style on the modal heading based on its category.
 	 */
 	@Input() theme = "default";

src/number-input/number.component.ts

@@ -144,6 +144,7 @@ export class NumberComponent implements ControlValueAccessor {
 	@HostBinding("class.cds--form-item") containerClass = true;
 
 	/**
+	 * @deprecated since v5 - Use `ibmLayer` directive instead
 	 * `light` or `dark` number input theme.
 	 */
 	@Input() theme: "light" | "dark" = "dark";