From 59445504cb050067faf908274a18fdea780ba4d0 Mon Sep 17 00:00:00 2001 From: Matt Date: Thu, 2 May 2019 09:56:41 +0100 Subject: [PATCH] [docs] Simplify wording for customization demo descriptions (#15539) --- docs/src/pages/demos/badges/badges.md | 4 ++-- docs/src/pages/demos/breadcrumbs/breadcrumbs.md | 4 ++-- docs/src/pages/demos/buttons/buttons.md | 4 ++-- docs/src/pages/demos/dialogs/dialogs.md | 6 ++++-- docs/src/pages/demos/expansion-panels/expansion-panels.md | 4 ++-- docs/src/pages/demos/menus/menus.md | 6 +++--- docs/src/pages/demos/progress/progress.md | 4 ++-- docs/src/pages/demos/selects/selects.md | 4 ++-- docs/src/pages/demos/snackbars/snackbars.md | 4 ++-- docs/src/pages/demos/steppers/steppers.md | 7 +++---- docs/src/pages/demos/switches/CustomizedSwitches.js | 3 ++- docs/src/pages/demos/switches/CustomizedSwitches.tsx | 3 ++- docs/src/pages/demos/switches/switches.md | 4 ++-- docs/src/pages/demos/tables/tables.md | 4 ++-- docs/src/pages/demos/tabs/tabs.md | 4 ++-- docs/src/pages/demos/text-fields/text-fields.md | 4 ++-- docs/src/pages/demos/tooltips/tooltips.md | 4 ++-- docs/src/pages/lab/slider/CustomizedSlider.js | 7 ++----- docs/src/pages/lab/slider/CustomizedSlider.tsx | 7 ++----- docs/src/pages/lab/slider/slider.md | 4 ++-- 20 files changed, 44 insertions(+), 47 deletions(-) diff --git a/docs/src/pages/demos/badges/badges.md b/docs/src/pages/demos/badges/badges.md index 86528030857f2e..b555556b4371d4 100644 --- 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 index 7a767166de6846..86c4d94f856422 100644 --- 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 index 560bbb2bb414df..8b02c47cd8ca36 100644 --- 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 index ba973d42c4071d..2f6eed2cb507a8 100644 --- 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 index 84e2f5ba3b9e87..5278795552e6fd 100644 --- 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 index 2d1c7251870e0d..10a723d3f48c80 100644 --- 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 index 21a4d8340604cd..aeead9b5f2e61a 100644 --- 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 index 35429b000e5b50..033de530387d90 100644 --- 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 index 7c5c1749f5ed33..a05b87b8bcbfbd 100644 --- 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 index 1484eba632411b..b5e3d7eee3da54 100644 --- 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 index 6d004960528378..52f28c046de46f 100644 --- 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() { Off - + ({ width: 28, height: 16, padding: 0, + display: 'flex', }, switchBase: { padding: 2, @@ -151,7 +152,7 @@ function CustomizedSwitches() { Off - +