From 41fadd9ad317dbdfae9dd8dbf46a7fe5ca54f9e4 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 11 Nov 2024 16:16:01 +0100
Subject: [PATCH] [core] Remove dead style contain code (#4402)

---
 docs/data/toolpad/studio/components/button/button.md |  2 +-
 .../toolpad/studio/components/data-grid/data-grid.md |  8 ++++----
 .../studio/components/date-picker/date-picker.md     |  4 ++--
 docs/data/toolpad/studio/components/list/list.md     |  2 +-
 .../studio/components/text-field/text-field.md       |  2 +-
 docs/data/toolpad/studio/concepts/building-ui.md     |  2 +-
 .../toolpad/studio/concepts/custom-components.md     |  4 ++--
 .../data/toolpad/studio/concepts/custom-functions.md |  2 +-
 docs/data/toolpad/studio/concepts/data-binding.md    |  2 +-
 docs/data/toolpad/studio/concepts/data-providers.md  | 12 ++++++------
 docs/data/toolpad/studio/concepts/event-handling.md  |  6 +++---
 docs/data/toolpad/studio/concepts/http-requests.md   |  2 +-
 docs/data/toolpad/studio/concepts/page-properties.md |  2 +-
 docs/data/toolpad/studio/concepts/theming.md         |  2 +-
 .../studio/how-to-guides/connect-to-googlesheets.md  |  2 +-
 15 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/docs/data/toolpad/studio/components/button/button.md b/docs/data/toolpad/studio/components/button/button.md
index f8fa061b407..403820def36 100644
--- a/docs/data/toolpad/studio/components/button/button.md
+++ b/docs/data/toolpad/studio/components/button/button.md
@@ -17,7 +17,7 @@ Button component becomes usable through an **onClick** event handler property. I
 You can write any valid JavaScript that you want to execute on the click of button. It can change component state or call backend code.
 Below video shows how on a button click, the user input can be shown on a page in a text field component:
 
-<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+<video controls width="100%" height="auto" alt="button-onclick-js-expression">
   <source src="/static/toolpad/docs/studio/components/button/button-usage.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/components/data-grid/data-grid.md b/docs/data/toolpad/studio/components/data-grid/data-grid.md
index 06da60b1ad2..30229dd94a2 100644
--- a/docs/data/toolpad/studio/components/data-grid/data-grid.md
+++ b/docs/data/toolpad/studio/components/data-grid/data-grid.md
@@ -16,7 +16,7 @@ A Data Grid is an essential component in an internal application. The following
 
 Rows property requires an array of data to show inside the data grid. It can be configured either by clicking on it and providing JSON or by binding it to a query output. The video below shows how to bind data to data grid using rows linking:
 
-<video controls width="100%" height="auto" style="contain" alt="datagrid-rows">
+<video controls width="100%" height="auto" alt="datagrid-rows">
   <source src="/static/toolpad/docs/studio/components/datagrid/datagrid_rows.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -26,7 +26,7 @@ Rows property requires an array of data to show inside the data grid. It can be
 Columns property is used to configure the columns to be displayed. Choose a column and you'll get a pop-up window to configure its header name, width, alignment and data type.
 From the `type` drop down you can also [customize a column](/toolpad/studio/how-to-guides/customize-datagrid/).
 
-<video controls width="100%" height="auto" style="contain" alt="datagrid-columns">
+<video controls width="100%" height="auto" alt="datagrid-columns">
   <source src="/static/toolpad/docs/studio/components/datagrid/datagrid_column.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -39,7 +39,7 @@ Id field property is used to identify which column contains the id column. By de
 
 This property shows the currently selected row or `null` in case no row has been selected. It is available to be bound to take any action on the selected row like [deleting a row](/toolpad/studio/how-to-guides/delete-datagrid-row/) from data grid.
 
-<video controls width="100%" height="auto" style="contain" alt="datagrid-selection">
+<video controls width="100%" height="auto" alt="datagrid-selection">
   <source src="/static/toolpad/docs/studio/components/datagrid/datagrid_selection.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -48,7 +48,7 @@ This property shows the currently selected row or `null` in case no row has been
 
 Loading property is used to to inform the user when the data is being prepared. It can be [bound to](/toolpad/studio/how-to-guides/delete-datagrid-row/#configure-loading-states-optional) React query properties like isFetching, isLoading.
 
-<video controls width="100%" height="auto" style="contain" alt="datagrid-loading">
+<video controls width="100%" height="auto" alt="datagrid-loading">
   <source src="/static/toolpad/docs/studio/components/datagrid/datagrid_loading.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/components/date-picker/date-picker.md b/docs/data/toolpad/studio/components/date-picker/date-picker.md
index dd25237563e..06168dff97b 100644
--- a/docs/data/toolpad/studio/components/date-picker/date-picker.md
+++ b/docs/data/toolpad/studio/components/date-picker/date-picker.md
@@ -26,7 +26,7 @@ The current selected date. It shows the format in which it is being provided to
 
 Allows setting a default value. Example:
 
-<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+<video controls width="100%" height="auto" alt="button-onclick-js-expression">
   <source src="/static/toolpad/docs/studio/components/datepicker/datepicker-defaultValue.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -71,7 +71,7 @@ Disabled property shows the state of the component so that end user is aware tha
 
 isRequired is useful when the action can't be perfomed without a user provided date.
 
-<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+<video controls width="100%" height="auto" alt="button-onclick-js-expression">
   <source src="/static/toolpad/docs/studio/components/datepicker/datepicker-validation.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/components/list/list.md b/docs/data/toolpad/studio/components/list/list.md
index 8cf3c7f2fa0..87fc99c100e 100644
--- a/docs/data/toolpad/studio/components/list/list.md
+++ b/docs/data/toolpad/studio/components/list/list.md
@@ -10,7 +10,7 @@ A List is an essential component in an application. It had one key property that
 
 It is the number of occurences that the list is supposed to render.
 
-<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+<video controls width="100%" height="auto" alt="button-onclick-js-expression">
   <source src="/static/toolpad/docs/studio/components/list/list.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/components/text-field/text-field.md b/docs/data/toolpad/studio/components/text-field/text-field.md
index f77fdd9b699..bb65e7e1d3c 100644
--- a/docs/data/toolpad/studio/components/text-field/text-field.md
+++ b/docs/data/toolpad/studio/components/text-field/text-field.md
@@ -12,7 +12,7 @@ TextField is a text input component. It takes user input and provides the value
 
 It is one of the most used input component. The video below uses some props to demonstrate its usage.
 
-<video controls width="100%" height="auto" style="contain" alt="textfield">
+<video controls width="100%" height="auto" alt="textfield">
   <source src="/static/toolpad/docs/studio/components/textfield/textfield.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/concepts/building-ui.md b/docs/data/toolpad/studio/concepts/building-ui.md
index b62f7cf480d..cce64d888da 100644
--- a/docs/data/toolpad/studio/concepts/building-ui.md
+++ b/docs/data/toolpad/studio/concepts/building-ui.md
@@ -6,7 +6,7 @@
 
 To access the list of available Toolpad Studio components, hover your cursor over the vertical bar labeled **Component library** to expand it.
 
-<video controls width="auto" height="100%" style="contain" alt="component-library">
+<video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/building-ui/component-library.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/concepts/custom-components.md b/docs/data/toolpad/studio/concepts/custom-components.md
index e54237535b0..199544c5768 100644
--- a/docs/data/toolpad/studio/concepts/custom-components.md
+++ b/docs/data/toolpad/studio/concepts/custom-components.md
@@ -15,7 +15,7 @@ The steps below explain how to create and use a custom component in Toolpad Stud
 In case it doesn't open, check [troubleshoot missing editor](https://mui.com/toolpad/studio/how-to-guides/editor-path/).
 :::
 
-<video controls width="auto" height="100%" style="contain" alt="custom-component-creation">
+<video controls width="auto" height="100%" alt="custom-component-creation">
   <source src="/static/toolpad/docs/studio/concepts/custom-components/custom-component-creation.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -89,7 +89,7 @@ export default createComponent(HelloWorld, {
 
 This component, when dragged to the canvas, has a **msg** property that you can't bind to. But you can now bind to this property from other components.
 
-<video controls width="auto" height="100%" style="contain" alt="custom-component-creation">
+<video controls width="auto" height="100%" alt="custom-component-creation">
   <source src="/static/toolpad/docs/studio/concepts/custom-components/controlled-prop.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/concepts/custom-functions.md b/docs/data/toolpad/studio/concepts/custom-functions.md
index 0fd2058d389..8f94ec716d0 100644
--- a/docs/data/toolpad/studio/concepts/custom-functions.md
+++ b/docs/data/toolpad/studio/concepts/custom-functions.md
@@ -4,7 +4,7 @@
 
 The most powerful way of bringing data into Toolpad Studio is through your own code. You can define functions inside `toolpad/resources` and use them when creating a query of this type. The following video shows how you can use this feature to read data from PostgreSQL.
 
-<video controls width="auto" height="100%" style="contain" alt="custom-function">
+<video controls width="auto" height="100%" alt="custom-function">
   <source src="/static/toolpad/docs/studio/concepts/connecting-to-data/postgres.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/concepts/data-binding.md b/docs/data/toolpad/studio/concepts/data-binding.md
index 9f4a3f48d1c..e0e8a6f6a21 100644
--- a/docs/data/toolpad/studio/concepts/data-binding.md
+++ b/docs/data/toolpad/studio/concepts/data-binding.md
@@ -26,7 +26,7 @@ You can change the format of a value like:
 
 You can write strings inside backticks (`) to write embedded expressions and multiline text. These can be used to read values from other components.
 
-<video controls width="100%" height="auto" style="contain" alt="button-onclick-js-expression">
+<video controls width="100%" height="auto" alt="button-onclick-js-expression">
   <source src="/static/toolpad/docs/studio/components/button/button-usage.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/concepts/data-providers.md b/docs/data/toolpad/studio/concepts/data-providers.md
index 69784b907f0..fb5fc4afed1 100644
--- a/docs/data/toolpad/studio/concepts/data-providers.md
+++ b/docs/data/toolpad/studio/concepts/data-providers.md
@@ -6,7 +6,7 @@ Toolpad Studio functions are great to bring some backend state to the page, but
 
 Follow these steps to create a new data provider:
 
-<video controls width="auto" height="100%" style="contain" alt="component-library">
+<video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/data-providers/data-provider-1.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -25,7 +25,7 @@ export default createDataProvider({
 });
 ```
 
-   <video controls width="auto" height="100%" style="contain" alt="component-library">
+   <video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/data-providers/data-provider-2.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -100,7 +100,7 @@ For example, this could print the following if the corresponding column filters
 
 Now the backend function receives the grid filter from the UI in its parameters.
 
-<video controls width="auto" height="100%" style="contain" alt="component-library">
+<video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/data-providers/filtering.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -129,7 +129,7 @@ Depending on which column has been set to sort by, this results in:
 
 Now the backend function receives the grid sorting model from the UI in its parameters.
 
-<video controls width="auto" height="100%" style="contain" alt="component-library">
+<video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/data-providers/sorting.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -156,7 +156,7 @@ export default createDataProvider({
 
 When this method is available in the data provider, each row gets an edit button. This edit button brings the row in edit mode. To commit the changes press the save button on the row that is in edit mode. To discard the changes use the cancel button.
 
-<video controls width="auto" height="100%" style="contain" alt="component-library">
+<video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/data-providers/editing.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -183,7 +183,7 @@ export default createDataProvider({
 
 After you make this method available in the data provider, an "Add record" button appears in the data grid toolbar. Click this button and a new editable row appears at the top of the grid. Fill in the values and click the "Save" button to finish creating the row. You'll have to return the newly created row from the `createRecord` method so that the grid can update accordingly.
 
-<video controls width="auto" height="100%" style="contain" alt="component-library">
+<video controls width="auto" height="100%" alt="component-library">
   <source src="/static/toolpad/docs/studio/concepts/data-providers/creating.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/concepts/event-handling.md b/docs/data/toolpad/studio/concepts/event-handling.md
index 0fede225db6..3a1009debb1 100644
--- a/docs/data/toolpad/studio/concepts/event-handling.md
+++ b/docs/data/toolpad/studio/concepts/event-handling.md
@@ -10,7 +10,7 @@ Some event handling scenarios:
 
 ### Change component state
 
-<video controls width="100%" height="auto" style="contain" alt="change-component-state">
+<video controls width="100%" height="auto" alt="change-component-state">
   <source src="/static/toolpad/docs/studio/concepts/event-handling/change-component-state.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -25,7 +25,7 @@ You can call single or multiple queries sequentially to fetch data on the page o
 
 #### Multiple queries
 
-<video controls width="100%" height="auto" style="contain" alt="call-multiple-queries">
+<video controls width="100%" height="auto" alt="call-multiple-queries">
   <source src="/static/toolpad/docs/studio/concepts/event-handling/multiple-queries.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -38,7 +38,7 @@ See the [deleting data grid row](/toolpad/studio/how-to-guides/delete-datagrid-r
 
 Custom functions allow you to write custom code in your editor. You can write a `console.log` statement that interacts with the data on the page and prints logs.
 
-<video controls width="100%" height="auto" style="contain" alt="console-log">
+<video controls width="100%" height="auto" alt="console-log">
   <source src="/static/toolpad/docs/studio/concepts/event-handling/console-log.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/concepts/http-requests.md b/docs/data/toolpad/studio/concepts/http-requests.md
index dcadf0208c8..e961f88152a 100644
--- a/docs/data/toolpad/studio/concepts/http-requests.md
+++ b/docs/data/toolpad/studio/concepts/http-requests.md
@@ -65,7 +65,7 @@ You can define these in the interface available in the HTTP Request query editor
 
 As Toolpad Studio HTTP requests are running server-side, they can make use of the available secrets that are stored in environment variables. The mechanism works similar by defining a parameter and instead of binding it to a UI value, bind it to an environment variable. Whenever the request executes, Toolpad Studio will feed the value of the environment variable to the parameter.
 
-<video controls width="auto" height="100%" style="contain" alt="custom-function">
+<video controls width="auto" height="100%" alt="custom-function">
   <source src="/static/toolpad/docs/studio/concepts/connecting-to-data/secrets.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/concepts/page-properties.md b/docs/data/toolpad/studio/concepts/page-properties.md
index 4b0a3aea38b..31ce9a23625 100644
--- a/docs/data/toolpad/studio/concepts/page-properties.md
+++ b/docs/data/toolpad/studio/concepts/page-properties.md
@@ -45,7 +45,7 @@ Available values are **xs**, **sm**, **md**, **lg**, **xl**, or **None** to conf
 
 Page parameters allow you to pass external data into the Toolpad Studio page state via the URL query parameters.
 
-<video controls width="auto" height="100%" style="contain" alt="custom-component-creation">
+<video controls width="auto" height="100%" alt="custom-component-creation">
   <source src="/static/toolpad/docs/studio/concepts/page-properties/page-parameter-1.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/concepts/theming.md b/docs/data/toolpad/studio/concepts/theming.md
index ac201358a07..a8a51543233 100644
--- a/docs/data/toolpad/studio/concepts/theming.md
+++ b/docs/data/toolpad/studio/concepts/theming.md
@@ -4,7 +4,7 @@
 
 ## Adding a global theme
 
-<video controls width="auto" height="100%" style="contain" alt="custom-component-creation">
+<video controls width="auto" height="100%" alt="custom-component-creation">
   <source src="/static/toolpad/docs/studio/concepts/theming/theme-1.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
diff --git a/docs/data/toolpad/studio/how-to-guides/connect-to-googlesheets.md b/docs/data/toolpad/studio/how-to-guides/connect-to-googlesheets.md
index 40046677dd1..79148adda99 100644
--- a/docs/data/toolpad/studio/how-to-guides/connect-to-googlesheets.md
+++ b/docs/data/toolpad/studio/how-to-guides/connect-to-googlesheets.md
@@ -6,7 +6,7 @@ You can write a custom function to read or write data from a Google sheet. We'll
 
 There are many ways to authenticate Google APIs, as mentioned in `google-auth-library`. This guide uses JWTs (JSON Web Tokens), which are appropriate for a server-based application.
 
-<video controls width="100%" height="auto" style="contain" alt="google-sheet-app">
+<video controls width="100%" height="auto" alt="google-sheet-app">
   <source src="/static/toolpad/docs/studio/examples/google-sheet.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>