diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Input-value.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Input-value.png deleted file mode 100644 index 0a37d2d94c..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Input-value.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Locked.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Locked.png deleted file mode 100644 index 9263434200..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Locked.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Slider-with-buttons.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Slider-with-buttons.png deleted file mode 100644 index bf421f9530..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Slider-with-buttons.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Slider.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Slider.png deleted file mode 100644 index 442e4d5831..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Slider.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Unlocked.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Unlocked.png deleted file mode 100644 index 772011c0e9..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/Unlocked.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/default-input-value.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/default-input-value.svg new file mode 100644 index 0000000000..f5295338dc --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/default-input-value.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/locked.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/locked.svg new file mode 100644 index 0000000000..fb03871188 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/locked.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-continuous.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-continuous.png deleted file mode 100644 index 0f2e75b5af..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-continuous.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-continuous.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-continuous.svg new file mode 100644 index 0000000000..10b7ed7232 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-continuous.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-discrete.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-discrete.png deleted file mode 100644 index a0ff727557..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-discrete.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-discrete.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-discrete.svg new file mode 100644 index 0000000000..93e91815e8 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-discrete.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-elements.svg new file mode 100644 index 0000000000..cd3a6c5f2a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-elements.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-with-actions.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-with-actions.svg new file mode 100644 index 0000000000..f14491cb0e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/slider-with-actions.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/thumb value.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/thumb value.png deleted file mode 100644 index d09b03350f..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/thumb value.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/thumb-value.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/thumb-value.svg new file mode 100644 index 0000000000..3e326b790a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/thumb-value.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/unlocked.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/unlocked.svg new file mode 100644 index 0000000000..bbf6f1d02f --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/img/unlocked.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/slider.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/slider.md index ee1f44e97e..67d962f689 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/slider.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/slider/slider.md @@ -2,11 +2,13 @@ id: Slider section: components --- - + +import '../components.css'; + ## Elements - -Visual of slider - + +
![Visual elements of a slider](./img/slider-elements.svg)
+ 1. **Slider value (optional)**: Displays selected numeric value. 2. **Helper text (optional)**: Provides supplementary information about the slider such as minimum and maximum values. 3. **Track**: Orders the range of values users can set and adjust onto one line. @@ -41,13 +43,13 @@ instead. ### Continuous slider -Visual of continuous slider +
![Visual of a continuous slider](./img/slider-continuous.svg)
Allows users to select any value within the slider's range using a thumb indicator. Use this variation when any value within your slider’s range is valid for your use case. ### Discrete slider -Visual of discrete slider +
![Visual of a discrete slider](./img/slider-discrete.svg)
Allows users to select a value by adjusting a thumb indicator to predefined values represented by tick marks on a track. Users can only select values indicated by a tick mark. If they attempt to select an unmarked value, the thumb indicator will always shift to the closest tick mark. @@ -60,16 +62,16 @@ For more information about using input groups, visit our [input group guidelines #### With default value input -Visual of slider with input value +
![Visual of a slider with an input value](./img/default-input-value.svg)
-1. **Number input in hover state**: Allows users to type in their numeric input or to adapt the slider value by using caret buttons. +1. **Number input in hover state**: Allows users to type in their numeric input or to update the slider value by using built-in browser options (like arrow buttons). 2. **Unit (optional)**: Provides a unit symbol for the value in the input field, when applicable. Value input is restrained by prescribed maximum and minimum parameters, and appears on the right side of the slider. #### With thumb value -Visual of slider with thumb value +
![Visual of a slider with a thumb value](./img/thumb-value.svg)
1. **Input field**: Allows users to type in their numeric input. 2. **Unit (optional)**: Provides a unit symbol for the value in the input field, when applicable. @@ -80,7 +82,7 @@ For more information about using number inputs, visit our [number input guidelin #### With buttons -Visual of slider with buttons +
![Visual of a slider with action buttons](./img/slider-with-actions.svg)
Use buttons on either side of the slider to increase or decrease selected value by set increments. @@ -88,11 +90,10 @@ Use buttons on either side of the slider to increase or decrease selected value Unlocked value -Visual of an unlocked slider +
![Visual of an unlocked slider](./img/unlocked.svg)
Locked value -Visual of a locked slider +
![Visual of a locked slider](./img/locked.svg)
Use a lock icon along with a slider if there is a use case to lock or unlock the slider value. Use a lock icon to display different user permissions or to indicate the possibility of automatic value alteration. Clicking on a lock icon results in locking a selected value and disabling the slider. If the user permissions allow it, users can unlock value by clicking on a lock icon.