From f0f5e1c9bbc0de8b014ba88349b81b52583d1f68 Mon Sep 17 00:00:00 2001 From: Matt Carrano Date: Wed, 14 Sep 2022 14:27:51 -0400 Subject: [PATCH 1/4] Create "Patterns" nav item and move Filters and Bulk Select docs --- .../bulk-selection/bulk-selection.md | 0 .../bulk-selection/img/bulk-select-checkbox.png | Bin .../bulk-selection/img/bulk-selection-example.png | Bin .../img/bulk-selection-no-toolbar.png | Bin .../bulk-selection/img/bulk-selector.png | Bin .../filters/filters.md | 0 .../filters/img/attribute-filter-checkbox.png | Bin .../filters/img/attribute-filter-date-picker.png | Bin .../filters/img/attribute-filter-single.png | Bin .../filters/img/attribute-filter.png | Bin .../filters/img/badge.png | Bin .../filters/img/checkbox-search.png | Bin .../filters/img/checkbox-select-add.png | Bin .../filters/img/checkbox-select.png | Bin .../filters/img/chips.png | Bin .../filters/img/error-table.png | Bin .../filters/img/ex-datalist.png | Bin .../filters/img/ex-table.png | Bin .../filters/img/faceted-grouped.png | Bin .../filters/img/faceted-single.png | Bin .../filters/img/filter-group-2.png | Bin .../filters/img/filter-group.png | Bin .../filters/img/mobile.png | Bin .../filters/img/single-select.png | Bin .../filters/img/single-type-ahead.png | Bin .../filters/img/text-input-chips.png | Bin .../filters/img/text-input.png | Bin .../filters/img/toggle-group.png | Bin .../filters/img/type-ahead-single.png | Bin .../v4/patternfly-docs/patternfly-docs.config.js | 1 + .../v4/patternfly-docs/patternfly-docs.source.js | 1 + 31 files changed, 2 insertions(+) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/bulk-selection/bulk-selection.md (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/bulk-selection/img/bulk-select-checkbox.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/bulk-selection/img/bulk-selection-example.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/bulk-selection/img/bulk-selection-no-toolbar.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/bulk-selection/img/bulk-selector.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/filters.md (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/attribute-filter-checkbox.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/attribute-filter-date-picker.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/attribute-filter-single.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/attribute-filter.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/badge.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/checkbox-search.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/checkbox-select-add.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/checkbox-select.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/chips.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/error-table.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/ex-datalist.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/ex-table.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/faceted-grouped.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/faceted-single.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/filter-group-2.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/filter-group.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/mobile.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/single-select.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/single-type-ahead.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/text-input-chips.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/text-input.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/toggle-group.png (100%) rename packages/v4/patternfly-docs/content/{design-guidelines/usage-and-behavior => patterns}/filters/img/type-ahead-single.png (100%) diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/bulk-selection/bulk-selection.md b/packages/v4/patternfly-docs/content/patterns/bulk-selection/bulk-selection.md similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/bulk-selection/bulk-selection.md rename to packages/v4/patternfly-docs/content/patterns/bulk-selection/bulk-selection.md diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/bulk-selection/img/bulk-select-checkbox.png b/packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-select-checkbox.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/bulk-selection/img/bulk-select-checkbox.png rename to packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-select-checkbox.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/bulk-selection/img/bulk-selection-example.png b/packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-example.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/bulk-selection/img/bulk-selection-example.png rename to packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-example.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/bulk-selection/img/bulk-selection-no-toolbar.png b/packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-no-toolbar.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/bulk-selection/img/bulk-selection-no-toolbar.png rename to packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-no-toolbar.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/bulk-selection/img/bulk-selector.png b/packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-selector.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/bulk-selection/img/bulk-selector.png rename to packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-selector.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/filters.md b/packages/v4/patternfly-docs/content/patterns/filters/filters.md similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/filters.md rename to packages/v4/patternfly-docs/content/patterns/filters/filters.md diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-checkbox.png b/packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter-checkbox.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-checkbox.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter-checkbox.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-date-picker.png b/packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter-date-picker.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-date-picker.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter-date-picker.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-single.png b/packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter-single.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter-single.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter-single.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter.png b/packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/attribute-filter.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/badge.png b/packages/v4/patternfly-docs/content/patterns/filters/img/badge.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/badge.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/badge.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-search.png b/packages/v4/patternfly-docs/content/patterns/filters/img/checkbox-search.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-search.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/checkbox-search.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select-add.png b/packages/v4/patternfly-docs/content/patterns/filters/img/checkbox-select-add.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select-add.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/checkbox-select-add.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select.png b/packages/v4/patternfly-docs/content/patterns/filters/img/checkbox-select.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/checkbox-select.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/checkbox-select.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/chips.png b/packages/v4/patternfly-docs/content/patterns/filters/img/chips.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/chips.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/chips.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/error-table.png b/packages/v4/patternfly-docs/content/patterns/filters/img/error-table.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/error-table.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/error-table.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/ex-datalist.png b/packages/v4/patternfly-docs/content/patterns/filters/img/ex-datalist.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/ex-datalist.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/ex-datalist.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/ex-table.png b/packages/v4/patternfly-docs/content/patterns/filters/img/ex-table.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/ex-table.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/ex-table.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-grouped.png b/packages/v4/patternfly-docs/content/patterns/filters/img/faceted-grouped.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-grouped.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/faceted-grouped.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-single.png b/packages/v4/patternfly-docs/content/patterns/filters/img/faceted-single.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/faceted-single.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/faceted-single.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-2.png b/packages/v4/patternfly-docs/content/patterns/filters/img/filter-group-2.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group-2.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/filter-group-2.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group.png b/packages/v4/patternfly-docs/content/patterns/filters/img/filter-group.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/filter-group.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/filter-group.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/mobile.png b/packages/v4/patternfly-docs/content/patterns/filters/img/mobile.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/mobile.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/mobile.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-select.png b/packages/v4/patternfly-docs/content/patterns/filters/img/single-select.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-select.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/single-select.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-type-ahead.png b/packages/v4/patternfly-docs/content/patterns/filters/img/single-type-ahead.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/single-type-ahead.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/single-type-ahead.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-input-chips.png b/packages/v4/patternfly-docs/content/patterns/filters/img/text-input-chips.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-input-chips.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/text-input-chips.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-input.png b/packages/v4/patternfly-docs/content/patterns/filters/img/text-input.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/text-input.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/text-input.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/toggle-group.png b/packages/v4/patternfly-docs/content/patterns/filters/img/toggle-group.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/toggle-group.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/toggle-group.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/type-ahead-single.png b/packages/v4/patternfly-docs/content/patterns/filters/img/type-ahead-single.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/filters/img/type-ahead-single.png rename to packages/v4/patternfly-docs/content/patterns/filters/img/type-ahead-single.png diff --git a/packages/v4/patternfly-docs/patternfly-docs.config.js b/packages/v4/patternfly-docs/patternfly-docs.config.js index b037773741..82e9de353a 100644 --- a/packages/v4/patternfly-docs/patternfly-docs.config.js +++ b/packages/v4/patternfly-docs/patternfly-docs.config.js @@ -27,6 +27,7 @@ module.exports = { { section: 'demos' }, { section: 'layouts' }, { section: 'utilities' }, + { section: 'patterns'} { section: 'contribute' }, { section: 'training' }, { href: '/community' } diff --git a/packages/v4/patternfly-docs/patternfly-docs.source.js b/packages/v4/patternfly-docs/patternfly-docs.source.js index ce2ba81a96..fbd425b071 100644 --- a/packages/v4/patternfly-docs/patternfly-docs.source.js +++ b/packages/v4/patternfly-docs/patternfly-docs.source.js @@ -10,6 +10,7 @@ module.exports = (sourceMD, sourceProps) => { sourceMD(path.join(contentBase, 'design-guidelines/**/*.md'), 'design-guidelines'); sourceMD(path.join(contentBase, 'training/**/*.md'), 'training'); sourceMD(path.join(contentBase, 'extensions/**/*.md'), 'extensions'); + sourceMD(path.join(contentBase, 'patterns/**/*.md'), 'patterns'); // Theme pages const themePagesPath = require From f065a22956be015040027be82c0410e8d2a6eda8 Mon Sep 17 00:00:00 2001 From: Matt Carrano Date: Wed, 14 Sep 2022 14:35:00 -0400 Subject: [PATCH 2/4] Fix errors --- .../patterns/bulk-selection/bulk-selection.md | 2 +- .../content/patterns/filters/filters.md | 51 +++++++++---------- .../patternfly-docs/patternfly-docs.config.js | 2 +- 3 files changed, 27 insertions(+), 28 deletions(-) diff --git a/packages/v4/patternfly-docs/content/patterns/bulk-selection/bulk-selection.md b/packages/v4/patternfly-docs/content/patterns/bulk-selection/bulk-selection.md index cd96a5100b..bdc7c72a56 100644 --- a/packages/v4/patternfly-docs/content/patterns/bulk-selection/bulk-selection.md +++ b/packages/v4/patternfly-docs/content/patterns/bulk-selection/bulk-selection.md @@ -1,6 +1,6 @@ --- id: Bulk selection -section: guidelines +section: patterns --- ## Bulk selection diff --git a/packages/v4/patternfly-docs/content/patterns/filters/filters.md b/packages/v4/patternfly-docs/content/patterns/filters/filters.md index 283998504f..458ee804c9 100644 --- a/packages/v4/patternfly-docs/content/patterns/filters/filters.md +++ b/packages/v4/patternfly-docs/content/patterns/filters/filters.md @@ -1,6 +1,6 @@ --- id: Filters -section: guidelines +section: patterns related: [ 'Badge', 'Chip', @@ -12,7 +12,7 @@ related: [ ] --- -**Filters** allow users to narrow down content from data in tables, data lists or card views, among many others. +**Filters** allow users to narrow down content from data in tables, data lists or card views, among many others. PatternFly provides a number of components that can be used in a variety of combinations to create a custom filtering experience. These elements may be used in a toolbar or on their own. @@ -23,8 +23,8 @@ Filters can consist of one or multiple attributes. * [Checkbox select](#checkbox-select) -Filters consisting of multiple attributes include: -* [Attribute-value](#attribute-value-filter) +Filters consisting of multiple attributes include: +* [Attribute-value](#attribute-value-filter) * [Filter group](#filter-group) * [Toggle group](#toggle-group) * [Faceted filter](#faceted-filter) @@ -33,7 +33,7 @@ Filters consisting of multiple attributes include: There are various ways to allow users to filter down content. Filtering methods include [text entry filters](#text-entry-filters), [single selects](#single-select) and [checkbox selects](#checkbox-select). ### Text entry filters -A text entry filter provides the user with an input field to type in values that filter the view, whether or not their input is an exact match. The text entry filter uses the [search input](/components/search-input) component which can be used with or without a button. +A text entry filter provides the user with an input field to type in values that filter the view, whether or not their input is an exact match. The text entry filter uses the [search input](/components/search-input) component which can be used with or without a button. text input filters @@ -45,7 +45,7 @@ Note, the placeholder text in your text entry filter should indicate what the us #### Behavior Although both basic filter components have the same end result, they differ in when the search is triggered. With search inputs, the data in the table automatically filters as the user types. With input groups, the user must press enter to apply the search, and start filtering data in the table. -**Note:** With both basic filter components, the user can only filter by one input at a time. +**Note:** With both basic filter components, the user can only filter by one input at a time. #### When to use Use a text entry filter when you’d like to give users the ability to search values in unbound data. Using the _search input_ component is preferred, however, use the _input group_ component when you are worried about performance issues with querying a large data set after every stroke. @@ -58,7 +58,7 @@ Text entry filters support [filter chips](#filter-chip), but do not support [typ text input chips ### Single select -A single select provides the user with a fixed set of values from which they can only select one value. This filter type uses the [single select component](/components/select/react#single). If the single select filter is the only filter in the toolbar, it should have an “All options” menu item by default as a way to reset the filter (unless a selection must be made at all times). This “All” option will be selected by default, acting as an equivalent of no filter selected. +A single select provides the user with a fixed set of values from which they can only select one value. This filter type uses the [single select component](/components/select/react#single). If the single select filter is the only filter in the toolbar, it should have an “All options” menu item by default as a way to reset the filter (unless a selection must be made at all times). This “All” option will be selected by default, acting as an equivalent of no filter selected. single select list filter @@ -72,11 +72,11 @@ Use a single select list when you’d like users to only select one option from #### Supported features Single selects can include [type-aheads](#type-ahead) as an added feature. -**Type-ahead** functionality can be added to single selects, allowing users to input a search inside the toggle, filtering down from the list of menu options shown. This is especially useful for very long lists that would be inconvenient for the user to scroll through. Type-ahead is recommended for lists that are more than 10 items long. +**Type-ahead** functionality can be added to single selects, allowing users to input a search inside the toggle, filtering down from the list of menu options shown. This is especially useful for very long lists that would be inconvenient for the user to scroll through. Type-ahead is recommended for lists that are more than 10 items long. type-ahead in a single select -Stand alone single selects in a toolbar do not use badge counts or filter chips since only one selection can be made, and the selection will already be apparent in the toggle. +Stand alone single selects in a toolbar do not use badge counts or filter chips since only one selection can be made, and the selection will already be apparent in the toggle. ### Checkbox select A checkbox select provides the user with a fixed set of values from which they can select multiple values. This filter type uses the [checkbox select component](/components/select/react#checkbox-input). @@ -90,13 +90,13 @@ The user is presented with a list of values to choose from. From this list, user Use a checkbox select for selecting multiple values from a predefined list. Multiple values will be combined using a logical “OR” operation. #### Supported features -Checkbox select supported features include [filter chips](#filter-chip), and optionally, [badges](#badge-count). +Checkbox select supported features include [filter chips](#filter-chip), and optionally, [badges](#badge-count). add ons for checkbox select **Filter chips** are used as a way for users to view all their selections when the menu of selections is collapsed. -**Badges** can be used in the checkbox select toggle to indicate how many selections have been made, although they are not required. +**Badges** can be used in the checkbox select toggle to indicate how many selections have been made, although they are not required. Although **typeahead** is not supported for checkbox selects, you can add a search input inside the menu, right above the items the user can select from. This will allow the user to filter down the list of options. @@ -119,13 +119,13 @@ The attribute-value filter gives users the ability to specify an attribute-value The following elements make up an attribute-value (textbox) filter. 1. **Attribute selector:** A select list that allows the user to select the attribute that they want to filter against. 2. **Value selector:** A value selector that is used to pass a value to the filter. The value selector can be any data input component. Common components used for value selection include: - - a. A **text entry field** for entering a value from the keyboard. Use when you will enter the value as unbounded data (e.g. a name). When the text entry field is a basic search input, the value will appear as a chip automatically, and the search will start being validated. When the text entry field is a search input with a button, the value will appear as a chip and the search will be validated when the user presses the Enter key on their keyboard or the arrow button. - + + a. A **text entry field** for entering a value from the keyboard. Use when you will enter the value as unbounded data (e.g. a name). When the text entry field is a basic search input, the value will appear as a chip automatically, and the search will start being validated. When the text entry field is a search input with a button, the value will appear as a chip and the search will be validated when the user presses the Enter key on their keyboard or the arrow button. + b. A **single select** for selecting a value from a predefined list. This will work the same as a stand alone single select, however since any selection in an attribute filter will result in a chip, there is no need to have an “All” option as part of your menu, as users can reset their filters via the filter chips. - + c. A **checkbox select** for selecting multiple values from a predefined list. Multiple values will be combined using a logical "OR" operation. - + d. A **date picker** for selecting a date range. Use when the value you want to filter on is expressed as a date and/or time stamp. #### Behavior @@ -145,11 +145,11 @@ When using the attribute filter, a filter query is triggered whenever the user s Use an attribute-value filter when users have multiple attributes to filter on. This filter should be used over a faceted filter when the attributes use different selection formats (for example, attribute A uses a single select, but attribute B uses a checkbox select). #### Supported features -Attribute-value filter features include [filter chips](#filter-chip), [badges](#badge-count), and [type-ahead](#type-ahead). +Attribute-value filter features include [filter chips](#filter-chip), [badges](#badge-count), and [type-ahead](#type-ahead). **Filter chips** are strongly recommended for attribute filters as a way for users to view all their selections when the user switches between attribute filters and when the menu of selections is collapsed. -**Badges** can be used in a checkbox select value selector toggle to indicate how many selections have been made. +**Badges** can be used in a checkbox select value selector toggle to indicate how many selections have been made. **Type-ahead** allows the user to narrow down their search and is supported for all value selection types except checkbox selects. Although typeahead is **not supported** for checkbox selects, you can add a search input inside the menu, above the items the user can select from. @@ -168,7 +168,7 @@ Use a filter group when you only have a handful of attributes that you want to s Filter queries are applied when the user selects or deselects an item in the list or selects a date/time range. If the filter group is only made up of single selects, the selected filters will be shown inside each filter’s toggle. If the filter group contains multiple selects, the selected filters will be shown as filter chips underneath the filters. Additionally, you may also choose to display the selected number of items in each filter as a badge in their toggle. A clear filter action to the right of the filters will remove all applied filters. #### Supported features -Filter groups support [filter chips](#filter-chip), [badges](#badge-count), and [type-ahead](#type-ahead). +Filter groups support [filter chips](#filter-chip), [badges](#badge-count), and [type-ahead](#type-ahead). **Filter chips** are recommended for filter groups that have one or more checkbox selects. If the filter group only consists of single selects, there is no need to add filter chips as the count will always be one. @@ -211,10 +211,10 @@ Use a faceted filter when: **Do not use** a faceted filter when the important characteristics of the items are mostly open-ended values and/or have a mix of single and multiple select. Additionally, if space is limited, consider using an [attribute-value](#attribute-value-filter) filter instead. #### Behavior -New filters are applied or removed as the user selects or deselects values using checkboxes. A badge count can optionally be added to the toggle to indicate the number of selections made in the filter. Selections will appear as filter chips underneath the filter. Note that there is an "AND" relationship between facets, and an "OR" relationship between values. +New filters are applied or removed as the user selects or deselects values using checkboxes. A badge count can optionally be added to the toggle to indicate the number of selections made in the filter. Selections will appear as filter chips underneath the filter. Note that there is an "AND" relationship between facets, and an "OR" relationship between values. #### Supported features -Faceted filters support [filter chips](#filter-chip), [badges](#badge-count), and [type-ahead](#type-ahead). +Faceted filters support [filter chips](#filter-chip), [badges](#badge-count), and [type-ahead](#type-ahead). **Filter chips** are recommended as a way for users to see their selections when the menu is closed. @@ -228,10 +228,10 @@ Different attributes can be added to different filters. These include: * [Badge count](#badge-count) * [Type-ahead](#type-ahead) -This table describes which features are **supported** for each filter type. Note that just because a feature is supported, does not mean it must be used in your filters. +This table describes which features are **supported** for each filter type. Note that just because a feature is supported, does not mean it must be used in your filters. | Filter type | Filter chips | Type-ahead | Badge count -| ----------------- | ------- | ------ | ------- | +| ----------------- | ------- | ------ | ------- | | **Text entry**| Yes (if within an attribute filter) | Yes | No | | **Single select** | Yes (if within an attribute filter) | Yes | No | | **Checkbox select** | Yes | No (but you can have a search inside the menu) | Yes | @@ -272,7 +272,7 @@ You may opt to use a badge in a checkbox select to indicate to the user how many badge ### Type-ahead -Adding type-ahead capabilities to your filters is useful when there is a large number of items to select from the filter dropdown. Users can quickly find the value they would like to filter by typing in the field. +Adding type-ahead capabilities to your filters is useful when there is a large number of items to select from the filter dropdown. Users can quickly find the value they would like to filter by typing in the field. type ahead example @@ -297,7 +297,7 @@ If your filter has limitations, you may present an error state on your filter to * When there is a limit on how many filters a user can apply at a time * When there is a limit on how many options can be selected for one attribute -When using error validation in a filter, include a tooltip on hover with an explanation of what went wrong. +When using error validation in a filter, include a tooltip on hover with an explanation of what went wrong. Example of filter validation @@ -326,4 +326,3 @@ Filter placeholder text in input fields should read “Filter by [attribute name ### Clearing filters The option to clear all filters will be displayed after the last filter chip. It should read “Clear filters” in sentence case. When clicked, it should remove all applied filters and collapse the toolbar back into a single row. - diff --git a/packages/v4/patternfly-docs/patternfly-docs.config.js b/packages/v4/patternfly-docs/patternfly-docs.config.js index 82e9de353a..c6e6cb9e65 100644 --- a/packages/v4/patternfly-docs/patternfly-docs.config.js +++ b/packages/v4/patternfly-docs/patternfly-docs.config.js @@ -27,7 +27,7 @@ module.exports = { { section: 'demos' }, { section: 'layouts' }, { section: 'utilities' }, - { section: 'patterns'} + { section: 'patterns'}, { section: 'contribute' }, { section: 'training' }, { href: '/community' } From f90ef240664cd987bcc44fad5988f50349715183 Mon Sep 17 00:00:00 2001 From: Matt Carrano Date: Tue, 1 Nov 2022 10:06:15 -0400 Subject: [PATCH 3/4] Update "demos" to "patterns" and move design guidelines --- .../patterns/bulk-selection/bulk-selection.md | 0 .../img/bulk-select-checkbox.png | Bin .../img/bulk-selection-example.png | Bin .../img/bulk-selection-no-toolbar.png | Bin .../bulk-selection/img/bulk-selector.png | Bin .../card-view/card-view.md | 2 +- .../card-view/img/add-card-empty-state.png | Bin .../card-view/img/card-images.png | Bin .../img/card-view-sticky-toolbar.png | Bin .../card-view/img/card-view.png | Bin .../card-view/img/card.png | Bin .../card-view/img/few-multiple-actions.png | Bin .../card-view/img/global-actions.png | Bin .../card-view/img/gray-background.png | Bin .../card-view/img/inline-actions.png | Bin .../card-view/img/mobile-cards.png | Bin .../card-view/img/multiple-inline.png | Bin .../card-view/img/white-background.png | Bin .../dashboard/dashboard.md | 10 +-- .../dashboard/img/aggregate-status-cards.png | Bin .../dashboard/img/capacity-card-example.png | Bin .../dashboard/img/consumers-card-example.png | Bin .../dashboard/img/dashbar.png | Bin .../dashboard/img/dashboard-4-column.png | Bin .../dashboard/img/dashboard-example-final.png | Bin .../dashboard/img/dashboard-first-cut.png | Bin .../dashboard/img/dashboard-iterations.png | Bin .../dashboard/img/dashboard-view-desktop.png | Bin .../dashboard/img/dashboard-what-to-avoid.png | Bin .../dashboard/img/details-card-example.png | Bin .../dashboard/img/details-card.png | Bin .../dashboard/img/events-card-example.png | Bin .../dashboard/img/events-card.png | Bin .../dashboard/img/health-card-example.png | Bin .../dashboard/img/inventory-card-example.png | Bin .../img/performance-card-example.png | Bin .../dashboard/img/trend-card-multiple.png | Bin .../dashboard/img/trend-cards.png | Bin .../dashboard/img/utilization-cards.png | Bin .../patterns/filters/filters.md | 0 .../filters/img/attribute-filter-checkbox.png | Bin .../img/attribute-filter-date-picker.png | Bin .../filters/img/attribute-filter-single.png | Bin .../patterns/filters/img/attribute-filter.png | Bin .../patterns/filters/img/badge.png | Bin .../patterns/filters/img/checkbox-search.png | Bin .../filters/img/checkbox-select-add.png | Bin .../patterns/filters/img/checkbox-select.png | Bin .../patterns/filters/img/chips.png | Bin .../patterns/filters/img/error-table.png | Bin .../patterns/filters/img/ex-datalist.png | Bin .../patterns/filters/img/ex-table.png | Bin .../patterns/filters/img/faceted-grouped.png | Bin .../patterns/filters/img/faceted-single.png | Bin .../patterns/filters/img/filter-group-2.png | Bin .../patterns/filters/img/filter-group.png | Bin .../patterns/filters/img/mobile.png | Bin .../patterns/filters/img/single-select.png | Bin .../filters/img/single-type-ahead.png | Bin .../patterns/filters/img/text-input-chips.png | Bin .../patterns/filters/img/text-input.png | Bin .../patterns/filters/img/toggle-group.png | Bin .../filters/img/type-ahead-single.png | Bin .../password strength indicator medium.png | Bin .../password strength indicator strong.png | Bin .../img/password strength indicator weak.png | Bin .../password-strength/password-strength.md | 6 +- .../mobile-primary-detail-in-card-view.png | Bin .../mobile-primary-detail-in-list-view.png | Bin .../img/primary-detail-in-card-demo-list.png | Bin .../img/primary-detail-in-card-view.png | Bin .../img/primary-detail-in-data-list.png | Bin .../img/primary-detail-multi-select.png | Bin .../img/primary-detail-splitter.png | Bin .../primary-detail/primary-detail.md | 62 +++++++++--------- .../patternfly-docs/patternfly-docs.config.js | 3 +- .../patternfly-docs/patternfly-docs.source.js | 1 - 77 files changed, 41 insertions(+), 43 deletions(-) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/bulk-selection/bulk-selection.md (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/bulk-selection/img/bulk-select-checkbox.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/bulk-selection/img/bulk-selection-example.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/bulk-selection/img/bulk-selection-no-toolbar.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/bulk-selection/img/bulk-selector.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/card-view.md (99%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/img/add-card-empty-state.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/img/card-images.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/img/card-view-sticky-toolbar.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/img/card-view.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/img/card.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/img/few-multiple-actions.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/img/global-actions.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/img/gray-background.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/img/inline-actions.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/img/mobile-cards.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/img/multiple-inline.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/card-view/img/white-background.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/dashboard.md (99%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/aggregate-status-cards.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/capacity-card-example.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/consumers-card-example.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/dashbar.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/dashboard-4-column.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/dashboard-example-final.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/dashboard-first-cut.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/dashboard-iterations.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/dashboard-view-desktop.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/dashboard-what-to-avoid.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/details-card-example.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/details-card.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/events-card-example.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/events-card.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/health-card-example.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/inventory-card-example.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/performance-card-example.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/trend-card-multiple.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/trend-cards.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/dashboard/img/utilization-cards.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/filters.md (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/attribute-filter-checkbox.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/attribute-filter-date-picker.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/attribute-filter-single.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/attribute-filter.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/badge.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/checkbox-search.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/checkbox-select-add.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/checkbox-select.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/chips.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/error-table.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/ex-datalist.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/ex-table.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/faceted-grouped.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/faceted-single.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/filter-group-2.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/filter-group.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/mobile.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/single-select.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/single-type-ahead.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/text-input-chips.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/text-input.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/toggle-group.png (100%) rename packages/v4/patternfly-docs/content/{ => design-guidelines}/patterns/filters/img/type-ahead-single.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/password-strength/img/password strength indicator medium.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/password-strength/img/password strength indicator strong.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/password-strength/img/password strength indicator weak.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/password-strength/password-strength.md (89%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/primary-detail/img/mobile-primary-detail-in-card-view.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/primary-detail/img/mobile-primary-detail-in-list-view.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/primary-detail/img/primary-detail-in-card-demo-list.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/primary-detail/img/primary-detail-in-card-view.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/primary-detail/img/primary-detail-in-data-list.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/primary-detail/img/primary-detail-multi-select.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/primary-detail/img/primary-detail-splitter.png (100%) rename packages/v4/patternfly-docs/content/design-guidelines/{demos => patterns}/primary-detail/primary-detail.md (94%) diff --git a/packages/v4/patternfly-docs/content/patterns/bulk-selection/bulk-selection.md b/packages/v4/patternfly-docs/content/design-guidelines/patterns/bulk-selection/bulk-selection.md similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/bulk-selection/bulk-selection.md rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/bulk-selection/bulk-selection.md diff --git a/packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-select-checkbox.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/bulk-selection/img/bulk-select-checkbox.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-select-checkbox.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/bulk-selection/img/bulk-select-checkbox.png diff --git a/packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-example.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/bulk-selection/img/bulk-selection-example.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-example.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/bulk-selection/img/bulk-selection-example.png diff --git a/packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-no-toolbar.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/bulk-selection/img/bulk-selection-no-toolbar.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-selection-no-toolbar.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/bulk-selection/img/bulk-selection-no-toolbar.png diff --git a/packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-selector.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/bulk-selection/img/bulk-selector.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/bulk-selection/img/bulk-selector.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/bulk-selection/img/bulk-selector.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/card-view.md b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/card-view.md similarity index 99% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/card-view.md rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/card-view.md index 77d45d75ce..4431fe295b 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/card-view.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/card-view.md @@ -1,6 +1,6 @@ --- id: Card view -section: demos +section: patterns --- diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/add-card-empty-state.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/add-card-empty-state.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/add-card-empty-state.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/add-card-empty-state.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/card-images.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/card-images.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/card-images.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/card-images.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/card-view-sticky-toolbar.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/card-view-sticky-toolbar.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/card-view-sticky-toolbar.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/card-view-sticky-toolbar.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/card-view.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/card-view.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/card-view.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/card-view.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/card.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/card.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/card.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/card.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/few-multiple-actions.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/few-multiple-actions.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/few-multiple-actions.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/few-multiple-actions.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/global-actions.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/global-actions.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/global-actions.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/global-actions.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/gray-background.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/gray-background.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/gray-background.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/gray-background.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/inline-actions.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/inline-actions.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/inline-actions.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/inline-actions.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/mobile-cards.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/mobile-cards.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/mobile-cards.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/mobile-cards.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/multiple-inline.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/multiple-inline.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/multiple-inline.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/multiple-inline.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/white-background.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/white-background.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/card-view/img/white-background.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/card-view/img/white-background.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/dashboard.md b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/dashboard.md similarity index 99% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/dashboard.md rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/dashboard.md index 6bca7afa86..3443ae5cf9 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/dashboard.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/dashboard.md @@ -1,6 +1,6 @@ --- id: Dashboard -section: demos +section: patterns --- A dashboard provides overviews of key metrics or performance indicators relevant to an application, process, or business. The overall experience of dashboards can vary greatly depending on their use cases, so it can be difficult to define a one-size-fits-all approach. These guidelines take a systematic approach to dashboard design that can be applied in a variety of situations. @@ -91,11 +91,11 @@ An event card lists items that occur in time. These could be alerts, tasks, or o ## Dashbar A dashbar is a smaller dashboard placed inside of each application or dashboard to provide essential information so that you can take immediate action if it’s needed. It’s always placed at the top and takes up the upper half of the screen. -Use dashbar when: -- Showing critical information about the current state of systems or other parts of an application. +Use dashbar when: +- Showing critical information about the current state of systems or other parts of an application. - Presenting historical data. It can be presented by charts. - Filtering important data from a table. -- Introducing a new feature. +- Introducing a new feature. - Showing the state of groups that can potentially have an impact on systems or any other parts of application. Dashbar in dashboard @@ -344,4 +344,4 @@ Add your cards to the layout you created in Step 3 and take a look at the result ### The final result Here’s our final dashboard after we made a few adjustments. You’ll see that the inventory card is taller than it needs to be. But that’s OK since it matches the height of surrounding cards and creates a uniform layout. It also allows space for further extension without introducing a scroll bar. -the finished dashboard \ No newline at end of file +the finished dashboard diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/aggregate-status-cards.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/aggregate-status-cards.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/aggregate-status-cards.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/aggregate-status-cards.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/capacity-card-example.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/capacity-card-example.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/capacity-card-example.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/capacity-card-example.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/consumers-card-example.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/consumers-card-example.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/consumers-card-example.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/consumers-card-example.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashbar.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashbar.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashbar.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashbar.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashboard-4-column.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashboard-4-column.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashboard-4-column.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashboard-4-column.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashboard-example-final.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashboard-example-final.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashboard-example-final.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashboard-example-final.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashboard-first-cut.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashboard-first-cut.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashboard-first-cut.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashboard-first-cut.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashboard-iterations.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashboard-iterations.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashboard-iterations.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashboard-iterations.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashboard-view-desktop.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashboard-view-desktop.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashboard-view-desktop.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashboard-view-desktop.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashboard-what-to-avoid.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashboard-what-to-avoid.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/dashboard-what-to-avoid.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/dashboard-what-to-avoid.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/details-card-example.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/details-card-example.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/details-card-example.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/details-card-example.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/details-card.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/details-card.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/details-card.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/details-card.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/events-card-example.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/events-card-example.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/events-card-example.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/events-card-example.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/events-card.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/events-card.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/events-card.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/events-card.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/health-card-example.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/health-card-example.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/health-card-example.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/health-card-example.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/inventory-card-example.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/inventory-card-example.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/inventory-card-example.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/inventory-card-example.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/performance-card-example.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/performance-card-example.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/performance-card-example.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/performance-card-example.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/trend-card-multiple.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/trend-card-multiple.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/trend-card-multiple.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/trend-card-multiple.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/trend-cards.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/trend-cards.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/trend-cards.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/trend-cards.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/utilization-cards.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/utilization-cards.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/dashboard/img/utilization-cards.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/dashboard/img/utilization-cards.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/filters.md b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/filters.md similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/filters.md rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/filters.md diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter-checkbox.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/attribute-filter-checkbox.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter-checkbox.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/attribute-filter-checkbox.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter-date-picker.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/attribute-filter-date-picker.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter-date-picker.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/attribute-filter-date-picker.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter-single.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/attribute-filter-single.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter-single.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/attribute-filter-single.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/attribute-filter.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/attribute-filter.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/attribute-filter.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/badge.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/badge.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/badge.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/badge.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/checkbox-search.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/checkbox-search.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/checkbox-search.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/checkbox-search.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/checkbox-select-add.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/checkbox-select-add.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/checkbox-select-add.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/checkbox-select-add.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/checkbox-select.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/checkbox-select.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/checkbox-select.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/checkbox-select.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/chips.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/chips.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/chips.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/chips.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/error-table.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/error-table.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/error-table.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/error-table.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/ex-datalist.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/ex-datalist.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/ex-datalist.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/ex-datalist.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/ex-table.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/ex-table.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/ex-table.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/ex-table.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/faceted-grouped.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/faceted-grouped.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/faceted-grouped.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/faceted-grouped.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/faceted-single.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/faceted-single.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/faceted-single.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/faceted-single.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/filter-group-2.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/filter-group-2.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/filter-group-2.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/filter-group-2.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/filter-group.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/filter-group.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/filter-group.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/filter-group.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/mobile.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/mobile.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/mobile.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/mobile.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/single-select.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/single-select.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/single-select.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/single-select.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/single-type-ahead.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/single-type-ahead.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/single-type-ahead.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/single-type-ahead.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/text-input-chips.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/text-input-chips.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/text-input-chips.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/text-input-chips.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/text-input.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/text-input.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/text-input.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/text-input.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/toggle-group.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/toggle-group.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/toggle-group.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/toggle-group.png diff --git a/packages/v4/patternfly-docs/content/patterns/filters/img/type-ahead-single.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/type-ahead-single.png similarity index 100% rename from packages/v4/patternfly-docs/content/patterns/filters/img/type-ahead-single.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/filters/img/type-ahead-single.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/password-strength/img/password strength indicator medium.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/password-strength/img/password strength indicator medium.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/password-strength/img/password strength indicator medium.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/password-strength/img/password strength indicator medium.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/password-strength/img/password strength indicator strong.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/password-strength/img/password strength indicator strong.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/password-strength/img/password strength indicator strong.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/password-strength/img/password strength indicator strong.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/password-strength/img/password strength indicator weak.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/password-strength/img/password strength indicator weak.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/password-strength/img/password strength indicator weak.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/password-strength/img/password strength indicator weak.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/password-strength/password-strength.md b/packages/v4/patternfly-docs/content/design-guidelines/patterns/password-strength/password-strength.md similarity index 89% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/password-strength/password-strength.md rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/password-strength/password-strength.md index 067bf4fffe..b03e35ffad 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/demos/password-strength/password-strength.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/patterns/password-strength/password-strength.md @@ -1,9 +1,9 @@ --- id: Password strength -section: demos +section: patterns --- -A **password strength indicator** is displayed to a user after they have entered a password in a field. It allows the user to understand the strength of a password after it has met the password requirements. The strength of the password is determined by a validation algorithm after the specific rules are met. Using a password strength indicator allows users to create stronger passwords, offering better protection from breaches. +A **password strength indicator** is displayed to a user after they have entered a password in a field. It allows the user to understand the strength of a password after it has met the password requirements. The strength of the password is determined by a validation algorithm after the specific rules are met. Using a password strength indicator allows users to create stronger passwords, offering better protection from breaches. ## Elements @@ -23,4 +23,4 @@ The password strength indicator is located on the top right corner of the input The password strength indicator: - is displayed after the password has met all password requirements. -- icons and words are not editable after it is dispalyed. \ No newline at end of file +- icons and words are not editable after it is dispalyed. diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/mobile-primary-detail-in-card-view.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/mobile-primary-detail-in-card-view.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/mobile-primary-detail-in-card-view.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/mobile-primary-detail-in-card-view.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/mobile-primary-detail-in-list-view.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/mobile-primary-detail-in-list-view.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/mobile-primary-detail-in-list-view.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/mobile-primary-detail-in-list-view.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/primary-detail-in-card-demo-list.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/primary-detail-in-card-demo-list.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/primary-detail-in-card-demo-list.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/primary-detail-in-card-demo-list.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/primary-detail-in-card-view.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/primary-detail-in-card-view.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/primary-detail-in-card-view.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/primary-detail-in-card-view.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/primary-detail-in-data-list.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/primary-detail-in-data-list.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/primary-detail-in-data-list.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/primary-detail-in-data-list.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/primary-detail-multi-select.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/primary-detail-multi-select.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/primary-detail-multi-select.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/primary-detail-multi-select.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/primary-detail-splitter.png b/packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/primary-detail-splitter.png similarity index 100% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/img/primary-detail-splitter.png rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/img/primary-detail-splitter.png diff --git a/packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/primary-detail.md b/packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/primary-detail.md similarity index 94% rename from packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/primary-detail.md rename to packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/primary-detail.md index 6929c51b2c..804e7f566d 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/demos/primary-detail/primary-detail.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/patterns/primary-detail/primary-detail.md @@ -1,10 +1,10 @@ --- id: Primary-detail -section: demos +section: patterns --- A **primary-detail layout** is an interface that shows a list of items and the corresponding details of the selected item. - + ## Elements A primary component sits in a container on the page, and detail components typically live in a slide-out [drawer](/components/drawer). @@ -13,63 +13,63 @@ A primary component sits in a container on the page, and detail components typic 1. **Primary component:** Contains the grouping of elements that can be selected to initiate each element’s details drawer. 2. **Drawer component:** Contains the details of each individual element. -When the page content has a white background, the drawer can be placed on the same level as the primary content with a divider line. Alternatively, the drawer can be elevated on top of the primary content. We recommend having a title in the drawer that relates back to the selected primary item. - +When the page content has a white background, the drawer can be placed on the same level as the primary content with a divider line. Alternatively, the drawer can be elevated on top of the primary content. We recommend having a title in the drawer that relates back to the selected primary item. + **Common primary components:** - [Data list](/components/data-list)* -- [Data table](/components/table)* +- [Data table](/components/table)* - [Card view](/components/card)* - [Simple list](/components/simple-list)/[light nav](/components/navigation/react-demos/#legacylight-nav) - -*Any of the above may have associated toolbars. A toolbar can be placed in the card header of a component in the primary, but it may need to be placed in a page header if there is a card view or if there is the ability to switch between views (and/or toggle open and close the details drawer). - + +*Any of the above may have associated toolbars. A toolbar can be placed in the card header of a component in the primary, but it may need to be placed in a page header if there is a card view or if there is the ability to switch between views (and/or toggle open and close the details drawer). + **Common detail components:** - Markdown text form or [code editor](/components/code-editor) - [Description list](/components/description-list) - [Charts or graphs](/charts/about) - [Input forms](/components/input-group) - [Text](/components/text) - + ## Usage Use a primary-detail layout when viewing details from an item in a large list or group on the same page. A primary-detail layout is useful for navigating back and forth through a list and making edits in the details of each list item, without losing context of the larger list. Primary-detail layouts look best on wider screens, but they can be responsive, too. ### Characteristics -PatternFly supports a side-by-side view of a primary element on the left and a detail element on the right. The component in the primary pane is used to control the information shown in the details pane. - +PatternFly supports a side-by-side view of a primary element on the left and a detail element on the right. The component in the primary pane is used to control the information shown in the details pane. + Image showing primary-detail component in card view - + Primary-detail containers can begin below a page header. The width of the primary and detail panes can vary based on the amount and type of content they display. Typically the panes are in halves, thirds, or quarters of the view port. The height of the details pane is 100% of the primary container. - -A primary-detail layout usually takes up the full page, but it can be placed in a card for certain use cases. We suggest placing a primary-detail layout in a card when you’re using a simple navigation or data list and the details pane is always open. A drop shadow on the details pane is not recommended in this view. - -Image showing primary-detail component in card data list - + +A primary-detail layout usually takes up the full page, but it can be placed in a card for certain use cases. We suggest placing a primary-detail layout in a card when you’re using a simple navigation or data list and the details pane is always open. A drop shadow on the details pane is not recommended in this view. + +Image showing primary-detail component in card data list + ## Behavior -The primary-detail component functions by the user selecting an item from the primary component on the left which opens a detail component on the right. The user can dismiss the detail component and/or select another item from the primary component to switch views of the detail component. +The primary-detail component functions by the user selecting an item from the primary component on the left which opens a detail component on the right. The user can dismiss the detail component and/or select another item from the primary component to switch views of the detail component. ### Responsive behavior -The mobile behavior of the interaction will generally mirror the desktop behavior. Mobile views will only show 1 component at a time, either the primary component or the detail component. Upon selecting an item from the primary component, the detail component will slide in from the right and will overlay the primary component, taking the whole width of the viewport. The primary component’s title will remain constant as the header with clear navigation back to the primary component. The detail component will also be dismissable and will slide out to the right upon closing, revealing just the primary component. The viewport will switch to mobile view at a defined breakpoint, usually when it drops below 2x (which is the typical mobile width). - -Image showing primary-detail component mobile behavior in card view - +The mobile behavior of the interaction will generally mirror the desktop behavior. Mobile views will only show 1 component at a time, either the primary component or the detail component. Upon selecting an item from the primary component, the detail component will slide in from the right and will overlay the primary component, taking the whole width of the viewport. The primary component’s title will remain constant as the header with clear navigation back to the primary component. The detail component will also be dismissable and will slide out to the right upon closing, revealing just the primary component. The viewport will switch to mobile view at a defined breakpoint, usually when it drops below 2x (which is the typical mobile width). + +Image showing primary-detail component mobile behavior in card view + In cases where the detail component in desktop view is non-dismissible and active at all times, the detail component becomes dismissible when switching to mobile view, and behaves as described above. - -Image showing primary-detail component mobile behavior in non-dismissable list view - + +Image showing primary-detail component mobile behavior in non-dismissable list view + ## Variations - + ### Selectable rows Row selection differs from bulk/checkbox selection, and both selection types operate independent of each other. - + When checkbox select and row select are both available in a primary-detail layout, the details pane will populate an empty state and guide users to either make an action in the toolbar or clear the selected checkboxes to return to the selected row’s detail view. This empty state should show to alleviate confusion for the different select states when both are present in a table. - -Image showing primary-detail component with multi-select items - + +Image showing primary-detail component with multi-select items + Here are some other best practices to keep in mind: - There needs to be a **selected** state for the primary item (row or card) currently populating the details pane. - If the details pane isn’t auto expanded, there needs to be an affordance to open an item in the primary pane (such as a view details button or a hover/selectable row states) or in a toolbar (such as an icon to toggle open/close the details pane). - If the details pane can be toggled close, there needs to be a close icon in the top-right of the details pane. Users may also toggle open/close in a toolbar. - + For [empty states](/components/empty-state), if the details pane is automatically expanded on default but a primary item is not selected by default, then there should be an empty state in the details pane directing users to make a selection in the primary. In cases where there is bulk select capability in the primary component, an expanded details drawer should display an empty state informing users that multiple items have been selected. To view details of a single primary item, the user must clear their selection. ### Splitter in a primary-detail diff --git a/packages/v4/patternfly-docs/patternfly-docs.config.js b/packages/v4/patternfly-docs/patternfly-docs.config.js index c6e6cb9e65..b3448a1e26 100644 --- a/packages/v4/patternfly-docs/patternfly-docs.config.js +++ b/packages/v4/patternfly-docs/patternfly-docs.config.js @@ -22,12 +22,11 @@ module.exports = { { section: 'guidelines' }, { section: 'UX writing' }, { section: 'components' }, + { section: 'patterns' }, { section: 'extensions' }, { section: 'charts' }, - { section: 'demos' }, { section: 'layouts' }, { section: 'utilities' }, - { section: 'patterns'}, { section: 'contribute' }, { section: 'training' }, { href: '/community' } diff --git a/packages/v4/patternfly-docs/patternfly-docs.source.js b/packages/v4/patternfly-docs/patternfly-docs.source.js index fbd425b071..ce2ba81a96 100644 --- a/packages/v4/patternfly-docs/patternfly-docs.source.js +++ b/packages/v4/patternfly-docs/patternfly-docs.source.js @@ -10,7 +10,6 @@ module.exports = (sourceMD, sourceProps) => { sourceMD(path.join(contentBase, 'design-guidelines/**/*.md'), 'design-guidelines'); sourceMD(path.join(contentBase, 'training/**/*.md'), 'training'); sourceMD(path.join(contentBase, 'extensions/**/*.md'), 'extensions'); - sourceMD(path.join(contentBase, 'patterns/**/*.md'), 'patterns'); // Theme pages const themePagesPath = require From 77d8bfa8a0c5b01bc10cd8e86d6cb5f32f99615c Mon Sep 17 00:00:00 2001 From: Matt Carrano Date: Tue, 1 Nov 2022 10:42:42 -0400 Subject: [PATCH 4/4] Change "Guidelines" to "Design Foundations" --- .../content/design-guidelines/styles/colors/colors.md | 4 ++-- .../content/design-guidelines/styles/icons/icons.md | 2 +- .../content/design-guidelines/styles/spacers/spacers.md | 2 +- .../content/design-guidelines/styles/typography/typography.md | 2 +- .../usage-and-behavior/usage-and-behavior.md | 2 +- packages/v4/patternfly-docs/patternfly-docs.config.js | 2 +- 6 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/v4/patternfly-docs/content/design-guidelines/styles/colors/colors.md b/packages/v4/patternfly-docs/content/design-guidelines/styles/colors/colors.md index 68dd3dbbb5..70433b29e7 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/styles/colors/colors.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/styles/colors/colors.md @@ -1,6 +1,6 @@ --- id: Colors -section: guidelines +section: design-foundations --- import { Alert, Grid, GridItem, Divider } from '@patternfly/react-core'; import { ColorSwatch } from './ColorSwatch'; @@ -230,4 +230,4 @@ Our palettes are created as a system designed to reinforce application content a - \ No newline at end of file + diff --git a/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icons.md b/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icons.md index fb1fad28ee..8da1d1b5df 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icons.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icons.md @@ -1,6 +1,6 @@ --- id: Icons -section: guidelines +section: design-foundations --- import { Card, CardBody, Divider, Flex, FlexItem, Grid, GridItem } from '@patternfly/react-core'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; diff --git a/packages/v4/patternfly-docs/content/design-guidelines/styles/spacers/spacers.md b/packages/v4/patternfly-docs/content/design-guidelines/styles/spacers/spacers.md index cec167f2ea..67264bc9f6 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/styles/spacers/spacers.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/styles/spacers/spacers.md @@ -1,6 +1,6 @@ --- id: Spacers -section: guidelines +section: design-foundations --- import './spacers.css'; diff --git a/packages/v4/patternfly-docs/content/design-guidelines/styles/typography/typography.md b/packages/v4/patternfly-docs/content/design-guidelines/styles/typography/typography.md index f6fa037501..5a079eb52e 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/styles/typography/typography.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/styles/typography/typography.md @@ -1,6 +1,6 @@ --- id: Typography -section: guidelines +section: design-foundations --- import { Button, Grid, GridItem } from '@patternfly/react-core'; diff --git a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/usage-and-behavior.md b/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/usage-and-behavior.md index 85577596dc..c8d31fa6f2 100644 --- a/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/usage-and-behavior.md +++ b/packages/v4/patternfly-docs/content/design-guidelines/usage-and-behavior/usage-and-behavior.md @@ -1,6 +1,6 @@ --- id: Usage and behavior -section: guidelines +section: design-foundations --- As you design with PatternFly, you might encounter common use cases where multiple components apply. This page gives advice for which component to use in these situations and shares where to find more detailed usage guidelines. diff --git a/packages/v4/patternfly-docs/patternfly-docs.config.js b/packages/v4/patternfly-docs/patternfly-docs.config.js index b3448a1e26..d701ee1f12 100644 --- a/packages/v4/patternfly-docs/patternfly-docs.config.js +++ b/packages/v4/patternfly-docs/patternfly-docs.config.js @@ -19,7 +19,7 @@ module.exports = { { section: 'get-started' }, { section: 'developer-resources' }, { section: 'accessibility' }, - { section: 'guidelines' }, + { section: 'design-foundations' }, { section: 'UX writing' }, { section: 'components' }, { section: 'patterns' },