diff --git a/research/src/images/antd-space-alignment.png b/research/src/images/antd-space-alignment.png new file mode 100644 index 000000000..e7620ccd3 Binary files /dev/null and b/research/src/images/antd-space-alignment.png differ diff --git a/research/src/images/antd-space-basic.png b/research/src/images/antd-space-basic.png new file mode 100644 index 000000000..764d39b37 Binary files /dev/null and b/research/src/images/antd-space-basic.png differ diff --git a/research/src/images/antd-space-custom-spacing.gif b/research/src/images/antd-space-custom-spacing.gif new file mode 100644 index 000000000..0c56846fe Binary files /dev/null and b/research/src/images/antd-space-custom-spacing.gif differ diff --git a/research/src/images/antd-space-direction-horizontal.png b/research/src/images/antd-space-direction-horizontal.png new file mode 100644 index 000000000..e7fd78b75 Binary files /dev/null and b/research/src/images/antd-space-direction-horizontal.png differ diff --git a/research/src/images/antd-space-direction-vertical.png b/research/src/images/antd-space-direction-vertical.png new file mode 100644 index 000000000..5e81466c1 Binary files /dev/null and b/research/src/images/antd-space-direction-vertical.png differ diff --git a/research/src/images/antd-space-spacing.gif b/research/src/images/antd-space-spacing.gif new file mode 100644 index 000000000..719d0d3a9 Binary files /dev/null and b/research/src/images/antd-space-spacing.gif differ diff --git a/research/src/images/antd-space-split.png b/research/src/images/antd-space-split.png new file mode 100644 index 000000000..6813f5ac4 Binary files /dev/null and b/research/src/images/antd-space-split.png differ diff --git a/research/src/images/antd-space-wrapping.png b/research/src/images/antd-space-wrapping.png new file mode 100644 index 000000000..6852b4bef Binary files /dev/null and b/research/src/images/antd-space-wrapping.png differ diff --git a/research/src/images/atlaskit-page-basic.png b/research/src/images/atlaskit-page-basic.png new file mode 100644 index 000000000..c8db08a7a Binary files /dev/null and b/research/src/images/atlaskit-page-basic.png differ diff --git a/research/src/images/atlaskit-page-layout.png b/research/src/images/atlaskit-page-layout.png new file mode 100644 index 000000000..e24c6e969 Binary files /dev/null and b/research/src/images/atlaskit-page-layout.png differ diff --git a/research/src/images/atlaskit-page-spacing.png b/research/src/images/atlaskit-page-spacing.png new file mode 100644 index 000000000..0d1371145 Binary files /dev/null and b/research/src/images/atlaskit-page-spacing.png differ diff --git a/research/src/images/auth0-stack-layout-basic.png b/research/src/images/auth0-stack-layout-basic.png new file mode 100644 index 000000000..a14869c82 Binary files /dev/null and b/research/src/images/auth0-stack-layout-basic.png differ diff --git a/research/src/images/bootstrap-flex-align.png b/research/src/images/bootstrap-flex-align.png new file mode 100644 index 000000000..a95ca3c89 Binary files /dev/null and b/research/src/images/bootstrap-flex-align.png differ diff --git a/research/src/images/bootstrap-flex-basic.png b/research/src/images/bootstrap-flex-basic.png new file mode 100644 index 000000000..429854e77 Binary files /dev/null and b/research/src/images/bootstrap-flex-basic.png differ diff --git a/research/src/images/bootstrap-flex-direction-horizontal.png b/research/src/images/bootstrap-flex-direction-horizontal.png new file mode 100644 index 000000000..eed0d24f2 Binary files /dev/null and b/research/src/images/bootstrap-flex-direction-horizontal.png differ diff --git a/research/src/images/bootstrap-flex-direction-vertical.png b/research/src/images/bootstrap-flex-direction-vertical.png new file mode 100644 index 000000000..840a3cf64 Binary files /dev/null and b/research/src/images/bootstrap-flex-direction-vertical.png differ diff --git a/research/src/images/bootstrap-flex-grow.png b/research/src/images/bootstrap-flex-grow.png new file mode 100644 index 000000000..898d28139 Binary files /dev/null and b/research/src/images/bootstrap-flex-grow.png differ diff --git a/research/src/images/bootstrap-flex-justify.png b/research/src/images/bootstrap-flex-justify.png new file mode 100644 index 000000000..75450c452 Binary files /dev/null and b/research/src/images/bootstrap-flex-justify.png differ diff --git a/research/src/images/bootstrap-flex-order.png b/research/src/images/bootstrap-flex-order.png new file mode 100644 index 000000000..eaf9fe068 Binary files /dev/null and b/research/src/images/bootstrap-flex-order.png differ diff --git a/research/src/images/bootstrap-flex-shrink.png b/research/src/images/bootstrap-flex-shrink.png new file mode 100644 index 000000000..de696373a Binary files /dev/null and b/research/src/images/bootstrap-flex-shrink.png differ diff --git a/research/src/images/bootstrap-flex-wrap.png b/research/src/images/bootstrap-flex-wrap.png new file mode 100644 index 000000000..25b84b24f Binary files /dev/null and b/research/src/images/bootstrap-flex-wrap.png differ diff --git a/research/src/images/evergreen-pane-align.png b/research/src/images/evergreen-pane-align.png new file mode 100644 index 000000000..516ebf4e9 Binary files /dev/null and b/research/src/images/evergreen-pane-align.png differ diff --git a/research/src/images/evergreen-pane-basic.png b/research/src/images/evergreen-pane-basic.png new file mode 100644 index 000000000..8e5ee2589 Binary files /dev/null and b/research/src/images/evergreen-pane-basic.png differ diff --git a/research/src/images/evergreen-pane-border-colors.png b/research/src/images/evergreen-pane-border-colors.png new file mode 100644 index 000000000..ae9e29979 Binary files /dev/null and b/research/src/images/evergreen-pane-border-colors.png differ diff --git a/research/src/images/evergreen-pane-borders.png b/research/src/images/evergreen-pane-borders.png new file mode 100644 index 000000000..5b1bd4cc1 Binary files /dev/null and b/research/src/images/evergreen-pane-borders.png differ diff --git a/research/src/images/evergreen-pane-colors.png b/research/src/images/evergreen-pane-colors.png new file mode 100644 index 000000000..5aadf06a4 Binary files /dev/null and b/research/src/images/evergreen-pane-colors.png differ diff --git a/research/src/images/evergreen-pane-elevation.png b/research/src/images/evergreen-pane-elevation.png new file mode 100644 index 000000000..d8db8d63e Binary files /dev/null and b/research/src/images/evergreen-pane-elevation.png differ diff --git a/research/src/images/fabric-stack-align.png b/research/src/images/fabric-stack-align.png new file mode 100644 index 000000000..f5d548d79 Binary files /dev/null and b/research/src/images/fabric-stack-align.png differ diff --git a/research/src/images/fabric-stack-basic.png b/research/src/images/fabric-stack-basic.png new file mode 100644 index 000000000..eef8a4b5f Binary files /dev/null and b/research/src/images/fabric-stack-basic.png differ diff --git a/research/src/images/fabric-stack-grow.png b/research/src/images/fabric-stack-grow.png new file mode 100644 index 000000000..0bef1f328 Binary files /dev/null and b/research/src/images/fabric-stack-grow.png differ diff --git a/research/src/images/fabric-stack-horizontal.png b/research/src/images/fabric-stack-horizontal.png new file mode 100644 index 000000000..ccfbacd1c Binary files /dev/null and b/research/src/images/fabric-stack-horizontal.png differ diff --git a/research/src/images/fabric-stack-order.png b/research/src/images/fabric-stack-order.png new file mode 100644 index 000000000..cbde524d5 Binary files /dev/null and b/research/src/images/fabric-stack-order.png differ diff --git a/research/src/images/fabric-stack-shrink.gif b/research/src/images/fabric-stack-shrink.gif new file mode 100644 index 000000000..3e552e3c1 Binary files /dev/null and b/research/src/images/fabric-stack-shrink.gif differ diff --git a/research/src/images/fabric-stack-space.png b/research/src/images/fabric-stack-space.png new file mode 100644 index 000000000..1a2336587 Binary files /dev/null and b/research/src/images/fabric-stack-space.png differ diff --git a/research/src/images/fabric-stack-wrap.png b/research/src/images/fabric-stack-wrap.png new file mode 100644 index 000000000..5282dfd03 Binary files /dev/null and b/research/src/images/fabric-stack-wrap.png differ diff --git a/research/src/images/primer-flex-basic.png b/research/src/images/primer-flex-basic.png new file mode 100644 index 000000000..670771d8b Binary files /dev/null and b/research/src/images/primer-flex-basic.png differ diff --git a/research/src/images/stardust-flex-align.png b/research/src/images/stardust-flex-align.png new file mode 100644 index 000000000..bd5853d8e Binary files /dev/null and b/research/src/images/stardust-flex-align.png differ diff --git a/research/src/images/stardust-flex-basic.png b/research/src/images/stardust-flex-basic.png new file mode 100644 index 000000000..baec7967c Binary files /dev/null and b/research/src/images/stardust-flex-basic.png differ diff --git a/research/src/images/stardust-flex-mixed-align.png b/research/src/images/stardust-flex-mixed-align.png new file mode 100644 index 000000000..1e55c44c1 Binary files /dev/null and b/research/src/images/stardust-flex-mixed-align.png differ diff --git a/research/src/pages/flex.research.mdx b/research/src/pages/flex.research.mdx new file mode 100644 index 000000000..df6f2bc35 --- /dev/null +++ b/research/src/pages/flex.research.mdx @@ -0,0 +1,19 @@ +--- +menu: Analysis +name: Flex +path: /components/flex.research +--- + +import Anatomy from '../components/anatomy' +import Concepts from '../components/concepts' +import ComponentCoverage from '../components/component-coverage' + + + +## Anatomy + + + +## Concepts + + diff --git a/research/src/sources/antd.json5 b/research/src/sources/antd.json5 index 12d715d6b..95a66943f 100644 --- a/research/src/sources/antd.json5 +++ b/research/src/sources/antd.json5 @@ -835,7 +835,7 @@ "name": "color", "description": "Avatar can have custom colors and background colors", "image": "antd-avatar-letter.png" - }, + } ] }, { @@ -1209,6 +1209,20 @@ "name": "Divider", "url": "https://ant.design/components/divider" }, + { + "name": "Space", + "openUIName": "Flex", + "definition": "Set components spacing.", + "url": "https://ant.design/components/space/", + "concepts": [ + { "name": "basic", "category": "type", "image": "antd-space-basic.png" }, + { "name": "direction", "category": "type", "image": "antd-space-direction-horizontal.png" }, + { "name": "direction", "category": "type", "image": "antd-space-direction-vertical.png" }, + { "name": "spacing", "category": "type", "image": "antd-space-spacing.gif" }, + { "name": "spacing", "category": "type", "image": "antd-space-custom-spacing.gif" }, + { "name": "wrapping", "category": "type", "image": "antd-space-wrapping.png" } + ] + }, { "name": "LocaleProvider (Deprecated)", "url": "https://ant.design/components/locale-provider" diff --git a/research/src/sources/atlassian.json5 b/research/src/sources/atlassian.json5 index 05dceb288..d23b57667 100644 --- a/research/src/sources/atlassian.json5 +++ b/research/src/sources/atlassian.json5 @@ -48,7 +48,7 @@ "openUIName": "badge", "description": "An icon that displays the avatar's status.", "image": "atlaskit-avatar-status.png" - }, + } ] }, { @@ -658,6 +658,27 @@ { "name": "Width detector", "url": "https://atlaskit.atlassian.com/packages/core/width-detector" + }, + { + "name": "Page", + "openUIName": "Flex", + "definition": "A component for building page layouts.", + "url": "https://atlaskit.atlassian.com/packages/design-system/page", + "concepts": [ + { "name": "basic", "category": "type", "image": "atlaskit-page-basic.png" }, + { "name": "layout", "category": "type", "image": "atlaskit-page-layout.png" }, + { "name": "spacing", "category": "type", "image": "atlaskit-page-spacing.png" } + ] + }, + { + "name": "Grid", + "openUIName": "Flex", + "url": "https://atlaskit.atlassian.com/packages/design-system/page" + }, + { + "name": "GridColumn", + "openUIName": "Flex", + "url": "https://atlaskit.atlassian.com/packages/design-system/page" } ] } diff --git a/research/src/sources/auth0.json5 b/research/src/sources/auth0.json5 index 8ed3b00f8..614ce1594 100644 --- a/research/src/sources/auth0.json5 +++ b/research/src/sources/auth0.json5 @@ -113,6 +113,13 @@ { "name": "Phone Mockup", "url": "https://styleguide.auth0.com/components/phone-mockup" + }, + { + "name": "Stack Layout", + "openUIName": "Flex", + "definition": "The StackLayout organizes it's children into flexible horizontal row. It gives control over the way they spread, space, and align.", + "url": "https://auth0-cosmos.now.sh/#/component/stack-layout", + "concepts": [{ "name": "basic", "category": "type", "image": "auth0-stack-layout-basic.png" }] } ] } diff --git a/research/src/sources/bootstrap.json5 b/research/src/sources/bootstrap.json5 index 746082035..e20ec80a3 100644 --- a/research/src/sources/bootstrap.json5 +++ b/research/src/sources/bootstrap.json5 @@ -287,7 +287,27 @@ }, { "name": "Flex", - "url": "https://getbootstrap.com/docs/4.3/utilities/flex/" + "definition": "Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities.", + "url": "https://getbootstrap.com/docs/4.3/utilities/flex/", + "concepts": [ + { "name": "basic", "category": "type", "image": "bootstrap-flex-basic.png" }, + { + "name": "direction", + "category": "type", + "image": "bootstrap-flex-direction-horizontal.png" + }, + { + "name": "direction", + "category": "type", + "image": "bootstrap-flex-direction-vertical.png" + }, + { "name": "wrapping", "category": "type", "image": "bootstrap-flex-wrap.png" }, + { "name": "alignment", "category": "type", "image": "bootstrap-flex-align.png" }, + { "name": "justifying", "category": "type", "image": "bootstrap-flex-justify.png" }, + { "name": "order", "category": "type", "image": "bootstrap-flex-order.png" }, + { "name": "growing", "category": "type", "image": "bootstrap-flex-grow.png" }, + { "name": "shrinking", "category": "type", "image": "bootstrap-flex-shrink.png" } + ] }, { "name": "Forms", diff --git a/research/src/sources/evergreen.json5 b/research/src/sources/evergreen.json5 index 33fead998..d331faa05 100644 --- a/research/src/sources/evergreen.json5 +++ b/research/src/sources/evergreen.json5 @@ -58,7 +58,7 @@ "name": "color", "description": "The color of an avatar is automatically generated based on the name provided.", "image": "evergreen-avatar-color.png" - }, + } ] }, { @@ -332,6 +332,24 @@ "name": "Form Field", "definition": "", "url": "https://evergreen.segment.com/components/form-field/" + }, + { + "name": "Pane", + "openUIName": "Flex", + "definition": "The Pane and Card components are one of the most important components in Evergreen. They are used as primitives to construct layouts and compose components. In most cases you can use a Pane instead of a div element.", + "url": "https://evergreen.segment.com/components/layout-primitives/", + "concepts": [ + { "name": "basic", "category": "type", "image": "evergreen-pane-basic.png" }, + { "name": "alignment", "category": "type", "image": "evergreen-pane-align.png" }, + { "name": "colors", "category": "type", "image": "evergreen-pane-colors.png" }, + { "name": "borders", "category": "type", "image": "evergreen-pane-borders.png" }, + { + "name": "border colors", + "category": "type", + "image": "evergreen-pane-border-colors.png" + }, + { "name": "elevation", "category": "type", "image": "evergreen-pane-elevation.png" } + ] } ] } diff --git a/research/src/sources/fabric.json5 b/research/src/sources/fabric.json5 index a98dd1c30..bfbc63fc8 100644 --- a/research/src/sources/fabric.json5 +++ b/research/src/sources/fabric.json5 @@ -357,7 +357,7 @@ "name": "details", "description": "Shows full name and details", "image": "fabric-persona-details.png" - }, + } ] }, { @@ -522,7 +522,20 @@ }, { "name": "Stack", - "url": "https://developer.microsoft.com/en-us/fabric#/controls/web/stack" + "openUIName": "Flex", + "definition": "A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components.", + "url": "https://developer.microsoft.com/en-us/fabric#/controls/web/stack", + "concepts": [ + { "name": "basic", "category": "type", "image": "fabric-stack-basic.png" }, + { "name": "direction", "category": "type", "image": "fabric-stack-basic.png" }, + { "name": "direction", "category": "type", "image": "fabric-stack-horizontal.png" }, + { "name": "alignment", "category": "type", "image": "fabric-stack-align.png" }, + { "name": "growing", "category": "type", "image": "fabric-stack-grow.png" }, + { "name": "shrinking", "category": "type", "image": "fabric-stack-shrink.gif" }, + { "name": "order", "category": "type", "image": "fabric-stack-order.png" }, + { "name": "spacing", "category": "type", "image": "fabric-stack-space.png" }, + { "name": "wrapping", "category": "type", "image": "fabric-stack-wrap.png" } + ] }, { "name": "Text", diff --git a/research/src/sources/fast.json5 b/research/src/sources/fast.json5 index 2f41f592a..270abf88c 100644 --- a/research/src/sources/fast.json5 +++ b/research/src/sources/fast.json5 @@ -105,6 +105,11 @@ { "name": "Tree view", "url": "https://explore.fast.design/components/fast-tree-view" + }, + { + "name": "Data Grid", + "definition": "The data grid component enables authors to display an array of data in a tabular layout. The layout can include a header region where a title can be displayed for each column.", + "url": "https://explore.fast.design/components/fast-data-grid" } ] } diff --git a/research/src/sources/lightning.json5 b/research/src/sources/lightning.json5 index ee6f076ba..600174829 100644 --- a/research/src/sources/lightning.json5 +++ b/research/src/sources/lightning.json5 @@ -47,7 +47,7 @@ { "name": "square", "image": "lightning-avatar-square.png" - }, + } ] }, { @@ -665,6 +665,11 @@ "name": "Tooltips", "url": "https://www.lightningdesignsystem.com/components/tooltips" }, + { + "name": "Grid", + "definition": "The SLDS grid system provides a flexible, mobile-first, device-agnostic layout system. It has features to control alignment, order, flow, and gutters.", + "url": "https://www.lightningdesignsystem.com/utilities/grid/" + }, { "name": "Tree Grid", "openUIName": "Table", diff --git a/research/src/sources/materialComponentsWeb.json5 b/research/src/sources/materialComponentsWeb.json5 index 368107d35..73f74064e 100644 --- a/research/src/sources/materialComponentsWeb.json5 +++ b/research/src/sources/materialComponentsWeb.json5 @@ -305,6 +305,7 @@ }, { "name": "Layout Grid", + "definition": "Material design’s responsive UI is based on a column-variate grid layout.", "url": "https://material.io/components/web/catalog/layout-grid" }, { diff --git a/research/src/sources/primer.json5 b/research/src/sources/primer.json5 index 704842660..9f344a507 100644 --- a/research/src/sources/primer.json5 +++ b/research/src/sources/primer.json5 @@ -101,7 +101,8 @@ { "name": "Flex", "description": "Flex provides a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic", - "url": "https://primer.style/components/Flex" + "url": "https://primer.style/components/Flex", + "concepts": [{ "name": "basic", "category": "type", "image": "primer-flex-basic.png" }] }, { "name": "Avatar", @@ -120,8 +121,8 @@ "name": "AvatarPair", "openUIName": "badge", "image": "primer-avatar-pair.png" - }, + } ] - }, + } ] } diff --git a/research/src/sources/semantic.json5 b/research/src/sources/semantic.json5 index d7d582375..fc863aba5 100644 --- a/research/src/sources/semantic.json5 +++ b/research/src/sources/semantic.json5 @@ -345,6 +345,7 @@ }, { "name": "Grid", + "definition": "A grid is a structure with a long history used to align negative space in designs.", "url": "https://semantic-ui.com/collections/grid.html" }, { diff --git a/research/src/sources/spectrum.json5 b/research/src/sources/spectrum.json5 index c8f097e09..5c610ddbf 100644 --- a/research/src/sources/spectrum.json5 +++ b/research/src/sources/spectrum.json5 @@ -4,5 +4,11 @@ "description": "Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe’s applications more cohesive.", "url": "http://spectrum.adobe.com", "by": "Adobe", - "components": [] + "components": [ + { + "name": "Responsive Grid", + "definition": "A responsive grid allows a layout to change dynamically based on the size of the screen. This also guarantees consistent layouts across Adobe’s products.", + "url": "https://spectrum.adobe.com/page/responsive-grid/" + } + ] } diff --git a/research/src/sources/stardust.json5 b/research/src/sources/stardust.json5 index 7d611ab60..beac1e752 100644 --- a/research/src/sources/stardust.json5 +++ b/research/src/sources/stardust.json5 @@ -52,7 +52,7 @@ "name": "square", "description": "An Avatar can have a square shape", "image": "stardust-avatar-square.png" - }, + } ] }, { @@ -249,7 +249,12 @@ }, { "name": "Flex", - "url": "https://stardust-ui.github.io/react/components/flex" + "url": "https://stardust-ui.github.io/react/components/flex", + "concepts": [ + { "name": "basic", "category": "type", "image": "stardust-flex-basic.png" }, + { "name": "alignment", "category": "type", "image": "stardust-flex-align.png" }, + { "name": "alignment", "category": "type", "image": "stardust-flex-mixed-align.png" } + ] }, { "name": "Form",