Skip to content

Commit 27d5ed2

Browse files
lertelerte
authored
Merge pull request #36 from pedroanuda/update-menu-visuals-and-bug-fix
Update Menus visuals and fix scroll bug
2 parents 1675dfc + 46e1931 commit 27d5ed2

File tree

20 files changed

+179
-57
lines changed

20 files changed

+179
-57
lines changed

‎apps/docs/content/components/focus-ring.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,11 @@ title: Focus Ring
55
## Usage
66

77
<usage></usage>
8+
9+
## Props
10+
| Name | Type | Description | Default |
11+
| --------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------- | --------- |
12+
| type | `outward` `inward` | The way the focus ring is animated and positioned. | `outward` |
13+
| as | `keyof HTMLElementTagNameMap` `React.ElementType` | Allows for more flexibility when supporting different elements that can act as a FocusRing. | `span` |
14+
| style | `React.CSSProperties` | — | — |
15+
| className | `string` | — | — |

‎apps/docs/content/components/menus.md‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,28 @@ description: Menus display a list of choices on a temporary surface
88
<usage></usage>
99

1010
## Props
11+
### MenuButton
1112

12-
| Name | Type | Description | Default |
13-
| ----------- | -------------- | ------------------------------------ | ------- |
14-
| `label` | `string` | The text to show on the menu button. | `null` |
15-
| `activator` | `render props` | activator component of the menu. | `null` |
13+
| Name | Type | Description | Default |
14+
| ------------------- | ------------------- | --------------------------------------------------------------------------- | ------- |
15+
| `label` | `React.ReactNode` | The text to show on the menu button. | — |
16+
| `popoverProps` | `PopoverProps` | Props that allow changing the popover placement, flip behavior, style etc. | — |
17+
18+
### MenuItem
19+
20+
| Name | Type | Description | Default |
21+
| ------------------- | --------------------- | --------------------------------------------------------------------------------- | ------- |
22+
| `textValue` | `string` | A string representation of the item's contents, used for features like typeahead. | — |
23+
| `isDisabled` | `boolean` | Whether the item is disabled. | `false` |
24+
| `className` | `string` | — | — |
25+
| `style` | `React.CSSProperties` | — | — |
26+
27+
## Events
28+
### MenuItem
29+
30+
| Name | Type | Description |
31+
| ----------------- | --------------------------------- | -------------------------------------------------------- |
32+
| `onAction` | `() => void` | Handler that is called when the item is selected. |
33+
| `onHoverChange` | `(isHovering: boolean) => void` | Handler that is called when the hover state changes. |
34+
| `onHoverStart` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction starts. |
35+
| `onHoverEnd` | `(e: HoverEvent) => void` | Handler that is called when a hover interaction ends. |

‎apps/docs/content/components/select.md‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,31 @@ description: Select fields components are used for collecting user provided info
66
## Usage
77

88
<usage></usage>
9+
10+
## Props
11+
12+
| Name | Type | Default | Description |
13+
| --------------------- | --------------------- | -------------- | ------------------------------------------------------------------------------------------------------------- |
14+
| `label` | `React.ReactNode` | — | The content to display as the label. |
15+
| `selectedKey` | `Key` | — | The currently selected key in the collection (controlled). |
16+
| `disabledKeys` | `Iterable<Key>` | — | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
17+
| `isOpen` | `boolean` | `false` | Sets the open state of the menu. |
18+
| `isDisabled` | `boolean` | `false` | Whether the input is disabled. |
19+
| `isRequired` | `boolean` | `false` | Whether user input is required on the input before form submission. |
20+
| `isInvalid` | `boolean` | `false` | Whether the input value is invalid. |
21+
| `validationBehavior` | `aria` `native` | `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. |
22+
| `validate` | `(value: Key) => ValidationError` `true` | — | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead. |
23+
| `variant` | `filled` `outlined` | `filled` | The type of the Select. |
24+
| `popoverProps` | `PopoverProps` | — | Props that allow changing the popover placement, flip behavior, style etc. |
25+
| `className` | `string` | — | — |
26+
| `style` | `React.CSSProperties` | — | — |
27+
28+
## Events
29+
30+
| Name | Type | Description |
31+
| ------------------- | ------------------------------- | ----------------------------------------------------------------- |
32+
| `onSelectionChange` | `(key: Key) => void` | Handler that is called when the selection changes. |
33+
| `onBlur` | `(e: React.FocusEvent) => void` | Handler that is called when the element loses focus. |
34+
| `onFocus` | `(e: React.FocusEvent) => void` | Handler that is called when the element receives focus. |
35+
| `onFocusChange` | `(isFocused: boolean) => void` | Handler that is called when the element's focus status changes. |
36+
| `onOpenChange` | `(isOpened: boolean) => void` | Method that is called when the open state of the menu changes. |

‎apps/docs/src/usages/focus-ring.tsx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,28 @@
11
import { FocusRing, useFocusRing } from 'actify'
2+
import React from 'react'
23

3-
export default () => {
4+
function FocusRingInput({ inward }: {inward?: boolean}) {
45
const { isFocused, focusProps } = useFocusRing()
6+
57
return (
68
<span className="relative">
7-
<input {...focusProps} className="outline-none text-primary" />
8-
{isFocused && <FocusRing />}
9+
<input {...focusProps} className="outline-none text-primary"/>
10+
{isFocused && <FocusRing type={inward ? 'inward' : 'outward'} />}
911
</span>
12+
);
13+
}
14+
15+
export default () => {
16+
return (
17+
<div className="flex items-center gap-4">
18+
<div className='relative mb-2'>
19+
<h6>type outward</h6>
20+
<FocusRingInput />
21+
</div>
22+
<div className='relative mb-2'>
23+
<h6>type inward</h6>
24+
<FocusRingInput inward />
25+
</div>
26+
</div>
1027
)
1128
}

‎apps/docs/src/usages/select.tsx‎

Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,45 @@ import { Select, SelectOption } from 'actify'
33
import React from 'react'
44

55
export default () => {
6+
const [selectedKey, setSelectedKey] = React.useState("");
7+
8+
const options = [
9+
{id: "actify", value: "Actify"},
10+
{id: "ngroker", value: "Ngroker"},
11+
{id: "taildoor", value: "Taildoor"},
12+
{id: "hugola", value: "Hugola"}
13+
];
14+
615
return (
7-
<div className="max-sm:flex-wrap flex gap-4">
8-
<Select label="Select Project">
9-
<SelectOption>Actify</SelectOption>
10-
<SelectOption>Ngroker</SelectOption>
11-
<SelectOption>Taildoor</SelectOption>
12-
<SelectOption>Hugola</SelectOption>
13-
</Select>
14-
<Select variant="outlined" label="Select Project">
15-
<SelectOption>Actify</SelectOption>
16-
<SelectOption>Ngroker</SelectOption>
17-
<SelectOption>Taildoor</SelectOption>
18-
<SelectOption>Hugola</SelectOption>
19-
</Select>
16+
<div className="flex flex-col gap-5">
17+
<div className="max-sm:flex-wrap flex gap-4">
18+
<Select label="Select Project">
19+
<SelectOption>Actify</SelectOption>
20+
<SelectOption>Ngroker</SelectOption>
21+
<SelectOption>Taildoor</SelectOption>
22+
<SelectOption>Hugola</SelectOption>
23+
</Select>
24+
<Select variant="outlined" label="Select Project">
25+
<SelectOption>Actify</SelectOption>
26+
<SelectOption>Ngroker</SelectOption>
27+
<SelectOption>Taildoor</SelectOption>
28+
<SelectOption>Hugola</SelectOption>
29+
</Select>
30+
</div>
31+
<div>
32+
<h6 className='mb-3 font-semibold'>Controlled Example:</h6>
33+
<Select variant="outlined" label="Controlled Select" selectedKey={selectedKey}
34+
onSelectionChange={key => setSelectedKey(key.toString())}>
35+
<>
36+
{options.map((option) => (
37+
<SelectOption key={option.id}>
38+
{option.value}
39+
</SelectOption>
40+
))}
41+
</>
42+
</Select>
43+
<p className='mt-1'>Selected key: {selectedKey}</p>
44+
</div>
2045
</div>
2146
)
2247
}

‎packages/actify/src/components/FocusRing/FocusRing.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@ import styles from './focusring.module.css'
55
type FocusRingProps = {
66
style?: CSSProperties
77
className?: string
8+
type?: 'outward' | 'inward'
89
as?: keyof HTMLElementTagNameMap | React.ElementType
910
}
1011

11-
const FocusRing = ({ as: As = 'span', style, className }: FocusRingProps) => {
12-
return <As style={style} className={clsx(styles['focus-ring'], className)} />
12+
const FocusRing = ({ as: As = 'span', type = 'outward', style, className }: FocusRingProps) => {
13+
return <As style={style} className={clsx(styles['focus-ring'], className)} inward={type === 'inward' ? 'true' : undefined}/>
1314
}
1415

1516
FocusRing.displayName = 'Actify.FocusRing'

‎packages/actify/src/components/FocusRing/focusring.module.css‎

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -45,21 +45,8 @@
4545
}
4646
&[inward] {
4747
animation-name: inward-grow, inward-shrink;
48-
border-end-end-radius: calc(
49-
var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, 9999px)) -
50-
var(--md-focus-ring-inward-offset, 0px)
51-
);
52-
border-end-start-radius: calc(
53-
var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, 9999px)) -
54-
var(--md-focus-ring-inward-offset, 0px)
55-
);
56-
border-start-end-radius: calc(
57-
var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, 9999px)) -
58-
var(--md-focus-ring-inward-offset, 0px)
59-
);
60-
border-start-start-radius: calc(
61-
var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, 9999px)) -
62-
var(--md-focus-ring-inward-offset, 0px)
48+
border-radius: calc(
49+
var(--md-focus-ring-shape, inherit) - var(--md-focus-ring-inward-offset, 0px)
6350
);
6451
border: var(--md-focus-ring-width, 3px) solid currentColor;
6552
inset: var(--md-focus-ring-inward-offset, 0px);

‎packages/actify/src/components/ListBox/ListBoxOption.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,11 @@ const ListBoxOption = <T extends object>({
3636
{item.rendered}
3737
{isFocusVisible && (
3838
<FocusRing
39+
type="inward"
3940
style={
4041
{
4142
color: 'rgb(var(--md-sys-color-primary))',
42-
'--md-focus-ring-outward-offset': '-3px'
43+
'--md-focus-ring-shape': "8px"
4344
} as React.CSSProperties
4445
}
4546
/>

‎packages/actify/src/components/ListBox/listbox.module.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
list-style: none;
33
margin: 0;
44
display: block;
5-
padding-left: 8px;
65
padding-block: 8px;
7-
padding-right: 8px;
86
list-style-type: none;
97
outline: none;
108
box-sizing: border-box;

‎packages/actify/src/components/ListBox/option.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.item {
22
display: flex;
3+
align-items: center;
34
cursor: pointer;
45
position: relative;
56
--md-ripple-hover-color: var(

0 commit comments

Comments
 (0)