Skip to content

Commit

Permalink
fix(segment): fix background states and document properties
Browse files Browse the repository at this point in the history 
references #14850 references #14853
  • Loading branch information
@brandyscarney
brandyscarney committed Nov 8, 2018
1 parent 21c190b commit bedc7c6
Show file tree
Hide file tree
Showing 8 changed files with 116 additions and 74 deletions.
7 changes: 4 additions & 3 deletions angular/src/directives/proxies.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -710,24 +710,25 @@ export declare interface Segment extends StencilComponents<'IonSegment'> {}
@Component({ selector: 'ion-segment', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'value'] })
export class Segment {
ionChange: EventEmitter<CustomEvent>;
ionStyle: EventEmitter<CustomEvent>;

constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
const el = r.nativeElement;
proxyInputs(this, el, ['color', 'mode', 'disabled', 'value']);
proxyOutputs(this, el, ['ionChange']);
proxyOutputs(this, el, ['ionChange', 'ionStyle']);
}
}

export declare interface SegmentButton extends StencilComponents<'IonSegmentButton'> {}
@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'checked', 'disabled', 'value'] })
@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'checked', 'disabled', 'layout', 'value'] })
export class SegmentButton {
ionSelect: EventEmitter<CustomEvent>;

constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
const el = r.nativeElement;
proxyInputs(this, el, ['color', 'mode', 'checked', 'disabled', 'value']);
proxyInputs(this, el, ['color', 'mode', 'checked', 'disabled', 'layout', 'value']);
proxyOutputs(this, el, ['ionSelect']);
}
}
Expand Down
34 changes: 17 additions & 17 deletions core/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export namespace Components {
/**
* An array of buttons for the action sheet.
*/
'buttons'?: (ActionSheetButton | string)[];
'buttons': (ActionSheetButton | string)[];
/**
* Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
*/
Expand Down Expand Up @@ -214,7 +214,7 @@ export namespace Components {
* Emitted before the alert has presented.
*/
'onIonActionSheetWillPresent'?: (event: CustomEvent<void>) => void;
'overlayIndex'?: number;
'overlayIndex': number;
/**
* Subtitle for the action sheet.
*/
Expand Down Expand Up @@ -381,7 +381,7 @@ export namespace Components {
* Emitted before the alert has presented.
*/
'onIonAlertWillPresent'?: (event: CustomEvent<void>) => void;
'overlayIndex'?: number;
'overlayIndex': number;
/**
* The subtitle in the heading of the alert. Displayed under the title.
*/
Expand Down Expand Up @@ -2384,7 +2384,7 @@ export namespace Components {
* Emitted before the loading has presented.
*/
'onIonLoadingWillPresent'?: (event: CustomEvent<void>) => void;
'overlayIndex'?: number;
'overlayIndex': number;
/**
* If `true`, a backdrop will be displayed behind the loading indicator.
*/
Expand Down Expand Up @@ -2703,7 +2703,7 @@ export namespace Components {
/**
* The component to display inside of the modal.
*/
'component'?: ComponentRef;
'component': ComponentRef;
/**
* The data to pass to the modal component.
*/
Expand Down Expand Up @@ -2753,7 +2753,7 @@ export namespace Components {
* Emitted before the modal has presented.
*/
'onIonModalWillPresent'?: (event: CustomEvent<void>) => void;
'overlayIndex'?: number;
'overlayIndex': number;
/**
* If `true`, a backdrop will be displayed behind the modal.
*/
Expand Down Expand Up @@ -2943,7 +2943,7 @@ export namespace Components {
'col': PickerColumn;
}
interface IonPickerColumnAttributes extends StencilHTMLAttributes {
'col'?: PickerColumn;
'col': PickerColumn;
}

interface IonPickerController {
Expand Down Expand Up @@ -3094,7 +3094,7 @@ export namespace Components {
* Emitted before the picker has presented.
*/
'onIonPickerWillPresent'?: (event: CustomEvent<void>) => void;
'overlayIndex'?: number;
'overlayIndex': number;
/**
* If `true`, a backdrop will be displayed behind the picker.
*/
Expand Down Expand Up @@ -3197,7 +3197,7 @@ export namespace Components {
/**
* The component to display inside of the popover.
*/
'component'?: ComponentRef;
'component': ComponentRef;
/**
* The data to pass to the popover component.
*/
Expand Down Expand Up @@ -3251,7 +3251,7 @@ export namespace Components {
* Emitted before the popover has presented.
*/
'onIonPopoverWillPresent'?: (event: CustomEvent<void>) => void;
'overlayIndex'?: number;
'overlayIndex': number;
/**
* If `true`, a backdrop will be displayed behind the popover.
*/
Expand Down Expand Up @@ -3641,15 +3641,15 @@ export namespace Components {
/**
* A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply. The path specified in this value is always an absolute path, even if the initial `/` slash is not specified.
*/
'from'?: string;
'from': string;
/**
* Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes. `ion-router` captures this event in order to update his internal registry of router rules.
*/
'onIonRouteRedirectChanged'?: (event: CustomEvent) => void;
/**
* A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property. The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perform a redirection to a different domain. Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router. When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the "from" value matches.
*/
'to'?: string | undefined | null;
'to': string | undefined | null;
}

interface IonRoute {
Expand All @@ -3670,7 +3670,7 @@ export namespace Components {
/**
* Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches. The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select.
*/
'component'?: string;
'component': string;
/**
* A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered.
*/
Expand Down Expand Up @@ -3955,7 +3955,7 @@ export namespace Components {
/**
* Set the layout of the text and icon in the segment.
*/
'layout'?: SegmentButtonLayout;
'layout': SegmentButtonLayout;
/**
* The mode determines which platform styles to use.
*/
Expand Down Expand Up @@ -4547,7 +4547,7 @@ export namespace Components {
/**
* A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
*/
'tab'?: string;
'tab': string;
}

interface IonTab {
Expand Down Expand Up @@ -4576,7 +4576,7 @@ export namespace Components {
/**
* A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
*/
'tab'?: string;
'tab': string;
}

interface IonTabs {
Expand Down Expand Up @@ -4976,7 +4976,7 @@ export namespace Components {
* Emitted before the toast has presented.
*/
'onIonToastWillPresent'?: (event: CustomEvent<void>) => void;
'overlayIndex'?: number;
'overlayIndex': number;
/**
* The position of the toast on the screen.
*/
Expand Down
70 changes: 46 additions & 24 deletions core/src/components/segment-button/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,14 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen

## Properties

| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------------------- |
| `checked` | `checked` | If `true`, the segment button is selected. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` |
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------- |
| `checked` | `checked` | If `true`, the segment button is selected. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` |
| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide"` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` |


## Events
Expand All @@ -26,23 +27,44 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen

## CSS Custom Properties

| Name | Description |
| -------------------- | ---------------------------- |
| `--border-radius` | Radius of the button border |
| `--border-style` | Style of the button border |
| `--border-width` | Width of the button border |
| `--btn-background` | Background of the button |
| `--btn-border-color` | Color of the button border |
| `--icon-size` | Size of the button icon |
| `--margin-bottom` | Bottom margin of the button |
| `--margin-end` | End margin of the button |
| `--margin-start` | Start margin of the button |
| `--margin-top` | Top margin of the button |
| `--padding-bottom` | Bottom padding of the button |
| `--padding-end` | End padding of the button |
| `--padding-start` | Start padding of the button |
| `--padding-top` | Top padding of the button |
| `--transition` | Transition of the button |
| Name | Description |
| --------------------------- | ------------------------------------------------------------------- |
| `--background` | Background of the segment button |
| `--background-activated` | Background of the activated (pressed) segment button |
| `--background-checked` | Background of the checked segment button |
| `--background-disabled` | Background of the disabled segment button |
| `--background-hover` | Background of the segment button on hover |
| `--border-color` | Color of the segment button border |
| `--border-radius` | Radius of the segment button border |
| `--border-style` | Style of the segment button border |
| `--border-width` | Width of the segment button border |
| `--color` | Color of the segment button |
| `--color-activated` | Color of the activated (pressed) segment button |
| `--color-checked` | Color of the checked segment button |
| `--color-checked-activated` | Color of the checked & activated segment button |
| `--color-checked-disabled` | Color of the checked & disabled segment button |
| `--color-disabled` | Color of the disabled segment button |
| `--icon-margin-bottom` | Bottom margin of the segment button icon |
| `--icon-margin-end` | End margin of the segment button icon |
| `--icon-margin-start` | Start margin of the segment button icon |
| `--icon-margin-top` | Top margin of the segment button icon |
| `--icon-order` | Order of the segment button icon |
| `--icon-size` | Font size of the segment button icon |
| `--indicator-color` | Color of the indicator (highlight) under the segment button |
| `--indicator-color-checked` | Color of the indicator (highlight) under the checked segment button |
| `--label-margin-bottom` | Bottom margin of the segment button label |
| `--label-margin-end` | End margin of the segment button label |
| `--label-margin-start` | Start margin of the segment button label |
| `--label-margin-top` | Top margin of the segment button label |
| `--margin-bottom` | Bottom margin of the segment button |
| `--margin-end` | End margin of the segment button |
| `--margin-start` | Start margin of the segment button |
| `--margin-top` | Top margin of the segment button |
| `--padding-bottom` | Bottom padding of the segment button |
| `--padding-end` | End padding of the segment button |
| `--padding-start` | Start padding of the segment button |
| `--padding-top` | Top padding of the segment button |
| `--transition` | Transition of the segment button |


----------------------------------------------
Expand Down
Loading

0 comments on commit bedc7c6

Please sign in to comment.