Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft: feat(tooltip): create Tooltip #79

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 111 additions & 0 deletions packages/tooltip/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
# @solid-aria/button

## 0.1.3

### Patch Changes

- Updated dependencies [e6bac81]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]

## 0.1.2

### Patch Changes

- Try manual release
- Updated dependencies
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]

## 0.1.1

### Patch Changes

- 2ca4cfc: Change dependency versions of packages from "workspace^" to "^0.1.0" (current version) — Fixes #29
Move solid-primitives packages from peerDependencies to dependencies.
- Updated dependencies [2ca4cfc]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]

## 0.1.0

### Minor Changes

- dcfaa90: Release menu package, breaking change all primitives return plain object props instead of memoized value

### Patch Changes

- Updated dependencies [dcfaa90]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]

## 0.0.6

### Patch Changes

- 84e543b: Bump solid-js peer dep to ^1.4.3
- Updated dependencies [84e543b]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]

## 0.0.5

### Patch Changes

- Updated dependencies [af59eb8]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]

## 0.0.4

### Patch Changes

- Updated dependencies [e2c1d42]
- @solid-aria/[email protected]
- @solid-aria/[email protected]

## 0.0.3

### Patch Changes

- Updated dependencies [20da459]
- @solid-aria/[email protected]
- @solid-aria/[email protected]

## 0.0.2

### Patch Changes

- 7eebd05: Add FocusScope, Dialog and Overlays related primitives
- Updated dependencies [7eebd05]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]

## 0.0.1

### Patch Changes

- e8be0a0: Release button package
- Updated dependencies [e8be0a0]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
- @solid-aria/[email protected]
21 changes: 21 additions & 0 deletions packages/tooltip/LICENSE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
MIT License

Copyright (c) 2022 Solid Aria Working Group

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
163 changes: 163 additions & 0 deletions packages/tooltip/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<p>
<img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Button" alt="Solid Aria - Button">
</p>

# @solid-aria/button

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/button?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/button)
[![version](https://img.shields.io/npm/v/@solid-aria/button?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/button)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.

## Installation

```bash
npm install @solid-aria/tooltip
# or
yarn add @solid-aria/tooltip
# or
pnpm add @solid-aria/tooltyp
```

## `createTooltip`

Provides the behavior and accessibility implementation for a tooltip component.

### Features

On the surface, building a custom styled button seems simple. However, there are many cross browser inconsistencies in interactions and accessibility features to consider. `createTooltip` handles all of these interactions for you, so you can focus on the styling.

- Native HTML `<button>` support
- `<a>` and custom element type support via ARIA
- Mouse and touch event handling, and press state management
- Keyboard focus management and cross browser normalization
- Keyboard event support for `Space` and `Enter` keys

### How to use it

By default, `createTooltip` assumes that you are using it with a native `<button>` element.

```tsx
import { AriaButtonProps, createTooltip } from "@solid-aria/button";

function Button(props: AriaButtonProps) {
let ref: HTMLButtonElement | undefined;

const { buttonProps } = createTooltip(props, () => ref);

return (
<button {...buttonProps} ref={ref}>
{props.children}
</button>
);
}

function App() {
return <Button onPress={() => alert("Button pressed!")}>Test</Button>;
}
```

### Using a custom element type

Sometimes you might need to use an element other than a native `<button>`. `createTooltip` supports this via the `elementType` prop. When used with an element other than a native button, `createTooltip` automatically applies the necessary ARIA roles and attributes to ensure that the element is exposed to assistive technology as a button.

In addition, this example shows usage of the `isPressed` value returned by `createTooltip` to properly style the button's active state. You could use the CSS `:active` pseudo class for this, but `isPressed` properly handles when the user drags their pointer off of the button, along with keyboard support and better touch screen support.

```tsx
import { AriaButtonProps, createTooltip } from "@solid-aria/button";
import { mergeProps } from "solid-js";

function Button(props: AriaButtonProps<"span">) {
let ref: HTMLButtonElement | undefined;

const createTooltipProps = mergeProps({ elementType: "span" }, props);

const { buttonProps, isPressed } = createTooltip(createTooltipProps, () => ref);

return (
<span
{...buttonProps}
style={{
background: isPressed() ? "darkgreen" : "green",
color: "white",
padding: "10px",
cursor: "pointer",
"user-select": "none",
"-webkit-user-select": "none"
}}
ref={ref}
>
{props.children}
</span>
);
}

function App() {
return <Button onPress={() => alert("Button pressed!")}>Test</Button>;
}
```

## `createToggleButton`

Provides the behavior and accessibility implementation for a toggle button component. ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes.

### Features

Toggle buttons are similar to action buttons, but support an additional selection state that is toggled when a user presses the button. There is no built-in HTML element that represents a toggle button, so Solid Aria implements it using ARIA attributes.

- Native HTML `<button>`, `<a>`, and custom element type support
- Exposed as a toggle button via ARIA
- Mouse and touch event handling, and press state management
- Keyboard focus management and cross browser normalization
- Keyboard event support for `Space` and `Enter` keys

### How to use it

By default, `createToggleButton` assumes that you are using it with a native `<button>` element. You can use a custom element type by passing the `elementType` prop to `createToggleButton`. See the `createTooltip` docs for an example of this.

The following example shows how to use the `createToggleButton` to build a toggle button. The toggle state is used to switch between a green and blue background when unselected and selected respectively. In addition, the `isPressed` state is used to adjust the background to be darker when the user presses down on the button.

```tsx
import { AriaToggleButtonProps, createToggleButton } from "@solid-aria/button";

function ToggleButton(props: AriaToggleButtonProps) {
let ref: HTMLButtonElement | undefined;

const { buttonProps, isPressed, state } = createToggleButton(props, () => ref);

return (
<button
{...buttonProps}
style={{
background: isPressed()
? state.isSelected()
? "darkblue"
: "darkgreen"
: state.isSelected()
? "blue"
: "green",
color: "white",
padding: "10px",
cursor: "pointer",
"user-select": "none",
"-webkit-user-select": "none",
border: "none"
}}
ref={ref}
>
{props.children}
</button>
);
}

function App() {
return <ToggleButton>Test</ToggleButton>;
}
```

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.
14 changes: 14 additions & 0 deletions packages/tooltip/dev/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Solid App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./index.tsx" type="module"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions packages/tooltip/dev/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { render } from "solid-js/web";

function App() {
return <div>Hello Solid Aria!</div>;
}

render(() => <App />, document.getElementById("root") as HTMLDivElement);
3 changes: 3 additions & 0 deletions packages/tooltip/dev/vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { viteConfig } from "../../../configs/vite.config";

export default viteConfig;
5 changes: 5 additions & 0 deletions packages/tooltip/jest.config.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const baseJest = require("../../configs/jest.config.cjs");

module.exports = {
...baseJest
};
63 changes: 63 additions & 0 deletions packages/tooltip/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
{
"name": "@solid-aria/tooltip",
"version": "0.0.1",
"private": false,
"description": "Primitives for building accessible tooltip component.",
"keywords": [
"solid",
"aria",
"headless",
"design",
"system",
"components"
],
"homepage": "https://github.com/solidjs-community/solid-aria/tree/main/packages/tooltip#readme",
"bugs": {
"url": "https://github.com/solidjs-community/solid-aria/issues"
},
"repository": {
"type": "git",
"url": "git+https://github.com/solidjs-community/solid-aria.git"
},
"license": "MIT",
"author": "Helio Alves <[email protected]>",
"contributors": [],
"sideEffects": false,
"type": "module",
"main": "dist/index.cjs",
"module": "dist/index.js",
"types": "dist/index.d.ts",
"files": [
"dist"
],
"scripts": {
"build": "tsup",
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
"dev": "vite serve dev --host",
"test": "jest --passWithNoTests",
"test:watch": "jest --watch --passWithNoTests",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@solid-aria/focus": "^0.1.4",
"@solid-aria/interactions": "^0.1.4",
"@solid-aria/overlays": "^0.1.3",
"@solid-aria/types": "^0.1.2",
"@solid-aria/utils": "^0.2.0"
},
"devDependencies": {
"solid-js": "^1.4.4"
},
"peerDependencies": {
"solid-js": "^1.4.4"
},
"publishConfig": {
"access": "public"
},
"primitive": {
"name": "tooltip",
"stage": 0,
"list": [],
"category": ""
}
}
Loading