Skip to content

Commit

Permalink
Chore: Create Divider base class to abstract out style and layout spe…
Browse files Browse the repository at this point in the history
…cific api (#32065)
  • Loading branch information
eljefe223 authored Jul 22, 2024
1 parent 5c3c0ba commit 233720f
Show file tree
Hide file tree
Showing 6 changed files with 120 additions and 65 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "chore: create divider base class to abstract style specfic api",
"packageName": "@fluentui/web-components",
"email": "[email protected]",
"dependentChangeType": "patch"
}
66 changes: 52 additions & 14 deletions packages/web-components/docs/api-report.md
Original file line number Diff line number Diff line change
Expand Up @@ -457,6 +457,57 @@ export const BadgeStyles: ElementStyles;
// @public (undocumented)
export const BadgeTemplate: ElementViewTemplate<Badge>;

// @public
export class BaseButton extends FASTElement {
constructor();
autofocus: boolean;
// @internal
clickHandler(e: Event): boolean | void;
// (undocumented)
connectedCallback(): void;
defaultSlottedContent: HTMLElement[];
disabled?: boolean;
disabledFocusable: boolean;
// @internal
disabledFocusableChanged(previous: boolean, next: boolean): void;
// @internal
elementInternals: ElementInternals;
get form(): HTMLFormElement | null;
formAction?: string;
static readonly formAssociated = true;
formAttribute?: string;
// @internal
formDisabledCallback(disabled: boolean): void;
formEnctype?: string;
formMethod?: string;
formNoValidate?: boolean;
formTarget?: ButtonFormTarget;
keypressHandler(e: KeyboardEvent): boolean | void;
get labels(): ReadonlyArray<Node>;
name?: string;
protected press(): void;
resetForm(): void;
tabIndex: number;
type: ButtonType;
// @internal
typeChanged(previous: ButtonType, next: ButtonType): void;
value?: string;
}

// @public
export class BaseDivider extends FASTElement {
// (undocumented)
connectedCallback(): void;
// @internal
elementInternals: ElementInternals;
orientation?: DividerOrientation;
// @internal
orientationChanged(previous: string | null, next: string | null): void;
role: DividerRole;
// @internal
roleChanged(previous: string | null, next: string | null): void;
}

// @public
export const borderRadiusCircular = "var(--borderRadiusCircular)";

Expand All @@ -476,7 +527,6 @@ export const borderRadiusSmall = "var(--borderRadiusSmall)";
export const borderRadiusXLarge = "var(--borderRadiusXLarge)";

// Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag
// Warning: (ae-forgotten-export) The symbol "BaseButton" needs to be exported by the entry point index.d.ts
// Warning: (ae-internal-mixed-release-tag) Mixed release tags are not allowed for "Button" because one of its declarations is marked as @internal
//
// @public
Expand Down Expand Up @@ -1871,29 +1921,17 @@ export type DialogType = ValuesOf<typeof DialogType>;
// @public
export function display(displayValue: CSSDisplayPropertyValue): string;

// Warning: (ae-missing-release-tag) "Divider" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public
export class Divider extends FASTElement {
export class Divider extends BaseDivider {
// (undocumented)
alignContent?: DividerAlignContent;
alignContentChanged(prev: DividerAlignContent | undefined, next: DividerAlignContent | undefined): void;
// (undocumented)
appearance?: DividerAppearance;
appearanceChanged(prev: DividerAppearance | undefined, next: DividerAppearance | undefined): void;
// (undocumented)
connectedCallback(): void;
// @internal
elementInternals: ElementInternals;
// (undocumented)
inset?: boolean;
insetChanged(prev: boolean, next: boolean): void;
orientation?: DividerOrientation;
// @internal
orientationChanged(previous: string | null, next: string | null): void;
role: DividerRole;
// @internal
roleChanged(previous: string | null, next: string | null): void;
}

// @public
Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/src/button/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export { definition as ButtonDefinition } from './button.definition.js';
export { Button } from './button.js';
export { BaseButton, Button } from './button.js';
export { ButtonAppearance, ButtonFormTarget, ButtonShape, ButtonSize, ButtonType } from './button.options.js';
export type { ButtonOptions } from './button.options.js';
export { styles as ButtonStyles } from './button.styles.js';
Expand Down
106 changes: 57 additions & 49 deletions packages/web-components/src/divider/divider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole

/**
* A Divider Custom HTML Element.
*
* @remarks
* A divider groups sections of content to create visual rhythm and hierarchy. Use dividers along with spacing and headers to organize content in your layout.
*
* @public
*/
export class Divider extends FASTElement {
export class BaseDivider extends FASTElement {
/**
* The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
*
Expand Down Expand Up @@ -36,6 +36,60 @@ export class Divider extends FASTElement {
@attr
public orientation?: DividerOrientation;

public connectedCallback(): void {
super.connectedCallback();

this.elementInternals.role = this.role ?? DividerRole.separator;

if (this.role !== DividerRole.presentation) {
this.elementInternals.ariaOrientation = this.orientation ?? DividerOrientation.horizontal;
}
}

/**
* Sets the element's internal role when the role attribute changes.
*
* @param previous - the previous role value
* @param next - the current role value
* @internal
*/
public roleChanged(previous: string | null, next: string | null): void {
if (this.$fastController.isConnected) {
this.elementInternals.role = `${next ?? DividerRole.separator}`;
}

if (next === DividerRole.presentation) {
this.elementInternals.ariaOrientation = null;
}
}

/**
* Sets the element's internal orientation when the orientation attribute changes.
*
* @param previous - the previous orientation value
* @param next - the current orientation value
* @internal
*/
public orientationChanged(previous: string | null, next: string | null): void {
this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;

if (previous) {
toggleState(this.elementInternals, `${previous}`, false);
}

if (next) {
toggleState(this.elementInternals, `${next}`, true);
}
}
}

/**
* A Divider Custom HTML Element.
* Based on BaseDivider and includes style and layout specific attributes
*
* @public
*/
export class Divider extends BaseDivider {
/**
* @public
* @remarks
Expand Down Expand Up @@ -96,50 +150,4 @@ export class Divider extends FASTElement {
public insetChanged(prev: boolean, next: boolean) {
toggleState(this.elementInternals, 'inset', next);
}

public connectedCallback(): void {
super.connectedCallback();

this.elementInternals.role = this.role ?? DividerRole.separator;

if (this.role !== DividerRole.presentation) {
this.elementInternals.ariaOrientation = this.orientation ?? DividerOrientation.horizontal;
}
}

/**
* Sets the element's internal role when the role attribute changes.
*
* @param previous - the previous role value
* @param next - the current role value
* @internal
*/
public roleChanged(previous: string | null, next: string | null): void {
if (this.$fastController.isConnected) {
this.elementInternals.role = `${next ?? DividerRole.separator}`;
}

if (next === DividerRole.presentation) {
this.elementInternals.ariaOrientation = null;
}
}

/**
* Sets the element's internal orientation when the orientation attribute changes.
*
* @param previous - the previous orientation value
* @param next - the current orientation value
* @internal
*/
public orientationChanged(previous: string | null, next: string | null): void {
this.elementInternals.ariaOrientation = this.role !== DividerRole.presentation ? next : null;

if (previous) {
toggleState(this.elementInternals, `${previous}`, false);
}

if (next) {
toggleState(this.elementInternals, `${next}`, true);
}
}
}
2 changes: 1 addition & 1 deletion packages/web-components/src/divider/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export { Divider } from './divider.js';
export { BaseDivider, Divider } from './divider.js';
export { DividerAlignContent, DividerAppearance, DividerOrientation, DividerRole } from './divider.options.js';
export { definition as DividerDefinition } from './divider.definition.js';
export { template as DividerTemplate } from './divider.template.js';
Expand Down
2 changes: 2 additions & 0 deletions packages/web-components/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export {
BadgeTemplate,
} from './badge/index.js';
export {
BaseButton,
Button,
ButtonAppearance,
ButtonDefinition,
Expand Down Expand Up @@ -80,6 +81,7 @@ export {
export { Dialog, DialogType, DialogDefinition, DialogTemplate, DialogStyles } from './dialog/index.js';
export { DialogBody, DialogBodyDefinition, DialogBodyTemplate, DialogBodyStyles } from './dialog-body/index.js';
export {
BaseDivider,
Divider,
DividerAlignContent,
DividerAppearance,
Expand Down

0 comments on commit 233720f

Please sign in to comment.