paris 0.20.0 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/package.json +1 -1
  3. package/src/stories/combobox/Combobox.tsx +44 -54
  4. package/src/stories/menu/Menu.module.scss +1 -14
  5. package/src/stories/menu/Menu.tsx +2 -6
  6. package/src/stories/select/Select.module.scss +6 -4
  7. package/src/stories/select/Select.tsx +32 -50
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # paris
2
2
 
3
+ ## 0.21.0
4
+
5
+ ### Minor Changes
6
+
7
+ - c3f7f55: Portal Menu, Select, and Combobox dropdowns to document body via Headless UI's anchor prop, fixing z-index stacking issues where dropdowns appeared behind other content due to parent stacking contexts. Add semantic z-index layer tokens (Theme.new.layers) with six named layers: below, sticky, dropdown, overlay, popover, menu. Fix SegmentedControl labels bleeding through GlassTabs sticky bar.
8
+
3
9
  ## 0.20.0
4
10
 
5
11
  ### Minor Changes
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "paris",
3
3
  "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
4
4
  "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
5
- "version": "0.20.0",
5
+ "version": "0.21.0",
6
6
  "homepage": "https://paris.slingshot.fm",
7
7
  "license": "MIT",
8
8
  "repository": {
package/src/stories/combobox/Combobox.tsx CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  import { faClose } from '@fortawesome/free-solid-svg-icons';
4
4
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5
- import { ComboboxInput, ComboboxOption, ComboboxOptions, Combobox as HCombobox, Transition } from '@headlessui/react';
5
+ import { ComboboxInput, ComboboxOption, ComboboxOptions, Combobox as HCombobox } from '@headlessui/react';
6
6
  import { clsx } from 'clsx';
7
7
  import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
8
8
  import { useId, useMemo, useState } from 'react';
@@ -18,7 +18,6 @@ import type { TextProps } from '../text';
18
18
  import { Text } from '../text';
19
19
  import { pget, theme } from '../theme';
20
20
  import { TextWhenString } from '../utility';
21
- import dropdownStyles from '../utility/Dropdown.module.scss';
22
21
 
23
22
  export type Option<T extends Record<string, any> = Record<string, any>> =
24
23
  | {
@@ -292,59 +291,50 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
292
291
  </div>
293
292
  )}
294
293
  </div>
295
- <Transition
296
- as="div"
297
- className={dropdownStyles.transitionContainer}
298
- enter={dropdownStyles.transition}
299
- enterFrom={dropdownStyles.enterFrom}
300
- enterTo={dropdownStyles.enterTo}
301
- leave={dropdownStyles.transition}
302
- leaveFrom={dropdownStyles.leaveFrom}
303
- leaveTo={dropdownStyles.leaveTo}
294
+ <ComboboxOptions
295
+ as="ul"
296
+ anchor="bottom start"
297
+ transition
298
+ {...overrides?.optionsContainer}
299
+ className={clsx(overrides?.optionsContainer?.className, styles.options)}
300
+ style={
301
+ {
302
+ '--options-maxHeight': `${maxHeight}px`,
303
+ ...overrides?.optionsContainer?.style,
304
+ } as CSSProperties
305
+ }
304
306
  >
305
- <ComboboxOptions
306
- as="ul"
307
- {...overrides?.optionsContainer}
308
- className={clsx(overrides?.optionsContainer?.className, styles.options)}
309
- style={
310
- {
311
- '--options-maxHeight': `${maxHeight}px`,
312
- ...overrides?.optionsContainer?.style,
313
- } as CSSProperties
314
- }
315
- >
316
- {allowCustomValue && showCustomValueOption && !customValueToOption && query.length > 0 && (
317
- <ComboboxOption
318
- as="li"
319
- value={query}
320
- data-selected={false}
321
- className={clsx(overrides?.customValueOption?.className, styles.option)}
322
- {...overrides?.customValueOption}
323
- >
324
- <Text as="span" kind="paragraphSmall">
325
- {customValueString.replace('%v', query)}
326
- </Text>
327
- </ComboboxOption>
328
- )}
329
- {(optionsWithCustomValue || []).map((option) => (
330
- <ComboboxOption
331
- as="li"
332
- key={option.id}
333
- value={option.id}
334
- {...overrides?.option}
335
- className={clsx(
336
- overrides?.option?.className,
337
- styles.option,
338
- hasOptionBorder && styles.optionBorder,
339
- )}
340
- >
341
- <TextWhenString as="span" kind="paragraphSmall">
342
- {option.node}
343
- </TextWhenString>
344
- </ComboboxOption>
345
- ))}
346
- </ComboboxOptions>
347
- </Transition>
307
+ {allowCustomValue && showCustomValueOption && !customValueToOption && query.length > 0 && (
308
+ <ComboboxOption
309
+ as="li"
310
+ value={query}
311
+ data-selected={false}
312
+ className={clsx(overrides?.customValueOption?.className, styles.option)}
313
+ {...overrides?.customValueOption}
314
+ >
315
+ <Text as="span" kind="paragraphSmall">
316
+ {customValueString.replace('%v', query)}
317
+ </Text>
318
+ </ComboboxOption>
319
+ )}
320
+ {(optionsWithCustomValue || []).map((option) => (
321
+ <ComboboxOption
322
+ as="li"
323
+ key={option.id}
324
+ value={option.id}
325
+ {...overrides?.option}
326
+ className={clsx(
327
+ overrides?.option?.className,
328
+ styles.option,
329
+ hasOptionBorder && styles.optionBorder,
330
+ )}
331
+ >
332
+ <TextWhenString as="span" kind="paragraphSmall">
333
+ {option.node}
334
+ </TextWhenString>
335
+ </ComboboxOption>
336
+ ))}
337
+ </ComboboxOptions>
348
338
  </HCombobox>
349
339
  </Field>
350
340
  );
package/src/stories/menu/Menu.module.scss CHANGED
@@ -3,10 +3,7 @@
3
3
  }
4
4
 
5
5
  .menuItems {
6
- position: absolute;
7
- right: 0;
8
-
9
- margin-top: 6px;
6
+ --anchor-gap: 6px;
10
7
 
11
8
  border-radius: 8px;
12
9
  background: var(--pte-new-colors-surfacePrimary);
@@ -31,16 +28,6 @@
31
28
  }
32
29
  }
33
30
 
34
- .leftPosition {
35
- right: auto;
36
- left: 0;
37
- }
38
-
39
- .rightPosition {
40
- right: 0;
41
- left: auto;
42
- }
43
-
44
31
  .menuItem {
45
32
  width: 100%;
46
33
  padding: 8px 14px;
package/src/stories/menu/Menu.tsx CHANGED
@@ -58,12 +58,8 @@ export const MenuItems: FC<
58
58
  > = ({ className, children, position = 'left', ...props }) => (
59
59
  <HMenuItems
60
60
  transition
61
- className={clsx(
62
- styles.menuItems,
63
- position === 'left' && styles.leftPosition,
64
- position === 'right' && styles.rightPosition,
65
- className,
66
- )}
61
+ anchor={position === 'left' ? 'bottom start' : 'bottom end'}
62
+ className={clsx(styles.menuItems, className)}
67
63
  {...props}
68
64
  >
69
65
  {children}
package/src/stories/select/Select.module.scss CHANGED
@@ -25,14 +25,11 @@
25
25
  }
26
26
 
27
27
  .options {
28
+ width: var(--anchor-width);
28
29
  max-height: var(--options-maxHeight, auto);
29
30
  overflow-y: auto;
30
31
  overflow-x: hidden;
31
32
 
32
- position: absolute;
33
- top: 100%;
34
- left: 0;
35
- right: 0;
36
33
  z-index: var(--pte-new-layers-dropdown);
37
34
 
38
35
  display: flex;
@@ -46,6 +43,11 @@
46
43
 
47
44
  transition: var(--pte-animations-interaction);
48
45
 
46
+ &[data-closed] {
47
+ opacity: 0;
48
+ transform: translateY(-8px);
49
+ }
50
+
49
51
  &:focus-within {
50
52
  outline: none;
51
53
  }
package/src/stories/select/Select.tsx CHANGED
@@ -2,15 +2,7 @@
2
2
 
3
3
  import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
4
4
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5
- import {
6
- Listbox,
7
- ListboxButton,
8
- ListboxOption,
9
- ListboxOptions,
10
- Radio,
11
- RadioGroup,
12
- Transition,
13
- } from '@headlessui/react';
5
+ import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Radio, RadioGroup } from '@headlessui/react';
14
6
  import { clsx } from 'clsx';
15
7
  import { motion } from 'framer-motion';
16
8
  import type { ComponentPropsWithoutRef, CSSProperties, ForwardedRef, ReactNode } from 'react';
@@ -24,7 +16,6 @@ import type { TextProps } from '../text';
24
16
  import { Text } from '../text';
25
17
  import { pget, theme } from '../theme';
26
18
  import { TextWhenString } from '../utility';
27
- import dropdownStyles from '../utility/Dropdown.module.scss';
28
19
  import styles from './Select.module.scss';
29
20
 
30
21
  export type Option<T = Record<string, any>> = {
@@ -255,47 +246,38 @@ export const Select = forwardRef(
255
246
  />
256
247
  )}
257
248
  </ListboxButton>
258
- <Transition
259
- as="div"
260
- className={dropdownStyles.transitionContainer}
261
- enter={dropdownStyles.transition}
262
- enterFrom={dropdownStyles.enterFrom}
263
- enterTo={dropdownStyles.enterTo}
264
- leave={dropdownStyles.transition}
265
- leaveFrom={dropdownStyles.leaveFrom}
266
- leaveTo={dropdownStyles.leaveTo}
249
+ <ListboxOptions
250
+ anchor="bottom start"
251
+ transition
252
+ className={clsx(overrides?.optionsContainer, styles.options)}
253
+ style={
254
+ {
255
+ '--options-maxHeight': `${maxHeight}px`,
256
+ } as CSSProperties
257
+ }
267
258
  >
268
- <ListboxOptions
269
- className={clsx(overrides?.optionsContainer, styles.options)}
270
- style={
271
- {
272
- '--options-maxHeight': `${maxHeight}px`,
273
- } as CSSProperties
274
- }
275
- >
276
- {(options || []).map((option) => (
277
- <ListboxOption
278
- key={option.id}
279
- value={option.id}
280
- className={clsx(
281
- overrides?.option,
282
- styles.option,
283
- hasOptionBorder && styles.optionBorder,
284
- )}
285
- disabled={option.disabled || false}
286
- >
287
- {typeof option.node === 'string' ? (
288
- <Text as="span" kind="paragraphSmall">
289
- {option.node}
290
- </Text>
291
- ) : (
292
- option.node
293
- )}
294
- <Icon icon={Check} size={12} className={styles.check} />
295
- </ListboxOption>
296
- ))}
297
- </ListboxOptions>
298
- </Transition>
259
+ {(options || []).map((option) => (
260
+ <ListboxOption
261
+ key={option.id}
262
+ value={option.id}
263
+ className={clsx(
264
+ overrides?.option,
265
+ styles.option,
266
+ hasOptionBorder && styles.optionBorder,
267
+ )}
268
+ disabled={option.disabled || false}
269
+ >
270
+ {typeof option.node === 'string' ? (
271
+ <Text as="span" kind="paragraphSmall">
272
+ {option.node}
273
+ </Text>
274
+ ) : (
275
+ option.node
276
+ )}
277
+ <Icon icon={Check} size={12} className={styles.check} />
278
+ </ListboxOption>
279
+ ))}
280
+ </ListboxOptions>
299
281
  </Listbox>
300
282
  )}
301
283
  {kind === 'radio' && (