Skip to content

Commit

Permalink
Fix dead doc links that were not root-relative (atlassian#955)
Browse files Browse the repository at this point in the history
  • Loading branch information
Blasz authored and alexreardon committed Nov 25, 2018
1 parent 1ada331 commit 602141e
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 12 deletions.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ Traditionally drag and drop interactions have been exclusively a mouse or touch

We provide **fantastic support for screen readers** to assist users with visual (or other) impairments. We ship with english messaging out of the box 📦. However, you are welcome to override these messages by using the `announce` function that it provided to all of the `DragDropContext > responder` functions.

See our [screen reader guide](docs/guides/screen-reader.md) for a guide on crafting useful screen reader messaging.
See our [screen reader guide](/docs/guides/screen-reader.md) for a guide on crafting useful screen reader messaging.

#### Example screen reader behaviour

Expand All @@ -238,7 +238,7 @@ This allows consumers to wrap interactive elements such as an anchor and have it

(🐱🎁 is a [schrodinger's cat](https://www.youtube.com/watch?v=IOYyCHGWJq4) joke)

> To see more in depth information about how we impact standard browser events see our [how we use DOM events guide](docs/guides/how-we-use-dom-events.md)
> To see more in depth information about how we impact standard browser events see our [how we use DOM events guide](/docs/guides/how-we-use-dom-events.md)
### Keyboard shortcuts: mouse dragging

Expand All @@ -259,7 +259,7 @@ Other than these explicitly prevented keyboard events all standard keyboard even

`react-beautiful-dnd` supports dragging with only a keyboard. We have audited how our keyboard shortcuts interact with standard browser keyboard interactions. When the user is not dragging they can use their keyboard as they normally would. While dragging we override and disable certain browser shortcuts (such as `tab`) to ensure a fluid experience for the user.

> To see more indepth information about how we impact standard browser events see our [how we use DOM events guide](docs/guides/how-we-use-dom-events.md)
> To see more indepth information about how we impact standard browser events see our [how we use DOM events guide](/docs/guides/how-we-use-dom-events.md)
### Keyboard shortcuts: keyboard dragging

Expand Down Expand Up @@ -303,7 +303,7 @@ During a drag the following standard keyboard events have their default behaviou

When a user presses their finger (or other input) on a `Draggable` we are not sure if they where intending to _tap_, _force press_, _scroll the container_ or _drag_. **As much as possible `react-beautiful-dnd` aims to ensure that a users default interaction experience remains unaffected**.

> To see more indepth information about how we impact standard browser events see our [how we use DOM events guide](docs/guides/how-we-use-dom-events.md)
> To see more indepth information about how we impact standard browser events see our [how we use DOM events guide](/docs/guides/how-we-use-dom-events.md)
### Starting a drag: long press

Expand Down Expand Up @@ -476,7 +476,7 @@ class App extends React.Component {
Responders are top level application events that you can use to perform your own state updates, style updates, as well as to make screen reader announcements.
[Please see our Responders guide](docs/guides/responders.md) for detailed information about responders ❤️
[Please see our Responders guide](/docs/guides/responders.md) for detailed information about responders ❤️
## `Droppable`
Expand Down
8 changes: 4 additions & 4 deletions docs/guides/responders.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
Responders are top level application events that you can use to perform your own state updates, style updates, as well as to make screen reader announcements.

> For more information about controlling the screen reader see our [screen reader guide](docs/guides/screen-reader.md)
> For more information about controlling the screen reader see our [screen reader guide](/docs/guides/screen-reader.md)
## What responders are available?

Expand All @@ -18,7 +18,7 @@ Responders are top level application events that you can use to perform your own

> Generally you will not need to use `onBeforeDragStart`, and it has a slightly different function signature to the rest of the responders
- `onBeforeDragStart`: Called just before `onDragStart`. It is called immediately before any `snapshot` values are updated. It can be useful to do dimension locking for [table reordering](docs/patterns/tables.md).
- `onBeforeDragStart`: Called just before `onDragStart`. It is called immediately before any `snapshot` values are updated. It can be useful to do dimension locking for [table reordering](/docs/patterns/tables.md).

## The second argument to responders: `provided: ResponderProvided`

Expand All @@ -30,7 +30,7 @@ type ResponderProvided = {|
type Announce = (message: string) => void;
```

All responders (except for `onBeforeDragStart`) are provided with a second argument: `ResponderProvided`. This object has one property: `announce`. This function is used to synchronously announce a message to screen readers. If you do not use this function we will announce a default english message. We have created a [guide for screen reader usage](docs/guides/screen-reader.md) which we recommend using if you are interested in controlling the screen reader messages for yourself and to support internationalisation. If you are using `announce` it must be called synchronously.
All responders (except for `onBeforeDragStart`) are provided with a second argument: `ResponderProvided`. This object has one property: `announce`. This function is used to synchronously announce a message to screen readers. If you do not use this function we will announce a default english message. We have created a [guide for screen reader usage](/docs/guides/screen-reader.md) which we recommend using if you are interested in controlling the screen reader messages for yourself and to support internationalisation. If you are using `announce` it must be called synchronously.

## `onDragStart` (optional)

Expand Down Expand Up @@ -155,7 +155,7 @@ type DropReason = 'DROP' | 'CANCEL';
> The use cases for this responder is super limited
Once we have all of the information we need to start a drag we call the `onBeforeDragStart` function. This is called just before we update the `snapshot` values for the `Draggable` and `Droppable` components. At this point the application is not in a dragging state and so changing of props such as `isDropDisabled` will fail. The `onBeforeDragStart` responder is a good opportunity to do any dimension locking required for [table reordering](docs/patterns/tables.md).
Once we have all of the information we need to start a drag we call the `onBeforeDragStart` function. This is called just before we update the `snapshot` values for the `Draggable` and `Droppable` components. At this point the application is not in a dragging state and so changing of props such as `isDropDisabled` will fail. The `onBeforeDragStart` responder is a good opportunity to do any dimension locking required for [table reordering](/docs/patterns/tables.md).
- ✅ Can apply modifications to existing components to lock their sizes
- ❌ Cannot remove or add any `Draggable` or `Droppable`
Expand Down
2 changes: 1 addition & 1 deletion docs/patterns/multi-drag.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ We can break the user experience down in three phases.

## Announcements

Keep in mind that internally `react-beautiful-dnd` is not aware of multi drag. Therefore it is advised that you use the `ResponderProvided > Announce` to announce meaningful screen reader messages for a multi drag. See our [screen reader guide](docs/guides/screen-reader.md) for details on how to control screen reader messaging.
Keep in mind that internally `react-beautiful-dnd` is not aware of multi drag. Therefore it is advised that you use the `ResponderProvided > Announce` to announce meaningful screen reader messages for a multi drag. See our [screen reader guide](/docs/guides/screen-reader.md) for details on how to control screen reader messaging.

## Selection

Expand Down
4 changes: 2 additions & 2 deletions docs/patterns/tables.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ The only thing you need to do is set `display: table` on a `Draggable` row while

This strategy will work with columns that have automatic column widths based on content. It will also work with fixed layouts. **It is a more robust strategy than the first, but it is also less performant.**

When we apply `position: fixed` to the dragging item it removes it from the automatic column width calculations that a table uses. So before a drag starts we _lock_ all of the cell widths using inline styles to prevent the column dimensions from changing when a drag starts. You can achieve this with the [`onBeforeDragStart` responder](docs/guides/responders.md).
When we apply `position: fixed` to the dragging item it removes it from the automatic column width calculations that a table uses. So before a drag starts we _lock_ all of the cell widths using inline styles to prevent the column dimensions from changing when a drag starts. You can achieve this with the [`onBeforeDragStart` responder](/docs/guides/responders.md).

This has poor performance characteristics at scale as it requires:

Expand All @@ -45,7 +45,7 @@ For tables with less than 50 rows this should approach be fine!

If you want to use `React.Portal` in combination with table row reordering then there are few extra steps you need to go through.

First up, have a read of our [using a portal pattern](docs/patterns/using-a-portal.md) to get familiar with the approach.
First up, have a read of our [using a portal pattern](/docs/patterns/using-a-portal.md) to get familiar with the approach.

It is important to know things timings of mount / unmount actions in React. We have created a [codesandbox.io example](https://codesandbox.io/s/nkl52y1wn0) to show how the mount timings work when moving in and out of a `React.Portal`.

Expand Down

0 comments on commit 602141e

Please sign in to comment.