Skip to content

Commit

Permalink
feat(listbox): add section heading styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikeldking
mikeldking committed Jun 6, 2023
1 parent 1a32240 commit 461f83e
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 124 deletions.
34 changes: 32 additions & 2 deletions src/listbox/ListBoxSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,35 @@ import { ReusableView } from '@react-stately/virtualizer';
import { useListBoxSection } from '@react-aria/listbox';
import { useLocale } from '@react-aria/i18n';
import { useSeparator } from '@react-aria/separator';
import { css } from '@emotion/react';
import theme from '../theme';

interface ListBoxSectionProps<T> {
reusableView: ReusableView<Node<T>, unknown>;
header: ReusableView<Node<T>, unknown>;
children?: ReactNode;
}

const headingCSS = css`
padding-left: var(--ac-global-dimension-static-size-200);
padding-right: var(--ac-global-dimension-static-size-200);
margin-top: var(--ac-global-dimension-size-75);
margin-bottom: var(--ac-global-dimension-size-40);
font-size: ${theme.typography.sizes.medium.fontSize}px;
line-height: ${theme.typography.sizes.medium.lineHeight}px;
font-weight: ${theme.typography.weights.heavy};
`;

const dividerCSS = css`
box-sizing: content-box;
height: var(--ac-global-border-size-thick);
margin: 1.5px var(--ac-global-dimension-static-size-150);
background: var(--ac-global-color-gray-300);
border: none;
padding: 0;
overflow: visible;
`;

/** @private */
export function ListBoxSection<T>(props: ListBoxSectionProps<T>) {
let { children, reusableView, header } = props;
Expand Down Expand Up @@ -46,10 +68,18 @@ export function ListBoxSection<T>(props: ListBoxSectionProps<T>) {
style={layoutInfoToStyle(header.layoutInfo, direction)}
>
{item.key !== state.collection.getFirstKey() && (
<div {...separatorProps} className="ac-enu-divider" />
<div
{...separatorProps}
className="ac-menu-divider"
css={dividerCSS}
/>
)}
{item.rendered && (
<div {...headingProps} className="ac-menu-section-heading">
<div
{...headingProps}
className="ac-menu-section-heading"
css={headingCSS}
>
{item.rendered}
</div>
)}
Expand Down
225 changes: 121 additions & 104 deletions src/provider/GlobalStyles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,65 +61,6 @@ export const mediumRootCSS = css`
`;

export const globalCSS = css`
:root {
--ac-global-dimension-static-size-0: 0px;
--ac-global-dimension-static-size-10: 1px;
--ac-global-dimension-static-size-25: 2px;
--ac-global-dimension-static-size-50: 4px;
--ac-global-dimension-static-size-40: 3px;
--ac-global-dimension-static-size-65: 5px;
--ac-global-dimension-static-size-100: 8px;
--ac-global-dimension-static-size-115: 9px;
--ac-global-dimension-static-size-125: 10px;
--ac-global-dimension-static-size-130: 11px;
--ac-global-dimension-static-size-150: 12px;
--ac-global-dimension-static-size-160: 13px;
--ac-global-dimension-static-size-175: 14px;
--ac-global-dimension-static-size-200: 16px;
--ac-global-dimension-static-size-225: 18px;
--ac-global-dimension-static-size-250: 20px;
--ac-global-dimension-static-size-300: 24px;
--ac-global-dimension-static-size-400: 32px;
--ac-global-dimension-static-size-450: 36px;
--ac-global-dimension-static-size-500: 40px;
--ac-global-dimension-static-size-550: 44px;
--ac-global-dimension-static-size-600: 48px;
--ac-global-dimension-static-size-700: 56px;
--ac-global-dimension-static-size-800: 64px;
--ac-global-dimension-static-size-900: 72px;
--ac-global-dimension-static-size-1000: 80px;
--ac-global-dimension-static-size-1200: 96px;
--ac-global-dimension-static-size-1700: 136px;
--ac-global-dimension-static-size-2400: 192px;
--ac-global-dimension-static-size-2600: 208px;
--ac-global-dimension-static-size-3400: 272px;
--ac-global-dimension-static-size-3600: 288px;
--ac-global-dimension-static-size-4600: 368px;
--ac-global-dimension-static-size-5000: 400px;
--ac-global-dimension-static-size-6000: 480px;
--ac-global-dimension-static-font-size-50: 11px;
--ac-global-dimension-static-font-size-75: 12px;
--ac-global-dimension-static-font-size-100: 14px;
--ac-global-dimension-static-font-size-150: 15px;
--ac-global-dimension-static-font-size-200: 16px;
--ac-global-dimension-static-font-size-300: 18px;
--ac-global-dimension-static-font-size-400: 20px;
--ac-global-dimension-static-font-size-500: 22px;
--ac-global-dimension-static-font-size-600: 25px;
--ac-global-dimension-static-font-size-700: 28px;
--ac-global-dimension-static-font-size-800: 32px;
--ac-global-dimension-static-font-size-900: 36px;
--ac-global-dimension-static-font-size-1000: 40px;
--ac-global-dimension-static-percent-50: 50%;
--ac-global-dimension-static-percent-100: 100%;
--ac-global-dimension-static-breakpoint-xsmall: 304px;
--ac-global-dimension-static-breakpoint-small: 768px;
--ac-global-dimension-static-breakpoint-medium: 1280px;
--ac-global-dimension-static-breakpoint-large: 1768px;
--ac-global-dimension-static-breakpoint-xlarge: 2160px;
--ac-global-dimension-static-grid-columns: 12;
--ac-global-dimension-static-grid-fluid-width: 100%;
--ac-global-dimension-static-grid-fixed-max-width: 1280px;
:root {
--ac-global-dimension-static-size-0: 0px;
--ac-global-dimension-static-size-10: 1px;
Expand Down Expand Up @@ -179,58 +120,134 @@ export const globalCSS = css`
--ac-global-dimension-static-grid-columns: 12;
--ac-global-dimension-static-grid-fluid-width: 100%;
--ac-global-dimension-static-grid-fixed-max-width: 1280px;
:root {
--ac-global-dimension-static-size-0: 0px;
--ac-global-dimension-static-size-10: 1px;
--ac-global-dimension-static-size-25: 2px;
--ac-global-dimension-static-size-50: 4px;
--ac-global-dimension-static-size-40: 3px;
--ac-global-dimension-static-size-65: 5px;
--ac-global-dimension-static-size-100: 8px;
--ac-global-dimension-static-size-115: 9px;
--ac-global-dimension-static-size-125: 10px;
--ac-global-dimension-static-size-130: 11px;
--ac-global-dimension-static-size-150: 12px;
--ac-global-dimension-static-size-160: 13px;
--ac-global-dimension-static-size-175: 14px;
--ac-global-dimension-static-size-200: 16px;
--ac-global-dimension-static-size-225: 18px;
--ac-global-dimension-static-size-250: 20px;
--ac-global-dimension-static-size-300: 24px;
--ac-global-dimension-static-size-400: 32px;
--ac-global-dimension-static-size-450: 36px;
--ac-global-dimension-static-size-500: 40px;
--ac-global-dimension-static-size-550: 44px;
--ac-global-dimension-static-size-600: 48px;
--ac-global-dimension-static-size-700: 56px;
--ac-global-dimension-static-size-800: 64px;
--ac-global-dimension-static-size-900: 72px;
--ac-global-dimension-static-size-1000: 80px;
--ac-global-dimension-static-size-1200: 96px;
--ac-global-dimension-static-size-1700: 136px;
--ac-global-dimension-static-size-2400: 192px;
--ac-global-dimension-static-size-2600: 208px;
--ac-global-dimension-static-size-3400: 272px;
--ac-global-dimension-static-size-3600: 288px;
--ac-global-dimension-static-size-4600: 368px;
--ac-global-dimension-static-size-5000: 400px;
--ac-global-dimension-static-size-6000: 480px;
--ac-global-dimension-static-font-size-50: 11px;
--ac-global-dimension-static-font-size-75: 12px;
--ac-global-dimension-static-font-size-100: 14px;
--ac-global-dimension-static-font-size-150: 15px;
--ac-global-dimension-static-font-size-200: 16px;
--ac-global-dimension-static-font-size-300: 18px;
--ac-global-dimension-static-font-size-400: 20px;
--ac-global-dimension-static-font-size-500: 22px;
--ac-global-dimension-static-font-size-600: 25px;
--ac-global-dimension-static-font-size-700: 28px;
--ac-global-dimension-static-font-size-800: 32px;
--ac-global-dimension-static-font-size-900: 36px;
--ac-global-dimension-static-font-size-1000: 40px;
--ac-global-dimension-static-percent-50: 50%;
--ac-global-dimension-static-percent-100: 100%;
--ac-global-dimension-static-breakpoint-xsmall: 304px;
--ac-global-dimension-static-breakpoint-small: 768px;
--ac-global-dimension-static-breakpoint-medium: 1280px;
--ac-global-dimension-static-breakpoint-large: 1768px;
--ac-global-dimension-static-breakpoint-xlarge: 2160px;
--ac-global-dimension-static-grid-columns: 12;
--ac-global-dimension-static-grid-fluid-width: 100%;
--ac-global-dimension-static-grid-fixed-max-width: 1280px;

/* Colors */
--ac-global-color-gray-900: #181b1f;
--ac-global-color-gray-800: #1d2126;
--ac-global-color-gray-700: #23282e;
--ac-global-color-gray-600: #282e35;
--ac-global-color-gray-500: #2f353d;
--ac-global-color-gray-400: #3d434a;
--ac-global-color-gray-300: #4a5057;
--ac-global-color-gray-200: #585d64;
--ac-global-color-gray-100: #666b71;
/* Colors */
--ac-global-color-gray-900: #181b1f;
--ac-global-color-gray-800: #1d2126;
--ac-global-color-gray-700: #23282e;
--ac-global-color-gray-600: #282e35;
--ac-global-color-gray-500: #2f353d;
--ac-global-color-gray-400: #3d434a;
--ac-global-color-gray-300: #4a5057;
--ac-global-color-gray-200: #585d64;
--ac-global-color-gray-100: #666b71;

--ac-global-color-danger: #f85149;
--ac-global-color-danger: #f85149;

--ac-global-text-color-900: rgba(255, 255, 255, 0.9);
--ac-global-text-color-900: rgba(255, 255, 255, 0.9);

--ac-global-background-color-light: var(--ac-global-color-gray-500);
--ac-global-background-color-dark: var(--ac-global-color-gray-900);
--ac-global-background-color-danger: var(--ac-global-color-danger);
--ac-global-background-color-light: var(--ac-global-color-gray-500);
--ac-global-background-color-dark: var(--ac-global-color-gray-900);
--ac-global-background-color-danger: var(--ac-global-color-danger);

--ac-global-border-color-default: var(--ac-global-color-gray-100);
--ac-global-border-color-light: var(--ac-global-color-gray-100);
--ac-global-border-color-dark: var(--ac-global-color-gray-400);
--ac-global-border-color-default: var(--ac-global-color-gray-100);
--ac-global-border-color-light: var(--ac-global-color-gray-100);
--ac-global-border-color-dark: var(--ac-global-color-gray-400);

--ac-global-rounding-small: var(--ac-global-dimension-static-size-50);
--ac-global-rounding-medium: var(--ac-global-dimension-static-size-100);
--ac-global-rounding-small: var(--ac-global-dimension-static-size-50);
--ac-global-rounding-medium: var(--ac-global-dimension-static-size-100);

--ac-global-border-size-thin: var(--ac-global-dimension-static-size-10);
--ac-global-border-size-thick: var(--ac-global-dimension-static-size-25);
--ac-global-border-size-thicker: var(--ac-global-dimension-static-size-50);
--ac-global-border-size-thickest: var(
--ac-global-dimension-static-size-100
);
--ac-global-border-offset-thin: var(--ac-global-dimension-static-size-25);
--ac-global-border-offset-thick: var(--ac-global-dimension-static-size-50);
--ac-global-border-offset-thicker: var(
--ac-global-dimension-static-size-100
);
--ac-global-border-offset-thickest: var(
--ac-global-dimension-static-size-200
);
--ac-global-grid-baseline: var(--ac-global-dimension-static-size-100);
--ac-global-grid-gutter-xsmall: var(--ac-global-dimension-static-size-200);
--ac-global-grid-gutter-small: var(--ac-global-dimension-static-size-300);
--ac-global-grid-gutter-medium: var(--ac-global-dimension-static-size-400);
--ac-global-grid-gutter-large: var(--ac-global-dimension-static-size-500);
--ac-global-grid-gutter-xlarge: var(--ac-global-dimension-static-size-600);
--ac-global-grid-margin-xsmall: var(--ac-global-dimension-static-size-200);
--ac-global-grid-margin-small: var(--ac-global-dimension-static-size-300);
--ac-global-grid-margin-medium: var(--ac-global-dimension-static-size-400);
--ac-global-grid-margin-large: var(--ac-global-dimension-static-size-500);
--ac-global-grid-margin-xlarge: var(--ac-global-dimension-static-size-600);
--ac-global-border-size-thin: var(--ac-global-dimension-static-size-10);
--ac-global-border-size-thick: var(--ac-global-dimension-static-size-25);
--ac-global-border-size-thicker: var(
--ac-global-dimension-static-size-50
);
--ac-global-border-size-thickest: var(
--ac-global-dimension-static-size-100
);
--ac-global-border-offset-thin: var(--ac-global-dimension-static-size-25);
--ac-global-border-offset-thick: var(
--ac-global-dimension-static-size-50
);
--ac-global-border-offset-thicker: var(
--ac-global-dimension-static-size-100
);
--ac-global-border-offset-thickest: var(
--ac-global-dimension-static-size-200
);
--ac-global-grid-baseline: var(--ac-global-dimension-static-size-100);
--ac-global-grid-gutter-xsmall: var(
--ac-global-dimension-static-size-200
);
--ac-global-grid-gutter-small: var(--ac-global-dimension-static-size-300);
--ac-global-grid-gutter-medium: var(
--ac-global-dimension-static-size-400
);
--ac-global-grid-gutter-large: var(--ac-global-dimension-static-size-500);
--ac-global-grid-gutter-xlarge: var(
--ac-global-dimension-static-size-600
);
--ac-global-grid-margin-xsmall: var(
--ac-global-dimension-static-size-200
);
--ac-global-grid-margin-small: var(--ac-global-dimension-static-size-300);
--ac-global-grid-margin-medium: var(
--ac-global-dimension-static-size-400
);
--ac-global-grid-margin-large: var(--ac-global-dimension-static-size-500);
--ac-global-grid-margin-xlarge: var(
--ac-global-dimension-static-size-600
);
}
}
`;

Expand Down
2 changes: 1 addition & 1 deletion src/theme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export const theme = {
},
typography: {
weights: {
heavy: 500,
heavy: 600,
normal: 400,
},
sizes: {
Expand Down
36 changes: 19 additions & 17 deletions stories/ListBox.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { css } from '@emotion/react';
import { Meta, Story } from '@storybook/react';
import { ListBox, Item, ListBoxProps, Section } from '../src';
import { ListBox, Item, ListBoxProps, Section, Provider } from '../src';

const meta: Meta = {
title: 'ListBox',
Expand Down Expand Up @@ -62,22 +62,24 @@ export const listOptions = ListOptions.bind({});

const ListBoxWithSections: Story<ListBoxProps<string>> = args => {
return (
<ListBox
style={{ width: 200 }}
aria-label="Pick your favorite"
selectionMode="single"
>
<Section title="Animals">
<Item key="Aardvark">Aardvark</Item>
<Item key="Kangaroo">Kangaroo</Item>
<Item key="Snake">Snake</Item>
</Section>
<Section title="People">
<Item key="Danni">Danni</Item>
<Item key="Devon">Devon</Item>
<Item key="Ross">Ross</Item>
</Section>
</ListBox>
<Provider>
<ListBox
style={{ width: 200 }}
aria-label="Pick your favorite"
selectionMode="single"
>
<Section title="Animals">
<Item key="Aardvark">Aardvark</Item>
<Item key="Kangaroo">Kangaroo</Item>
<Item key="Snake">Snake</Item>
</Section>
<Section title="People">
<Item key="Danni">Danni</Item>
<Item key="Devon">Devon</Item>
<Item key="Ross">Ross</Item>
</Section>
</ListBox>
</Provider>
);
};

Expand Down
Loading

0 comments on commit 461f83e

Please sign in to comment.