Updated the section drag and drop (#514)

Signed-off-by: AbhishekReddy1127 <nallamsa@amazon.com> Co-authored-by: Sean Neumann <1413295+seanneumann@users.noreply.github.com>
opensearch-project · Feb 27, 2023 · 6b51615 · 6b51615
1 parent 62197c9
commit 6b51615
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 49 deletions.
diff --git a/src-docs/src/components/guide_page/guide_page.js b/src-docs/src/components/guide_page/guide_page.js
@@ -24,6 +24,7 @@ const GuidePageComponent = ({
   title,
   intro,
   isBeta,
+  isExperimental,
   playground,
   guidelines,
   location,
@@ -32,10 +33,16 @@ const GuidePageComponent = ({
 }) => {
   const betaBadge = isBeta ? (
     <OuiBetaBadge
-      label="Experimental"
+      label="Beta"
       tooltipContent="This component is still under development and may contain breaking changes in the nearby future."
     />
   ) : undefined;
+  const experimentalBadge = isExperimental ? (
+    <OuiBetaBadge
+      label="Experimental"
+      tooltipContent="This module is not GA. Please help us by reporting any bugs."
+    />
+  ) : undefined;
 
   const tabs = [
     {
@@ -95,7 +102,7 @@ const GuidePageComponent = ({
         restrictWidth
         pageTitle={
           <>
-            {title} {betaBadge}
+            {title} {betaBadge || experimentalBadge}
           </>
         }
         tabs={renderTabs()}>
@@ -131,6 +138,7 @@ GuidePageComponent.propTypes = {
   intro: PropTypes.node,
   componentLinkTo: PropTypes.string,
   isBeta: PropTypes.bool,
+  isExperimental: PropTypes.bool,
   playground: PropTypes.node,
   guidelines: PropTypes.node,
   location: PropTypes.object,

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -255,6 +255,7 @@ const createExample = (example, customTitle) => {
     intro,
     sections,
     beta,
+    isExperimental,
     isNew,
     playground,
     guidelines,
@@ -286,6 +287,7 @@ const createExample = (example, customTitle) => {
         title={title}
         intro={intro}
         isBeta={beta}
+        isExperimental={isExperimental}
         playground={playgroundComponent}
         guidelines={guidelines}>
         {renderedSections}

diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js
@@ -57,57 +57,72 @@ const dragAndDropComplexHtml = renderToHtml(DragAndDropComplex);
 
 export const DragAndDropExample = {
   title: 'Drag and drop',
-  beta: true,
-  intro: (
-    <React.Fragment>
-      <OuiText>
-        <p>
-          An extension of{' '}
-          <OuiLink href="https://github.com/atlassian/react-beautiful-dnd">
-            react-beautiful-dnd
-          </OuiLink>{' '}
-          with a compatible API and built-in style opinions. Functionality
-          results from 3 components working together:
-        </p>
-        <ul>
-          <li>
-            <OuiCode>{'<OuiDragDropContext />'}</OuiCode>: Section of your
-            application containing the draggable elements and the drop targets.
-          </li>
-          <li>
-            <OuiCode>{'<OuiDroppable />'}</OuiCode>: Area into which items can
-            be dropped. Contains one or more{' '}
-            <OuiCode>{'<OuiDraggable />'}</OuiCode>.
-          </li>
-          <li>
-            <OuiCode>{'<OuiDraggable />'}</OuiCode>: Items that can be dragged.
-            Must be part of an <OuiCode>{'<OuiDroppable />'}</OuiCode>
-          </li>
-        </ul>
-      </OuiText>
+  isExperimental: true,
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: dragAndDropBareSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: dragAndDropBareHtml,
+        },
+      ],
+      text: (
+        <React.Fragment>
+          <OuiText>
+            <p>
+              An extension of{' '}
+              <OuiLink href="https://github.com/atlassian/react-beautiful-dnd">
+                react-beautiful-dnd
+              </OuiLink>{' '}
+              with a compatible API and built-in style opinions. Functionality
+              results from 3 components working together:
+            </p>
+            <ul>
+              <li>
+                <OuiCode>{'<OuiDragDropContext />'}</OuiCode>: Section of your
+                application containing the draggable elements and the drop
+                targets.
+              </li>
+              <li>
+                <OuiCode>{'<OuiDroppable />'}</OuiCode>: Area into which items
+                can be dropped. Contains one or more{' '}
+                <OuiCode>{'<OuiDraggable />'}</OuiCode>.
+              </li>
+              <li>
+                <OuiCode>{'<OuiDraggable />'}</OuiCode>: Items that can be
+                dragged. Must be part of an{' '}
+                <OuiCode>{'<OuiDroppable />'}</OuiCode>
+              </li>
+            </ul>
+          </OuiText>
 
-      <OuiSpacer />
+          <OuiSpacer />
 
-      <OuiCallOut title="Consider your users, use case" color="warning">
-        <p>
-          Drag and drop interfaces are not well-adapted to many cases, and may
-          be less suitable than other form types for data operations. For
-          instance, drag and drop interaction relies heavily on spatial
-          orientation that may not be entirelty valid to all users (e.g., screen
-          readers as the sole source of information). Similarly, users
-          navigating by keyboard may not be afforded nuanced, dual-axis drag
-          item manipulation.
-        </p>
-        <p>
-          {`OUI (largely due to the great work already in react-beautiful-dnd) has and will continue to ensure accessibility where possible.
+          <OuiCallOut title="Consider your users, use case" color="warning">
+            <p>
+              Drag and drop interfaces are not well-adapted to many cases, and
+              may be less suitable than other form types for data operations.
+              For instance, drag and drop interaction relies heavily on spatial
+              orientation that may not be entirelty valid to all users (e.g.,
+              screen readers as the sole source of information). Similarly,
+              users navigating by keyboard may not be afforded nuanced,
+              dual-axis drag item manipulation.
+            </p>
+            <p>
+              {`OUI (largely due to the great work already in react-beautiful-dnd) has and will continue to ensure accessibility where possible.
           With that in mind, keep your users' working context in mind.`}
-        </p>
-      </OuiCallOut>
-    </React.Fragment>
-  ),
-  sections: [
+            </p>
+          </OuiCallOut>
+        </React.Fragment>
+      ),
+      props: { OuiDragDropContext, OuiDraggable, OuiDroppable },
+      demo: <DragAndDropBare />,
+    },
     {
-      title: 'Just the facts',
       source: [
         {
           type: GuideSectionTypes.JS,