✨ feat: added flush prop to accordion, fixed storybook jumpiness

Author: e1en0r

.storybook/preview-body.html

@@ -45,8 +45,11 @@
   .sbdocs-body-light .sbdocs-preview-contrast .docs-story {
     background-color: var(--phork-contrast-color, #0060ce);
   }
-</style>
 
+  .sbdocs .docs-story > div:first-child {
+    margin: 0 !important;
+  }
+</style>
 <link href="/favicon/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
 <link href="/favicon/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
 <link href="/favicon/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />

package.json

@@ -181,15 +181,15 @@
     "@semantic-release/exec": "^5.0.0",
     "@semantic-release/git": "^9.0.0",
     "@semantic-release/npm": "^7.1.0",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-jest": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-a11y": "^6.5.17-alpha",
+    "@storybook/addon-actions": "^6.5.17-alpha",
+    "@storybook/addon-essentials": "^6.5.17-alpha",
+    "@storybook/addon-jest": "^6.5.17-alpha",
+    "@storybook/addon-links": "^6.5.17-alpha",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/theming": "^6.5.16",
+    "@storybook/addons": "^6.5.17-alpha",
+    "@storybook/react": "^6.5.17-alpha",
+    "@storybook/theming": "^6.5.17-alpha",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",

src/compositions/Accordion/Accordion.tsx

@@ -23,7 +23,7 @@ export type AccordionProps = Pick<
   InteractiveGroupProviderProps,
   'maxSelect' | 'minSelect' | 'initialSelected' | 'onSelect'
 > &
-  Pick<AccordionListProps, 'duration' | 'easing' | 'items' | 'orientation' | 'unstyled' | 'variant'> &
+  Pick<AccordionListProps, 'duration' | 'easing' | 'flush' | 'items' | 'orientation' | 'unstyled' | 'variant'> &
   ThemeProps & {
     children?: AccordionRenderChildren;
     className?: string;
@@ -34,6 +34,7 @@ export type AccordionProps = Pick<
       | 'contrast'
       | 'duration'
       | 'easting'
+      | 'flush'
       | 'items'
       | 'onBlur'
       | 'onFocus'
@@ -74,6 +75,7 @@ export function Accordion({
   contrast = false,
   duration,
   easing,
+  flush = false,
   id,
   initialSelected,
   items,
@@ -135,6 +137,7 @@ export function Accordion({
                   contrast={contrast}
                   duration={duration}
                   easing={easing}
+                  flush={flush}
                   items={items}
                   onBlur={handleBlur}
                   onFocus={handleFocus}

src/compositions/Accordion/AccordionLabel.tsx

@@ -9,6 +9,7 @@ import { AccordionItemStateProps } from './types';
 export type LocalAccordionLabelProps = AccordionItemStateProps & {
   children: React.ReactChild | React.ReactFragment;
   className?: string;
+  flush?: boolean;
   iconOnly?: boolean;
   id: string;
   orientation?: Orientation;
@@ -31,6 +32,7 @@ export function AccordionLabel({
   children,
   className,
   disabled = false,
+  flush = false,
   focused = false,
   iconOnly = false,
   id,
@@ -52,6 +54,7 @@ export function AccordionLabel({
           : cx(
               styles.accordionLabel,
               styles[`accordionLabel--${orientation}`],
+              flush && styles['accordionLabel--flush'],
               iconOnly && styles['accordionLabel--icon'],
               selected && styles['is-selected'],
               disabled && styles['is-disabled'],

src/compositions/Accordion/AccordionList.tsx

@@ -20,6 +20,7 @@ export type AccordionListProps = React.HTMLAttributes<HTMLDivElement> &
   ThemeProps & {
     className?: string;
     componentId: string;
+    flush?: boolean;
     items: readonly AccordionItemType[];
     onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
@@ -43,6 +44,7 @@ export const AccordionList = React.forwardRef<HTMLDivElement, AccordionListProps
       contrast = false,
       duration,
       easing,
+      flush,
       items,
       onBlur,
       onFocus,
@@ -126,7 +128,9 @@ export const AccordionList = React.forwardRef<HTMLDivElement, AccordionListProps
               >
                 <AccordionLabel
                   aria-controls={generateComponentId(id, 'panel')}
+                  aria-disabled={disabled}
                   aria-expanded={!!stateProps.selected}
+                  flush={flush}
                   iconOnly={iconOnly}
                   id={generateComponentId(id)}
                   onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>) =>

src/compositions/Accordion/stories/Accordion.stories.tsx

@@ -1,6 +1,9 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
-import { Rhythm } from 'components/Rhythm/Rhythm';
+import { PhorkIcon } from 'icons/PhorkIcon';
+import { Flex } from 'components/Flex';
+import { Rhythm } from 'components/Rhythm';
+import { Typography } from 'components/Typography';
 import { Accordion, AccordionProps } from '../Accordion';
 import { items } from './helpers/items';
 import AccordionDocumentation from './Accordion.docs.mdx';
@@ -9,6 +12,11 @@ export default {
   title: 'Surfaces/Accordion',
   component: Accordion,
   argTypes: {
+    flush: {
+      table: {
+        category: 'Appearance',
+      },
+    },
     orientation: {
       table: {
         category: 'Appearance',
@@ -128,6 +136,7 @@ const Template: ComponentStory<typeof Accordion> = args => <Accordion {...args}
 
 const defaultArgs = {
   contrast: false,
+  flush: false,
   items,
   orientation: 'vertical' as AccordionProps['orientation'],
   unstyled: false,
@@ -213,6 +222,64 @@ AllowUnselect.args = {
   minSelect: 0,
 };
 
+export const IconsOnly = Template.bind({});
+IconsOnly.storyName = 'Icons only';
+IconsOnly.args = {
+  ...defaultArgs,
+  items: [
+    {
+      id: 'first',
+      iconOnly: true,
+      label: <PhorkIcon scale="medium" />,
+      content: (
+        <Rhythm ml={2}>
+          <Flex full alignItems="center">
+            <Typography variants="no-wrap">First panel</Typography>
+          </Flex>
+        </Rhythm>
+      ),
+    },
+    {
+      id: 'second',
+      iconOnly: true,
+      label: <PhorkIcon scale="medium" />,
+      content: (
+        <Rhythm ml={2}>
+          <Flex full alignItems="center">
+            <Typography variants="no-wrap">Second panel</Typography>
+          </Flex>
+        </Rhythm>
+      ),
+    },
+    {
+      id: 'third',
+      iconOnly: true,
+      label: <PhorkIcon scale="medium" />,
+      content: (
+        <Rhythm ml={2}>
+          <Flex full alignItems="center">
+            <Typography variants="no-wrap">Third panel</Typography>
+          </Flex>
+        </Rhythm>
+      ),
+      disabled: true,
+    },
+    {
+      id: 'fourth',
+      iconOnly: true,
+      label: <PhorkIcon scale="medium" />,
+      content: (
+        <Rhythm ml={2}>
+          <Flex full alignItems="center">
+            <Typography variants="no-wrap">Fourth panel</Typography>
+          </Flex>
+        </Rhythm>
+      ),
+    },
+  ],
+  orientation: 'horizontal',
+};
+
 export const ItemFunctions = Template.bind({});
 ItemFunctions.storyName = 'Item functions';
 ItemFunctions.args = {

src/compositions/Accordion/styles/AccordionLabel.module.css

@@ -13,6 +13,10 @@ button.accordionLabel {
   text-decoration: none;
   user-select: none;
 
+  &.accordionLabel--flush {
+    padding: 0;
+  }
+
   &.is-selected {
     color: var(--accordion-label-selected-text-color);
   }
@@ -59,7 +63,7 @@ button.accordionLabel {
   justify-content: center;
   line-height: normal;
 
-  &.accordion--icon {
+  &.accordionLabel--icon {
     min-width: 36px;
     padding: 10px;
   }

src/compositions/Accordion/styles/AccordionList.module.css

@@ -61,13 +61,11 @@
 }
 
 .accordionItem--vertical {
-  border-bottom: 1px solid var(--accordion-item-border-color);
   flex-direction: column;
   width: 100%;
 }
 
 .accordionItem--horizontal {
-  border-right: 1px solid var(--accordion-item-border-color);
   flex-direction: row;
   flex-wrap: nowrap;
   min-height: 100%;

src/stories/Icons.stories.mdx

@@ -24,7 +24,7 @@ import { PageTitle } from 'stories/helpers/PageTitle';
   <Flex wrap>
     <IconLooper icons={icons}>
       {(name, Icon) => (
-        <Rhythm key={name} m={2} px={4} py={2}>
+        <Rhythm key={name} m={2} px={3} py={2}>
           <Paper bordered color="primary" style={{ borderRadius: 3 }}>
             <Typography size="large" variants={['letter-spacing-comfy']} volume="quiet" weight="light">
               {name}
@@ -53,7 +53,7 @@ import { PageTitle } from 'stories/helpers/PageTitle';
   <Flex wrap>
     <IconLooper icons={internal}>
       {(name, Icon) => (
-        <Rhythm key={name} m={2} px={4} py={2}>
+        <Rhythm key={name} m={2} px={3} py={2}>
           <Paper bordered color="primary" style={{ borderRadius: 3 }}>
             <Typography size="large" variants={['letter-spacing-comfy']} volume="quiet" weight="light">
               {name}