Skip to content

Commit

Permalink
Small changes and grammar corrections
Browse files Browse the repository at this point in the history
  • Loading branch information
mhawkinsbasis committed Oct 10, 2023
1 parent d05ec3f commit 89c3036
Show file tree
Hide file tree
Showing 5 changed files with 17 additions and 13 deletions.
4 changes: 2 additions & 2 deletions docs/components/checkbox.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,11 +72,11 @@ height = '200px'

## Indeterminism

The `CheckBox` component supports indeterminism, which is a UI pattern commonly used in forms and lists to indicate that a group of checkboxes has a mixture of checked and unchecked states. This state is represented by a third visual state, typically displayed as a filled square or a dash inside the checkbox. There are a few common use cases associated with the indeterminate status:
The `CheckBox` component supports indeterminism, which is a UI pattern commonly used in forms and lists to indicate that a group of checkboxes has a mixture of checked and unchecked states. This state is represented by a third visual state, typically displayed as a filled square or a dash inside the checkbox. There are a few common use cases associated with indeterminism:

- **Selecting multiple items**: Indeterminism is useful when users need to select multiple items from a list or a set of options. It allows users to indicate that they want to select some, but not all, of the available choices.

- **Hierarchical data**: Indeterminism can be employed in scenarios where there is a hierarchical relationship between CheckBoxes. For example, when selecting categories and subcategories, the indeterminate state can represent that some subcategories are selected while others are not, and the parent category is in the indeterminate state.
- **Hierarchical data**: Indeterminism can be employed in scenarios where there is a hierarchical relationship between CheckBoxes. For example, when selecting categories and subcategories, indeterminism can represent that some subcategories are selected while others are not, and the parent component is in the indeterminate state.

<ComponentDemo
path='https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.checkboxdemos.CheckboxIndeterminate'
Expand Down
14 changes: 7 additions & 7 deletions docs/components/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ The Dialog can be constructed using the default `Dialog()` constructor. Once the

## Backdrop and Blur

By enabling the backdrop attribute of the DWCJ's dialog component, a backdrop will be displayed behind the dialog. Additionally, when enabled, the dialog's blurred attribute will blur the backdrop of the dialog.
By enabling the backdrop attribute of the DWCJ's `Dialog` component, a backdrop will be displayed behind the `Dialog`. Additionally, when enabled, the Dialog's blurred attribute will blur the backdrop of the `Dialog`. Modifying these settings can help users by providing depths, visual hierarchy, and context, leading to more clear guidance for a user.

<ComponentDemo
path='https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.dialogdemos.DialogBackdropBlur'
Expand All @@ -56,8 +56,8 @@ height = '300px'

## Closing the Dialog

The dialog supports multiple cancellation methods for closure of the component: hitting the `ESC` key, clicking outside of the dialog, or using the `hide()` method. The first two properties are customizable via their respective methods:
`setCancelOnEscKey()` and `setCancelOnOutsideClick()`. The `hide()` method allows for the dialog to be closed programmatically, such as by clicking a button on the dialog, for example after saving data. A method to quickly enable or disable users' ability to close the dialog, `setClosable()` will prevent or allow both escape and click closure of the dialog.
The `Dialog` supports multiple cancellation methods for closure of the component: hitting the `ESC` key, clicking outside of the `Dialog`, or using the `hide()` method. The first two properties are customizable via their respective methods:
`setCancelOnEscKey()` and `setCancelOnOutsideClick()`. The `hide()` method allows for the `Dialog` to be closed programmatically, such as by clicking a button on the `Dialog` after saving data. A method to quickly enable or disable users' ability to close the `Dialog`, `setClosable()` will prevent or allow both escape and click closure of the `Dialog`.

<ComponentDemo
path='https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.dialogdemos.DialogClose'
Expand All @@ -79,10 +79,10 @@ height = '350px'

## Draggable

The dialog has built in functionality to be draggable, allowing the user to relocate the dialog window by clicking and dragging. The position of the dialog can be manipulated from any of the fields within it: the header, content or footer.
The `Dialog` has built in functionality to be draggable, allowing the user to relocate the `Dialog` window by clicking and dragging. The position of the `Dialog` can be manipulated from any of the fields within it: the header, content or footer.

### Snap to Edge
It is also possible to calibrate this behavior to snap to the edge of the screen, meaning the dialog will automatically align itself with the edge of the display when released from its drag and drop date. Snapping can be changed via the `setSnapToEdge()` method. The `setSnapThreshold()` takes a number of pixels, which will set how far the dialog should be from the sides of the screen before it will automatically snap to the edges.
It is also possible to calibrate this behavior to snap to the edge of the screen, meaning the `Dialog` will automatically align itself with the edge of the display when released from its drag and drop date. Snapping can be changed via the `setSnapToEdge()` method. The `setSnapThreshold()` takes a number of pixels, which will set how far the `Dialog` should be from the sides of the screen before it will automatically snap to the edges.

<ComponentDemo
path='https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.dialogdemos.DialogDraggable'
Expand All @@ -104,7 +104,7 @@ height = '350px'

### Vertical Alignment

In addition to manual assignment of a dialog's X and Y position, it is possible to use the dialog's built-in enum class to align the dialog. There are three possible values, `TOP`, `CENTER` and `BOTTOM`, each of which can be used with the `setAlignment()` method.
In addition to manual assignment of a dialog's X and Y position, it is possible to use the dialog's built-in enum class to align the `Dialog`. There are three possible values, `TOP`, `CENTER` and `BOTTOM`, each of which can be used with the `setAlignment()` method.

<ComponentDemo
path='https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.dialogdemos.DialogAlignments'
Expand All @@ -115,7 +115,7 @@ height = '550px'

### Full Screen and Breakpoints

The dialog can be set to enter full screen mode. When full screen is enabled, the dialog cannot be moved or positioned. This mode can be manipulated with the breakpoint attribute of the dialog. The breakpoint is a media query which components when the dialog will automatically flip to full screen mode. When the query matches, the dialog changes to full screen - otherwise it is positioned.
The `Dialog` can be set to enter full screen mode. When full screen is enabled, the `Dialog` cannot be moved or positioned. This mode can be manipulated with the breakpoint attribute of the `Dialog`. The breakpoint is a media query which components when the `Dialog` will automatically flip to full screen mode. When the query matches, the `Dialog` changes to full screen - otherwise it is positioned.

## Events

Expand Down
5 changes: 2 additions & 3 deletions docs/components/label.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ The `Label` class has three constructors:

1. `Label()`: Creates an empty label.
2. `Label(String text)`: Creates a label with the specified text.
3. `Label(String text, boolean wrap)`: Creates a label with the specified text and sets whether or not the text should be wrapped.
3. `Label(String text, boolean wrap)`: Creates a label with the specified text and sets whether or not the text should be wrapped. More detail about line wrapping can be found [here.](#line-wrapping)

Here's an example of how to create a Label object using each constructor:

Expand All @@ -47,8 +47,7 @@ Label wrappedLabel = new Label("Lorem ipsum dolor sit amet, consectetur adipisci

## HTML Injection

In addition to using the label as static text, it can also be used as an HTML tag within your code. Simply set the label's text to the desired HTML tag with the various attributes, class names, etc, and
the label will be replaced with the desired HTML element.
In addition to using the label as static text, it can also be used as an HTML tag within your code. Simply set the label's content to the desired HTML tag with the various attributes, class names, etc, and the label will be replaced with the desired HTML element.

<ComponentDemo
path='https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.labeldemos.LabelDemo'
Expand Down
1 change: 0 additions & 1 deletion docs/components/radio-button.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,6 @@ If the radio button is part of a group, selecting a different radio button withi
Manual activation provides finer control over the selection process, requiring an explicit action from the user to change the selected option.



### Auto Activation

Automatic activation is the default state for a `RadioButton`, and means that the button will be checked on whenever it gains focus for any reason. This means that
Expand Down
6 changes: 6 additions & 0 deletions docs/components/radio-group.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,19 @@ import JavadocLink from '@site/src/components/DocsTools/JavadocLink';

The `RadioButtonGroup` class is used to group related radio buttons together, which helps establish the mutual exclusivity among the options within that group. Users can select only one radio button within a given radio group. When a user selects a radio button within a group, any previously selected radio button in the same group automatically becomes deselected. This ensures that only one option can be chosen at a time.


<ComponentDemo
path='https://hot.bbx.kitchen/webapp/controlsamples?class=componentdemos.radiobuttondemos.RadioButtonGroupDemo'
javaE='https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/java/componentdemos/radiobuttondemos/RadioButtonGroupDemo.java'
cssURL='https://raw.githubusercontent.com/DwcJava/ControlSamples/main/src/main/resources/css/radiobuttonstyles/radiobutton_styles.css'
height="200px"
/>

:::important
The `RadioButtonGroup` component will not render an HTML element on the page. Rather, it is only
logic that ensures a group of RadioButtons behave as a group instead of individually.
:::

## Usages

The `RadioButtonGroup` is best used in scenarios where users need to make a single selection from a predefined set of options presented as radio buttons. Here are some examples of when to use the `RadioButtonGroup`:
Expand Down

0 comments on commit 89c3036

Please sign in to comment.