feat(docs): fix button group issue (676) (#737)

* fix(component): fix button group issue * fix(component): update logic * fix(component): hide ellipsis when all buttons fits * fix(component): delete logic for action prop * fix(component): revert original logic * fix(component): revert original logic * fix(component): update code base on review * fix(component): delete comment * fix(component): delete space * fix(component): add test for button component * fix(component): update snapshots * fix(component): remove right prop * fix(component): remove data-testid in button test
bigcommerce · Mar 10, 2022 · 3c5da19 · 3c5da19
1 parent e52dab2
commit 3c5da19
Show file tree

Hide file tree

Showing 15 changed files with 40 additions and 56 deletions.
diff --git a/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Alert/__snapshots__/spec.tsx.snap
@@ -529,7 +529,6 @@ exports[`renders close button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c9 {

diff --git a/packages/big-design/src/components/Button/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Button/__snapshots__/spec.tsx.snap
@@ -91,7 +91,6 @@ exports[`render default button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -209,7 +208,6 @@ exports[`render destructive button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -327,7 +325,6 @@ exports[`render destructive disabled button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -446,7 +443,6 @@ exports[`render disabled button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -573,7 +569,6 @@ exports[`render icon left and right button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -734,7 +729,6 @@ exports[`render icon left button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -877,7 +871,6 @@ exports[`render icon only button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -1019,7 +1012,6 @@ exports[`render icon right button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -1366,7 +1358,6 @@ exports[`render secondary button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -1484,7 +1475,6 @@ exports[`render secondary destructive button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -1602,7 +1592,6 @@ exports[`render secondary destructive disabled button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -1721,7 +1710,6 @@ exports[`render secondary disabled button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -1841,7 +1829,6 @@ exports[`render subtle button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -1960,7 +1947,6 @@ exports[`render subtle destructive button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -2079,7 +2065,6 @@ exports[`render subtle destructive disabled button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {
@@ -2199,7 +2184,6 @@ exports[`render subtle disabled button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:720px) {

diff --git a/packages/big-design/src/components/Button/spec.tsx b/packages/big-design/src/components/Button/spec.tsx
@@ -187,3 +187,25 @@ test('render only icon only with left and right icons button', () => {
 
   expect(screen.getAllByTestId('icon-only')).toHaveLength(1);
 });
+
+test('hides content when isLoading is true', () => {
+  const plusIcon = <AddIcon role="icon" aria-hidden="false" />;
+  const { rerender } = render(
+    <Button isLoading={false} iconLeft={plusIcon}>
+      Button
+    </Button>,
+  );
+  const visibleContent = screen.getByRole('icon');
+
+  expect(visibleContent).toBeInTheDocument();
+
+  rerender(
+    <Button isLoading={true}>
+      <strong>Button</strong>
+    </Button>,
+  );
+
+  const hiddenContent = screen.queryByRole('icon');
+
+  expect(hiddenContent).not.toBeInTheDocument();
+});
diff --git a/packages/big-design/src/components/Button/styled.tsx b/packages/big-design/src/components/Button/styled.tsx
@@ -88,7 +88,12 @@ export const ContentWrapper = styled.span.attrs<Record<string, unknown>, { isLoa
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: ${({ theme }) => theme.spacing.xSmall};
-  visibility: ${({ isLoading }) => (isLoading ? 'hidden' : 'visible')};
+
+  ${({ isLoading }) =>
+    isLoading &&
+    css`
+      visibility: hidden;
+    `};
 `;
 
 export const LoadingSpinnerWrapper = styled(Flex)`

diff --git a/packages/big-design/src/components/ButtonGroup/ButtonGroup.tsx b/packages/big-design/src/components/ButtonGroup/ButtonGroup.tsx
@@ -48,12 +48,8 @@ export const ButtonGroup: React.FC<ButtonGroupProps> = memo(({ actions, ...wrapp
   }, [actions]);
 
   const hideOverflowedActions = useCallback(() => {
-    const parentWidth = parentRef.current?.offsetWidth;
-    const dropdownWidth = dropdownRef.current?.offsetWidth;
-
-    if (!parentWidth || !dropdownWidth) {
-      return;
-    }
+    const parentWidth = parentRef.current?.offsetWidth ?? 0;
+    const dropdownWidth = dropdownRef.current?.offsetWidth ?? 0;
 
     let remainingWidth = parentWidth;
 

diff --git a/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap
@@ -122,7 +122,6 @@ exports[`renders with close button if onRemove is present 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c1 {

diff --git a/packages/big-design/src/components/InlineMessage/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/InlineMessage/__snapshots__/spec.tsx.snap
@@ -554,7 +554,6 @@ exports[`renders actions 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c1 {
@@ -800,7 +799,6 @@ exports[`renders close button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c10 {

diff --git a/packages/big-design/src/components/List/List.tsx b/packages/big-design/src/components/List/List.tsx
@@ -128,7 +128,7 @@ const StyleableList = typedMemo(
                 index={key}
                 isAction={isDropdown}
                 isChecked={isChecked || false}
-                isHighlighted={highlightedIndex === key}
+                isHighlighted={!item.disabled && highlightedIndex === key}
                 isSelected={!isDropdown && isOption(item) && selectedItem?.value === item.value}
                 item={item}
                 key={`${key}-${item.content}`}

diff --git a/packages/big-design/src/components/Message/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Message/__snapshots__/spec.tsx.snap
@@ -550,7 +550,6 @@ exports[`renders actions 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c1 {
@@ -795,7 +794,6 @@ exports[`renders close button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c10 {

diff --git a/packages/big-design/src/components/Modal/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Modal/__snapshots__/spec.tsx.snap
@@ -135,7 +135,6 @@ exports[`render open modal 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c6 {
@@ -436,7 +435,6 @@ exports[`render open modal without backdrop 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c6 {
@@ -701,7 +699,6 @@ exports[`renders destructive action button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:0px) {
@@ -855,7 +852,6 @@ exports[`renders secondary action button 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 @media (min-width:0px) {

diff --git a/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Pagination/__snapshots__/spec.tsx.snap
@@ -255,7 +255,6 @@ exports[`render pagination component 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c5 {
@@ -670,7 +669,6 @@ exports[`render pagination component with invalid page info 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c5 {
@@ -1085,7 +1083,6 @@ exports[`render pagination component with invalid range info 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c5 {
@@ -1501,7 +1498,6 @@ exports[`render pagination component with no items 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c5 {

diff --git a/packages/big-design/src/components/PillTabs/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/PillTabs/__snapshots__/spec.tsx.snap
@@ -235,7 +235,6 @@ exports[`dropdown is not visible if items fit 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c10 {
@@ -602,7 +601,6 @@ exports[`it renders the given tabs 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c10 {
@@ -969,7 +967,6 @@ exports[`only the pills that fit are visible 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c10 {
@@ -1368,7 +1365,6 @@ exports[`only the pills that fit are visible 2 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c10 {
@@ -1766,7 +1762,6 @@ exports[`renders all the filters if they fit 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c10 {
@@ -2163,7 +2158,6 @@ exports[`renders dropdown if items do not fit 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c10 {

diff --git a/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Table/__snapshots__/spec.tsx.snap
@@ -274,7 +274,6 @@ exports[`renders a pagination component 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c8 {

diff --git a/packages/big-design/src/components/Tabs/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Tabs/__snapshots__/spec.tsx.snap
@@ -120,7 +120,6 @@ exports[`render Tabs 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c2 {
@@ -301,7 +300,6 @@ exports[`render Tabs with disabled item 1`] = `
   display: inline-grid;
   grid-auto-flow: column;
   grid-gap: 0.5rem;
-  visibility: visible;
 }
 
 .c2 {