[docs] Simplify wording for customization demo descriptions (mui#15539)

segore · May 2, 2019 · 5944550 · 5944550
1 parent bb645a4
commit 5944550
Show file tree

Hide file tree

Showing 20 changed files with 44 additions and 47 deletions.
diff --git a/docs/src/pages/demos/badges/badges.md b/docs/src/pages/demos/badges/badges.md
@@ -35,7 +35,7 @@ The badge auto hides with badgeContent is zero. You can override this with the `
 
 ## Customized badges
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here is an example of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/demos/badges/CustomizedBadges.js"}}
diff --git a/docs/src/pages/demos/breadcrumbs/breadcrumbs.md b/docs/src/pages/demos/breadcrumbs/breadcrumbs.md
@@ -27,8 +27,8 @@ In the following examples, we are using two string separators, and an SVG icon.
 
 ## Customized breadcrumbs
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here is an example of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/demos/breadcrumbs/CustomizedBreadcrumbs.js"}}
 

diff --git a/docs/src/pages/demos/buttons/buttons.md b/docs/src/pages/demos/buttons/buttons.md
@@ -97,8 +97,8 @@ deselected, such as adding or removing a star to an item.
 
 ## Customized buttons
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here are some examples of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/demos/buttons/CustomizedButtons.js"}}
 

diff --git a/docs/src/pages/demos/dialogs/dialogs.md b/docs/src/pages/demos/dialogs/dialogs.md
@@ -56,8 +56,10 @@ For example, if your site prompts for potential subscribers to fill in their ema
 
 ## Customized dialogs
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here is example of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
+
+The dialog has a close button added to aide usability.
 
 {{"demo": "pages/demos/dialogs/CustomizedDialogs.js"}}
 

diff --git a/docs/src/pages/demos/expansion-panels/expansion-panels.md b/docs/src/pages/demos/expansion-panels/expansion-panels.md
@@ -45,7 +45,7 @@ bottlenecks first and then try out these optimization strategies.
 
 ## Customized expansion panels
 
-If you have read the [overrides documentation page](/customization/overrides/)
-but you are not confident jumping in, here is an example of how you can customize the component.
+Here is an example of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/demos/expansion-panels/CustomizedExpansionPanels.js"}}
diff --git a/docs/src/pages/demos/menus/menus.md b/docs/src/pages/demos/menus/menus.md
@@ -40,8 +40,8 @@ The primary responsibility of the `MenuList` component is to handle the focus.
 
 ## Customized menus
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here is an example of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/demos/menus/CustomizedMenus.js"}}
 
@@ -61,7 +61,7 @@ You can use the `Typography` component with `noWrap` to workaround this issue:
 
 {{"demo": "pages/demos/menus/TypographyMenu.js"}}
 
-## Change Transition
+## Change transition
 
 Use a different transition.
 

diff --git a/docs/src/pages/demos/progress/progress.md b/docs/src/pages/demos/progress/progress.md
@@ -83,8 +83,8 @@ function Progress(props) {
 
 ## Customized progress bars
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here are some examples of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/demos/progress/CustomizedProgressBars.js"}}
 

diff --git a/docs/src/pages/demos/selects/selects.md b/docs/src/pages/demos/selects/selects.md
@@ -22,8 +22,8 @@ we allow such pattern.
 
 ## Customized selects
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here are some examples of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 The first step is to style the `InputBase` component.
 Once it's styled, you can either use it directly as a text field or provide it to the select `input` property to have a select field.

diff --git a/docs/src/pages/demos/snackbars/snackbars.md b/docs/src/pages/demos/snackbars/snackbars.md
@@ -24,8 +24,8 @@ A basic snackbar that aims to reproduce Google Keep's snackbar behavior.
 
 ## Customized snackbars
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here are some examples of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/demos/snackbars/CustomizedSnackbars.js"}}
 

diff --git a/docs/src/pages/demos/steppers/steppers.md b/docs/src/pages/demos/steppers/steppers.md
@@ -64,11 +64,10 @@ Labels can be placed below the step icon by setting the `alternativeLabel` prope
 
 {{"demo": "pages/demos/steppers/VerticalLinearStepper.js"}}
 
-## Customized Steppers
+## Customized Stepper
 
-If you have read the [overrides documentation page](/customization/overrides/)
-but you are not confident jumping in,
-here are examples of how you can change the look of a stepper.
+Here is an example of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 This component uses a customized `StepConnector` element that changes border color based on the `active` and `completed` state.
 

diff --git a/docs/src/pages/demos/switches/CustomizedSwitches.js b/docs/src/pages/demos/switches/CustomizedSwitches.js
@@ -79,6 +79,7 @@ const AntSwitch = withStyles(theme => ({
     width: 28,
     height: 16,
     padding: 0,
+    display: 'flex',
   },
   switchBase: {
     padding: 2,
@@ -143,7 +144,7 @@ function CustomizedSwitches() {
       <Typography component="div">
         <Grid component="label" container alignItems="center" spacing={1}>
           <Grid item>Off</Grid>
-          <Grid item>
+          <Grid item alignItems="center">
             <AntSwitch
               checked={state.checkedC}
               onChange={handleChange('checkedC')}

diff --git a/docs/src/pages/demos/switches/CustomizedSwitches.tsx b/docs/src/pages/demos/switches/CustomizedSwitches.tsx
@@ -87,6 +87,7 @@ const AntSwitch = withStyles(theme => ({
     width: 28,
     height: 16,
     padding: 0,
+    display: 'flex',
   },
   switchBase: {
     padding: 2,
@@ -151,7 +152,7 @@ function CustomizedSwitches() {
       <Typography component="div">
         <Grid component="label" container alignItems="center" spacing={1}>
           <Grid item>Off</Grid>
-          <Grid item>
+          <Grid item alignItems="center">
             <AntSwitch
               checked={state.checkedC}
               onChange={handleChange('checkedC')}

diff --git a/docs/src/pages/demos/switches/switches.md b/docs/src/pages/demos/switches/switches.md
@@ -28,8 +28,8 @@ However, we encourage you to use a [Checkbox](#checkboxes) instead.
 
 ## Customized switches
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here are some examples of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/demos/switches/CustomizedSwitches.js"}}
 

diff --git a/docs/src/pages/demos/tables/tables.md b/docs/src/pages/demos/tables/tables.md
@@ -47,8 +47,8 @@ The Table has been given a fixed width to demonstrate horizontal scrolling. In o
 
 ## Customized tables
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here is an example of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/demos/tables/CustomizedTables.js"}}
 

diff --git a/docs/src/pages/demos/tabs/tabs.md b/docs/src/pages/demos/tabs/tabs.md
@@ -66,8 +66,8 @@ Left and right scroll buttons will never be presented.  All scrolling must be in
 
 ## Customized tabs
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here is an example of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/demos/tabs/CustomizedTabs.js"}}
 

diff --git a/docs/src/pages/demos/text-fields/text-fields.md b/docs/src/pages/demos/text-fields/text-fields.md
@@ -52,8 +52,8 @@ The component takes care of the most used properties, then it's up to the user t
 
 ## Customized inputs
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here are some examples of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/demos/text-fields/CustomizedInputs.js"}}
 

diff --git a/docs/src/pages/demos/tooltips/tooltips.md b/docs/src/pages/demos/tooltips/tooltips.md
@@ -22,8 +22,8 @@ They don’t have directional arrows; instead, they rely on motion emanating fro
 
 ## Customized tooltips
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here are some examples of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/demos/tooltips/CustomizedTooltips.js"}}
 

diff --git a/docs/src/pages/lab/slider/CustomizedSlider.js b/docs/src/pages/lab/slider/CustomizedSlider.js
@@ -12,12 +12,9 @@ const useStyles = makeStyles({
 });
 
 const StyledSlider = withStyles({
-  container: {
-    overflow: 'visible',
-  },
   thumb: {
-    height: 32,
-    width: 32,
+    height: 24,
+    width: 24,
     backgroundColor: '#fff',
     border: '2px solid #de235b',
     '&$focused, &:hover': {

diff --git a/docs/src/pages/lab/slider/CustomizedSlider.tsx b/docs/src/pages/lab/slider/CustomizedSlider.tsx
@@ -12,12 +12,9 @@ const useStyles = makeStyles({
 });
 
 const StyledSlider = withStyles({
-  container: {
-    overflow: 'visible',
-  },
   thumb: {
-    height: 32,
-    width: 32,
+    height: 24,
+    width: 24,
     backgroundColor: '#fff',
     border: '2px solid #de235b',
     '&$focused, &:hover': {

diff --git a/docs/src/pages/lab/slider/slider.md b/docs/src/pages/lab/slider/slider.md
@@ -37,8 +37,8 @@ Sliders reflect the current state of the settings they control.
 
 ## Customized sliders
 
-If you have read the [overrides documentation page](/customization/overrides/)
-and you are still not confident jumping in, here are some examples of how you can customize the component.
+Here is an example of customizing the component. You can learn more about this in the
+[overrides documentation page](/customization/overrides/).
 
 {{"demo": "pages/lab/slider/CustomizedSlider.js"}}