Migrate Design Properties API docs

content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties/design-properties-10.md → content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/design-properties-10.md

@@ -1,14 +1,21 @@
 ---
-title: "Mendix 10"
+title: "Design Properties API"
 url: /apidocs-mxsdk/apidocs/design-properties-10/
 description: "This API guide outlines how design properties work in Atlas UI and can help you create custom design properties."
-weight: 60
+weight: 56
 ---
 
 ## Introduction
 
 The Mendix Design Properties API allows you to create or extend design properties for your Mendix apps.
 
+{{% alert color="info" %}}
+This document pertains to Mendix 10. For other Design Properties API documents, see these documents:
+
+* [Mendix 11](/apidocs-mxsdk/apidocs/design-properties-11/)
+* [Mendix 9](/apidocs-mxsdk/apidocs/design-properties-9/)
+{{% /alert %}}
+
 To use the API, you need to alter the *design-properties.json* file of a specific module in your application's **themesource** folder. This process is described in the [Design Properties Definitions](#design-properties-definitions) section below.
 
 Many apps can simply use the Atlas UI theme and its included set of design properties to satisfy their styling needs. However, if you want to customize your styling more deeply, you will have to create your own custom design properties. This guide outlines how design properties work and can help you create custom design properties. The design properties provided by Atlas UI have been built in the same way as outlined here.

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/pluggable-widgets/_index.md

@@ -284,7 +284,7 @@ This is how the property group structure is represented in Studio Pro:
 
 When properties are shown in a dialog box, first-level groups (**General** and **Visual**) are represented as tabs. Second-level groups (**Main**, **Action** and **Progress bar**) are represented as boxes. When properties are shown in a pane, first-level groups are ignored and second-level groups are shown as categories.
 
-Note that the **Common** and **Appearance** tabs are added to your widget configuration automatically. These tabs contain properties applicable to all widgets: [Name](/refguide/common-widget-properties/#name), [Class](/refguide/common-widget-properties/#class), [Style](/refguide/common-widget-properties/#style), and [Design Properties](/apidocs-mxsdk/apidocs/design-properties/).
+Note that the **Common** and **Appearance** tabs are added to your widget configuration automatically. These tabs contain properties applicable to all widgets: [Name](/refguide/common-widget-properties/#name), [Class](/refguide/common-widget-properties/#class), [Style](/refguide/common-widget-properties/#style), and [Design Properties](/apidocs-mxsdk/apidocs/design-properties-10/).
 
 ## Widget Property
 

content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties/_index.md → content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/design-properties-11.md

@@ -1,6 +1,6 @@
 ---
 title: "Design Properties API"
-url: /apidocs-mxsdk/apidocs/design-properties/
+url: /apidocs-mxsdk/apidocs/design-properties-11/
 description: "This API guide outlines how design properties work in Atlas UI and can help you create custom design properties."
 weight: 50
 ---
@@ -10,7 +10,7 @@ weight: 50
 The Mendix Design Properties API allows you to create or extend design properties for your Mendix apps.
 
 {{% alert color="info" %}}
-This document pertains to Mendix 11. For other Design Properties API documents, see the other documents in this category:
+This document pertains to Mendix 11. For other Design Properties API documents, see these documents:
 
 * [Mendix 10](/apidocs-mxsdk/apidocs/design-properties-10/)
 * [Mendix 9](/apidocs-mxsdk/apidocs/design-properties-9/)

content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/pluggable-widgets/_index.md

@@ -378,7 +378,7 @@ This is how the property group structure is represented in Studio Pro:
 
 When properties are shown in a dialog box, first-level groups (**General** and **Visual**) are represented as tabs. Second-level groups (**Main**, **Action** and **Progress bar**) are represented as boxes. When properties are shown in a pane, first-level groups are ignored and second-level groups are shown as categories.
 
-Note that the **Common** and **Appearance** tabs are added to your widget configuration automatically. These tabs contain properties applicable to all widgets: [Name](/refguide/common-widget-properties/#name), [Class](/refguide/common-widget-properties/#class), [Style](/refguide/common-widget-properties/#style), and [Design Properties](/apidocs-mxsdk/apidocs/design-properties/).
+Note that the **Common** and **Appearance** tabs are added to your widget configuration automatically. These tabs contain properties applicable to all widgets: [Name](/refguide/common-widget-properties/#name), [Class](/refguide/common-widget-properties/#class), [Style](/refguide/common-widget-properties/#style), and [Design Properties](/apidocs-mxsdk/apidocs/design-properties-11/).
 
 ## Widget Property
 

content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties/design-properties-9.md → content/en/docs/apidocs-mxsdk/apidocs/studio-pro-9/design-properties-9.md

@@ -1,14 +1,21 @@
 ---
-title: "Mendix 9"
+title: "Design Properties API"
 url: /apidocs-mxsdk/apidocs/design-properties-9/
 description: "This API guide outlines how design properties work in Atlas UI and can help you create custom design properties."
 weight: 70
 ---
 
-## 1 Introduction
+## Introduction
 
 The Mendix Design Properties API allows you to create or extend design properties for your Mendix apps.
 
+{{% alert color="info" %}}
+This document pertains to Mendix 9. For other Design Properties API documents, see these documents:
+
+* [Mendix 11](/apidocs-mxsdk/apidocs/design-properties-11/)
+* [Mendix 10](/apidocs-mxsdk/apidocs/design-properties-10/)
+{{% /alert %}}
+
 To use the API, you need to alter the *design-properties.json* file of a specific module in your application's **themesource** folder. This process is described in the [Design Properties Definitions](#design-properties-definitions) section below.
 
 This guide outlines how design properties work and can help you create custom design properties. Many apps can simply use the Atlas UI theme and its included set of design properties to satisfy their styling needs. Atlas UI provides design properties that are built on top of the functionality described in this guide. So while design properties from Atlas UI are used as examples below, design properties themselves are not only for the Atlas UI theme. In fact, if you want to customize your styling more deeply, you will have to create your own custom design properties.
@@ -17,21 +24,21 @@ Design properties are a special set of settings shipped together with a Mendix t
 
 In Studio Pro, you can see which design properties are available for a widget either in the **Properties** pane or in the widget's settings dialog box under the **Appearance** tab. 
 
-## 2 Using Design Properties
+## Using Design Properties
 
 While styling Mendix apps, users must often apply the same set of CSS or native styling classes to widgets on different pages again and again. This work is time consuming and vulnerable to human error as you edit text fields in order to apply classes to a widget.
 
 Design properties can make this work easier and safer. By configuring your own custom design properties, a certain styling can be applied to a widget in a few clicks.
 
-## 3 Design Property Types
+## Design Property Types
 
 There are two types of design properties: **Toggle** and **Dropdown**. By default design properties have no effect on widgets. Styling is only applied when a **Toggle** property is turned on for a widget, or when one of the options is selected for a **Dropdown** property.
 
 A **Toggle** design property is a simple property which may be turned on for a widget. When this property is set, configured classes are applied to a widget automatically. For example, a **Toggle** property may be a **Full width** property for Atlas UI button widgets. When this property is set for a button, then the `btn-block` CSS class is applied. No additional classes are applied if property is not set.
 
 A design property of type **Dropdown** defines a set of options with separate classes per option. When one of the options is selected, the respective classes are applied to a widget. For example, a **Dropdown** property may be an Atlas UI **Align self** property. It contains two options: **Left** and **Right**. When one of these options is selected, then either the `pull-left` or `pull-right` CSS class is applied. 
 
-## 4 Design Properties Definitions {#design-properties-definitions}
+## Design Properties Definitions {#design-properties-definitions}
 
 Design properties are defined on a module level in **JSON** format. They are located in the module specific *themesource* folders (for more information, see the [File and Folder Structure](/howto/front-end/customize-styling-new/#file-and-folder) section of *How to Customize Styling*). Since styling works differently for web and native platforms, each platform's design properties are different and defined in two separate folders. Web styling is defined in *web/design-properties.json* file. Native styling is defined in the *native/design-properties.json* file.
 
@@ -68,7 +75,7 @@ Here is a simplified example of a design properties file:
 }
 ```
 
-### 4.1 Design Property Structure
+### Design Property Structure
 
 Use this code to further simplify the above example:
 
@@ -131,7 +138,7 @@ This is how the **Dropdown** design property appears:
 
 {{< figure src="/attachments/apidocs-mxsdk/apidocs/design-properties/dropdown.png" alt="Dropdown property in Studio Pro" max-width=80% >}}
 
-#### 4.1.1 Common Fields
+#### Common Fields
 
 The examples above show that the fields `name` and `description` define the UI, the name of a form control in Studio Pro, and the description under it. They are arbitrary string values naming and describing a design property. 
 
@@ -143,15 +150,15 @@ Name your design property and its options carefully. Those names cannot be chang
 If you want to rename a design property which is already being used in an app, see the [Renaming Design Properties](#old-names) section below.
 {{% /alert %}}
 
-#### 4.1.2 Toggle-Specific Fields
+#### Toggle-Specific Fields
 
 When a type of design property is **Toggle** it should contain a `class` field on the top level of its property definition. This field defines an arbitrary class name to be applied if the option is toggled on for a widget. In the example above, the class to be applied is `hereMyClass`.
 
-#### 4.1.3 Dropdown-Specific Fields
+#### Dropdown-Specific Fields
 
 When a type of design property is **Dropdown** it should contain an `options` field which is an array of possible options for the design property. Every option must be an object with `name` and `class` fields. In the example above there are two options named **Styling option 1** and **Styling option 2**. They have the `stylingClassOne` and `stylingClassTwo` classes respectively.
 
-### 4.2 Extending or Overriding Design Properties of Other Modules {#extend-existing-design-properties}
+### Extending or Overriding Design Properties of Other Modules {#extend-existing-design-properties}
 
 Design properties can be extended or overridden in other modules. For example, you can add a custom drop-down option to an Atlas design property or override the applied CSS class of a toggle property. 
 
@@ -169,7 +176,7 @@ If multiple modules have a definition of a **Dropdown** property with the same n
 Note that having multiple definitions with different types (for example **Toggle** and **Dropdown**) is an invalid configuration and will result in a failure to load any design properties.
 {{% /alert %}}
 
-## 5 Widget Types{#widget-types}
+## Widget Types{#widget-types}
 
 When defining design properties in your *JSON* file, you must specify which widget your properties apply to, as some design properties may only work with certain widgets.
 
@@ -179,11 +186,11 @@ Having a property that applies a table appearance style like **Stripped**, **Bor
 
 Widget types are types defined in the [Model SDK](https://apidocs.rnd.mendix.com/modelsdk/latest/modules/pages.html) documentation. Every type which is a direct or an indirect subtype of type [`Widget`](https://apidocs.rnd.mendix.com/modelsdk/latest/classes/pages.widget.html) can have design properties attached to it. If a property is defined on a widget, then every subtype of this widget will have that property. For example if a property is defined on a `Widget` type, which is it the highest type in the hierarchy, then every widget will have this design property available.
 
-### 5.1 Widget Types for Pluggable Widgets
+### Widget Types for Pluggable Widgets
 
 When creating design properties for [Pluggable Widgets](/apidocs-mxsdk/apidocs/pluggable-widgets/), their widget type is determined by [widget id](/apidocs-mxsdk/apidocs/pluggable-widgets/#widget-id).
 
-## 6 Renaming Design Properties{#old-names}
+## Renaming Design Properties{#old-names}
 
 Sometimes you must rename design properties or their options which are already in use. As design properties are identified by names internally, renaming one may be a breaking change for apps that are already using those design properties. 
 
@@ -213,7 +220,7 @@ Example of a property and options that were renamed:
 
 The design property above was renamed from **my Dropdown Propery** to **My Dropdown Property**. Also **Styling option two** was renamed twice from the old names **Stling option 2** and **Styling option 2**.
 
-### 6.1 Renaming a Dropdown Option to a Toggle Property
+### Renaming a Dropdown Option to a Toggle Property
 
 {{% alert color="info" %}}
 This feature was introduced in Mendix 9.
@@ -235,7 +242,7 @@ Here is an example of a **Toggle** property that was renamed from a **Dropdown**
 
 The design property above is a replacement for the removed option **Styling option 3** of **My Dropdown Property** and will be set to **Yes** if that option was selected. The value of **My Dropdown Property** will then be set to empty if that design property still exists.
 
-## 7 Read More
+## Read More
 
 * [Native Styling](/refguide/mobile/designing-mobile-user-interfaces/native-styling/)
 * [Native Mobile Styling Reference Guide](/refguide/native-styling-refguide/)

content/en/docs/howto/front-end/atlas-ui/extend-design-properties.md

@@ -14,6 +14,6 @@ Design properties are visible as part of the widget properties:
 
 {{< figure src="/attachments/howto/front-end/atlas-ui/extend-design-properties/studio-pro-design-properties.png" alt="Design Properties in Studio Pro"   width="350"  class="no-border" >}}
 
-For more information on learning how to add design properties, see the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties/).
+For more information on learning how to add design properties, see the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties-11/).
 
 Developers can also add additional design properties as part of a module. For more information, see the [File and Folder Structure](/howto/front-end/customize-styling-new/#file-and-folder) section of *How to Customize Styling*.

content/en/docs/howto/front-end/atlas-ui/module-level-theme-settings.md

@@ -67,7 +67,7 @@ Similar to layouts and page templates, excluding the [building blocks](/refguide
 
 ### Filtering Design Properties and Styling
 
-Filtering styling elements like [design properties](/apidocs-mxsdk/apidocs/design-properties/) or [CSS classes](/howto/front-end/customize-styling-new/) is useful when you do not want your developers to apply them. Here is a small example:
+Filtering styling elements like [design properties](/apidocs-mxsdk/apidocs/design-properties-11/) or [CSS classes](/howto/front-end/customize-styling-new/) is useful when you do not want your developers to apply them. Here is a small example:
 
 ```json
 {

content/en/docs/howto10/front-end/atlas-ui/extend-design-properties.md

@@ -14,6 +14,6 @@ Design properties are visible as part of the widget properties:
 
 {{< figure src="/attachments/howto10/front-end/atlas-ui/extend-design-properties/studio-pro-design-properties.png" alt="Design Properties in Studio Pro"   width="350"  class="no-border" >}}
 
-For more information on learning how to add design properties, see the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties/).
+For more information on learning how to add design properties, see the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties-10/).
 
 Developers can also add additional design properties as part of a module. For more information, see the [File and Folder Structure](/howto10/front-end/customize-styling-new/#file-and-folder) section of *How to Customize Styling*.

content/en/docs/howto10/front-end/atlas-ui/module-level-theme-settings.md

@@ -67,7 +67,7 @@ Similar to layouts and page templates, excluding the [building blocks](/refguide
 
 ### Filtering Design Properties and Styling
 
-Filtering styling elements like [design properties](/apidocs-mxsdk/apidocs/design-properties/) or [CSS classes](/howto10/front-end/customize-styling-new/) is useful when you do not want your developers to apply them. Here is a small example:
+Filtering styling elements like [design properties](/apidocs-mxsdk/apidocs/design-properties-10/) or [CSS classes](/howto10/front-end/customize-styling-new/) is useful when you do not want your developers to apply them. Here is a small example:
 
 ```json
 {

content/en/docs/howto9/front-end/atlas-ui/extend-design-properties.md

@@ -14,6 +14,6 @@ Design properties are visible as part of the widget properties:
 
 {{< figure src="/attachments/howto9/front-end/atlas-ui/extend-design-properties/studio-pro-design-properties.png" alt="Design Properties in Studio Pro"   width="350"  class="no-border" >}}
 
-For more information on learning how to add design properties, see the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties/).
+For more information on learning how to add design properties, see the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties-9/).
 
 Developers can also add additional design properties as part of a module. For more information, see the [File and Folder Structure](/howto9/front-end/customize-styling-new/#file-and-folder) section of *How to Customize Styling*.

content/en/docs/howto9/front-end/atlas-ui/module-level-theme-settings.md

@@ -67,7 +67,7 @@ Similar to layouts and page templates, excluding the [building blocks](/refguide
 
 ### Filtering Design Properties and Styling
 
-Filtering styling elements like [design properties](/apidocs-mxsdk/apidocs/design-properties/) or [CSS classes](/howto9/front-end/customize-styling-new/) is useful when you do not want your developers to apply them. Here is a small example:
+Filtering styling elements like [design properties](/apidocs-mxsdk/apidocs/design-properties-11/) or [CSS classes](/howto9/front-end/customize-styling-new/) is useful when you do not want your developers to apply them. Here is a small example:
 
 ```json
 {

content/en/docs/refguide/installation/upgrading-from-10-to-11/atlas4-migration.md

@@ -560,7 +560,7 @@ Always review regex replacements carefully before applying them. Complex SASS us
 
 * [Atlas UI Kit for Figma](/howto/front-end/figma-ui-kit/)
 * [Customize Styling](/howto/front-end/customize-styling-new/)
-* [Design Properties](/apidocs-mxsdk/apidocs/design-properties/)
+* [Design Properties](/apidocs-mxsdk/apidocs/design-properties-11/)
 * [Atlas UI Reference App](https://atlasdesignsystem.mendixcloud.com/)
 * [CSS Custom Properties - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
 * [CSS color-mix() Function - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix)

content/en/docs/refguide/mobile/designing-mobile-user-interfaces/design-principles.md

@@ -67,7 +67,7 @@ By default Mendix has a default set of design properties which enable developers
 
 For example, Mendix offers a set of button variants (default, secondary, warning, success, and danger). However, during your design process you can choose to just have a default and a secondary variant. Choices like this are a part of UI design. It is up to people in UI and front-end design roles to determine how much freedom a Mendix developer should have.
 
-The design properties are located in *theme/settings-native.json*, and more information be found in the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties/).
+The design properties are located in *theme/settings-native.json*, and more information be found in the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties-11/).
 
 #### Creating the App Layouts