chore: align design for show more toggle as per discussion

mongodb-js · Jul 12, 2024 · 9fa0542 · 9fa0542
1 parent 1c53976
commit 9fa0542
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 31 deletions.
diff --git a/packages/compass-components/src/components/document-list/document.spec.tsx b/packages/compass-components/src/components/document-list/document.spec.tsx
@@ -296,5 +296,6 @@ describe('Document', function () {
       expect(() => screen.getByText('prop3')).to.throw;
       expect(() => screen.getByText('prop4')).to.throw;
     });
+    expect(screen.getByText('Show 2 more fields in nested')).to.exist;
   });
 });
diff --git a/packages/compass-components/src/components/document-list/document.tsx b/packages/compass-components/src/components/document-list/document.tsx
@@ -13,7 +13,7 @@ import { AutoFocusContext } from './auto-focus-context';
 import { useForceUpdate } from './use-force-update';
 import { HadronElement } from './element';
 import { usePrevious } from './use-previous';
-import DocumentFieldsToggleGroup from './document-fields-toggle-group';
+import VisibleFieldsToggle from './visible-field-toggle';
 import { documentTypography } from './typography';
 
 function useHadronDocument(doc: HadronDocumentType) {
@@ -140,7 +140,7 @@ const HadronDocument: React.FunctionComponent<{
           })}
         </AutoFocusContext.Provider>
       </div>
-      <DocumentFieldsToggleGroup
+      <VisibleFieldsToggle
         // TODO: "Hide items" button will only be shown when document is not
         // edited because it's not decided how to handle changes to the fields
         // that are changed but then hidden
@@ -153,7 +153,7 @@ const HadronDocument: React.FunctionComponent<{
         // historically Compass was doing this for "performance" reasons
         step={editing ? 100 : 1000}
         onSizeChange={handleVisibleFieldsChanged}
-      ></DocumentFieldsToggleGroup>
+      ></VisibleFieldsToggle>
     </div>
   );
 };

diff --git a/packages/compass-components/src/components/document-list/element.tsx b/packages/compass-components/src/components/document-list/element.tsx
@@ -27,7 +27,7 @@ import { css, cx } from '@leafygreen-ui/emotion';
 import { palette } from '@leafygreen-ui/palette';
 import { Icon } from '../leafygreen';
 import { useDarkMode } from '../../hooks/use-theme';
-import DocumentFieldsToggleGroup from './document-fields-toggle-group';
+import VisibleFieldsToggle from './visible-field-toggle';
 
 function getEditorByType(type: HadronElementType['type']) {
   switch (type) {
@@ -687,7 +687,8 @@ export const HadronElement: React.FunctionComponent<{
               ></HadronElement>
             );
           })}
-          <DocumentFieldsToggleGroup
+          <VisibleFieldsToggle
+            parentFieldName={key.value}
             // TODO: (Same as that for Document) "Hide items" button will only
             // be shown when document is not edited because it's not decided how
             // to handle changes to the fields that are changed but then hidden
@@ -703,9 +704,10 @@ export const HadronElement: React.FunctionComponent<{
             onSizeChange={handleVisibleElementsChanged}
             style={{
               paddingLeft: nestedElementsVisibilityToggleOffset,
-              paddingTop: spacing[200],
+              paddingTop: spacing[100],
+              paddingBottom: spacing[100],
             }}
-          ></DocumentFieldsToggleGroup>
+          ></VisibleFieldsToggle>
         </>
       )}
     </>

diff --git a/packages/compass-components/src/components/document-list/index.ts b/packages/compass-components/src/components/document-list/index.ts
@@ -1,4 +1,4 @@
 export { default as DocumentActionsGroup } from './document-actions-group';
-export { default as DocumentFieldsToggleGroup } from './document-fields-toggle-group';
+export { default as VisibleFieldsToggle } from './visible-field-toggle';
 export { default as Document } from './document';
 export { default as DocumentEditActionsFooter } from './document-edit-actions-footer';
diff --git a/...ent-list/document-fields-toggle-group.tsx → ...ts/document-list/visible-field-toggle.tsx b/...ent-list/document-fields-toggle-group.tsx → ...ts/document-list/visible-field-toggle.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
-import { Button, Icon } from '../leafygreen';
+import { Icon, Link } from '../leafygreen';
+import { documentTypography } from './typography';
 
 const container = css({
   display: 'flex',
@@ -11,12 +12,24 @@ const container = css({
   paddingRight: spacing[3],
 });
 
-const button = css({
-  flex: 'none',
+const linkButtonStyles = css({
+  border: 'none',
+  background: 'none',
+  padding: 0,
+  fontFamily: documentTypography.fontFamily,
+  fontSize: `${documentTypography.fontSize}px`,
+  lineHeight: `${documentTypography.lineHeight}px`,
+  '& > span': {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: spacing[100],
+  },
 });
 
-const DocumentFieldsToggleGroup: React.FunctionComponent<{
+const VisibleFieldsToggle: React.FunctionComponent<{
   showHideButton?: boolean;
+  buttonClassName?: string;
+  parentFieldName?: string;
   currentSize: number;
   totalSize: number;
   minSize?: number;
@@ -25,6 +38,8 @@ const DocumentFieldsToggleGroup: React.FunctionComponent<{
   onSizeChange(newSize: number): void;
 }> = ({
   showHideButton = true,
+  buttonClassName,
+  parentFieldName,
   currentSize,
   totalSize,
   minSize = 25,
@@ -60,32 +75,41 @@ const DocumentFieldsToggleGroup: React.FunctionComponent<{
     return null;
   }
 
+  const showButtonText = `Show ${showSizeDiff} more ${
+    showSizeDiff === 1 ? 'field' : 'fields'
+  }${parentFieldName ? ` in ${parentFieldName}` : ''}`;
+  const hideButtonText = `Hide ${hideSizeDiff} ${
+    hideSizeDiff === 1 ? 'field' : 'fields'
+  }${parentFieldName ? ` in ${parentFieldName}` : ''}`;
+
   return (
     <div className={container} style={style}>
       {isShowButtonVisible && (
-        <Button
-          size="xsmall"
-          leftGlyph={<Icon glyph="ArrowDown"></Icon>}
+        <Link
+          as="button"
+          hideExternalIcon={true}
+          className={cx(linkButtonStyles, buttonClassName)}
           onClick={onShowClick}
-          className={button}
-          data-testid="show-more-fields-button"
+          aria-label={showButtonText}
         >
-          Show {showSizeDiff} more fields
-        </Button>
+          <Icon size="xsmall" glyph="ArrowDown"></Icon>
+          {showButtonText}
+        </Link>
       )}
       {isHideButtonVisible && (
-        <Button
-          size="xsmall"
-          leftGlyph={<Icon glyph="ArrowUp"></Icon>}
+        <Link
+          as="button"
+          hideExternalIcon={true}
+          className={cx(linkButtonStyles, buttonClassName)}
           onClick={onHideClick}
-          className={button}
-          data-testid="hide-fields-button"
+          aria-label={hideButtonText}
         >
-          Hide {hideSizeDiff} fields
-        </Button>
+          <Icon size="xsmall" glyph="ArrowUp"></Icon>
+          {hideButtonText}
+        </Link>
       )}
     </div>
   );
 };
 
-export default DocumentFieldsToggleGroup;
+export default VisibleFieldsToggle;
diff --git a/...ist/document-fields-toggle-group.spec.tsx → ...ument-list/visible-fields-toggle.spec.tsx b/...ist/document-fields-toggle-group.spec.tsx → ...ument-list/visible-fields-toggle.spec.tsx
@@ -2,28 +2,37 @@ import React, { useState } from 'react';
 import { expect } from 'chai';
 import { cleanup, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import DocumentFieldsToggleGroup from './document-fields-toggle-group';
+import VisibleFieldsToggle from './visible-field-toggle';
 
 function TestComponent({
   initialSize = 10,
   showHideButton = true,
   totalSize = Infinity,
   minSize = 10,
   step = 10,
+  parentFieldName,
+}: {
+  initialSize?: number;
+  showHideButton?: boolean;
+  totalSize?: number;
+  minSize?: number;
+  step?: number;
+  parentFieldName?: string;
 }) {
   const [size, setSize] = useState(initialSize);
 
   return (
     <div>
       <div>Showing {size} items</div>
-      <DocumentFieldsToggleGroup
+      <VisibleFieldsToggle
         currentSize={size}
         showHideButton={showHideButton}
         totalSize={totalSize}
         minSize={minSize}
         step={step}
         onSizeChange={setSize}
-      ></DocumentFieldsToggleGroup>
+        parentFieldName={parentFieldName}
+      ></VisibleFieldsToggle>
     </div>
   );
 }
@@ -41,6 +50,17 @@ describe('DocumentFieldsToggleGroup', function () {
     expect(screen.getByText('Hide 10 fields')).to.exist;
   });
 
+  it('should include parentFieldName in the label when provided', function () {
+    render(
+      <TestComponent
+        initialSize={10}
+        minSize={0}
+        parentFieldName="reviews"
+      ></TestComponent>
+    );
+    expect(screen.getByText('Hide 10 fields in reviews')).to.exist;
+  });
+
   it('should show more items when "Show items" is clicked', function () {
     render(<TestComponent></TestComponent>);
     expect(screen.getByText('Showing 10 items')).to.exist;