@instructure/ui-buttons 11.6.0 → 11.6.1-snapshot-129

package/src/ToggleButton/v2/index.tsx

@@ -0,0 +1,133 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import { Component } from 'react'
+
+import { passthroughProps } from '@instructure/ui-react-utils'
+
+import { Tooltip } from '@instructure/ui-tooltip/latest'
+import { IconButton } from '../../IconButton/v2'
+
+import { allowedProps } from './props'
+import type { ToggleButtonProps, ToggleButtonState } from './props'
+
+/**
+---
+category: components
+---
+**/
+
+class ToggleButton extends Component<ToggleButtonProps, ToggleButtonState> {
+  static readonly componentId = 'ToggleButton'
+
+  static allowedProps = allowedProps
+  static defaultProps = {
+    size: 'medium',
+    as: 'button',
+    // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
+    interaction: undefined,
+    mountNode: null,
+    color: 'secondary',
+    placement: 'top center',
+    constrain: 'window'
+  }
+
+  constructor(props: ToggleButtonProps) {
+    super(props)
+
+    this.state = {
+      isShowingTooltip: props.isShowingTooltip || false
+    }
+  }
+
+  ref: Element | null = null
+
+  handleRef = (el: Element | null) => {
+    const { elementRef } = this.props
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  get isShowingTooltip() {
+    return typeof this.props.isShowingTooltip === 'undefined'
+      ? this.state.isShowingTooltip
+      : this.props.isShowingTooltip
+  }
+
+  render() {
+    const {
+      as,
+      color,
+      elementRef,
+      size,
+      interaction,
+      mountNode,
+      renderIcon,
+      renderTooltipContent,
+      screenReaderLabel,
+      status,
+      placement,
+      onClick,
+      ...props
+    } = this.props
+
+    return (
+      <Tooltip
+        renderTip={renderTooltipContent}
+        on={['hover', 'focus']}
+        placement={placement}
+        color={color === 'primary-inverse' ? 'primary-inverse' : 'primary'}
+        isShowingContent={this.isShowingTooltip}
+        onShowContent={() => {
+          this.setState({ isShowingTooltip: true })
+        }}
+        onHideContent={() => {
+          this.setState({ isShowingTooltip: false })
+        }}
+        mountNode={mountNode}
+        elementRef={(el) => (this.ref = el)}
+      >
+        <IconButton
+          {...passthroughProps(props)}
+          screenReaderLabel={screenReaderLabel}
+          withBackground={false}
+          withBorder={false}
+          color={color}
+          size={size}
+          elementRef={this.handleRef}
+          as={as}
+          onClick={onClick}
+          interaction={interaction}
+          aria-pressed={status === 'pressed'}
+          data-cid="ToggleButton"
+          renderIcon={renderIcon}
+        />
+      </Tooltip>
+    )
+  }
+}
+
+export { ToggleButton }
+export default ToggleButton

package/src/ToggleButton/v2/props.ts

@@ -0,0 +1,143 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+import React from 'react'
+
+import type {
+  AsElementType,
+  OtherHTMLAttributes
+} from '@instructure/shared-types'
+import type {
+  PlacementPropValues,
+  PositionConstraint,
+  PositionMountNode
+} from '@instructure/ui-position'
+import type { ViewProps } from '@instructure/ui-view/latest'
+import { Renderable } from '@instructure/shared-types'
+
+type ToggleButtonOwnProps = {
+  /**
+   * Text to output only to screen readers
+   */
+  screenReaderLabel: string
+
+  /**
+   * Text to render in the tooltip shown on hover/focus
+   */
+  renderTooltipContent: React.ReactNode | ((...args: any[]) => any)
+
+  /**
+   * An icon or function that returns an icon
+   */
+  renderIcon: Renderable
+
+  /**
+   * Toggles the `aria-pressed` attribute on the button (`true` if `pressed`; `false` if `unpressed`)
+   */
+  status: 'pressed' | 'unpressed'
+
+  /**
+   * The element to render as the component root; `button` by default
+   */
+  as?: AsElementType
+
+  /**
+   * Specifies if interaction with `ToggleButton` is `enabled`, `disabled`, or `readonly`
+   */
+  interaction?: 'enabled' | 'disabled' | 'readonly'
+
+  /**
+   * The size of the `ToggleButton`
+   */
+  size?: 'small' | 'medium' | 'large'
+
+  /**
+   * Provides a reference to `ToggleButton`'s underlying HTML element
+   */
+  elementRef?: (element: Element | null) => void
+
+  /**
+   * Callback fired when the `ToggleButton` is clicked
+   */
+  onClick?: (
+    event: React.KeyboardEvent<ViewProps> | React.MouseEvent<ViewProps>
+  ) => void
+
+  /**
+   * The color in which to display the icon
+   */
+  color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
+
+  /**
+   * By default, the tooltip will show on hover/focus. Use this prop if you need to override that behavior.
+   */
+  isShowingTooltip?: boolean
+
+  /**
+   * An element or a function returning an element to use as the mount node
+   */
+  mountNode?: PositionMountNode
+
+  /**
+   * The placement of the tooltip in relation to the button
+   */
+  placement?: PlacementPropValues
+
+  /**
+   * The parent in which to constrain the tooltip.
+   * One of: 'window', 'scroll-parent', 'parent', 'none', an element,
+   * or a function returning an element.
+   */
+  constrain?: PositionConstraint
+}
+
+type PropKeys = keyof ToggleButtonOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type ToggleButtonProps = ToggleButtonOwnProps &
+  OtherHTMLAttributes<ToggleButtonOwnProps>
+
+type ToggleButtonState = {
+  isShowingTooltip: boolean
+}
+const allowedProps: AllowedPropKeys = [
+  'as',
+  'color',
+  'constrain',
+  'elementRef',
+  'interaction',
+  'isShowingTooltip',
+  'mountNode',
+  'onClick',
+  'placement',
+  'renderIcon',
+  'renderTooltipContent',
+  'screenReaderLabel',
+  'size',
+  'status'
+]
+
+export type { ToggleButtonProps, ToggleButtonState }
+export { allowedProps }

package/src/exports/a.ts

@@ -0,0 +1,40 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+export { BaseButton } from '../BaseButton/v1'
+export { Button } from '../Button/v1'
+export { CloseButton } from '../CloseButton/v1'
+export { CondensedButton } from '../CondensedButton/v1'
+export { IconButton } from '../IconButton/v1'
+export { ToggleButton } from '../ToggleButton/v1'
+
+export type {
+  BaseButtonProps,
+  BaseButtonOwnProps
+} from '../BaseButton/v1/props'
+export type { ButtonProps } from '../Button/v1/props'
+export type { CloseButtonProps } from '../CloseButton/v1/props'
+export type { CondensedButtonProps } from '../CondensedButton/v1/props'
+export type { IconButtonProps } from '../IconButton/v1/props'
+export type { ToggleButtonProps } from '../ToggleButton/v1/props'

package/src/exports/b.ts

@@ -0,0 +1,40 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * 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.
+ */
+
+export { BaseButton } from '../BaseButton/v2'
+export { Button } from '../Button/v2'
+export { CloseButton } from '../CloseButton/v2'
+export { CondensedButton } from '../CondensedButton/v2'
+export { IconButton } from '../IconButton/v2'
+export { ToggleButton } from '../ToggleButton/v2'
+
+export type {
+  BaseButtonProps,
+  BaseButtonOwnProps
+} from '../BaseButton/v2/props'
+export type { ButtonProps } from '../Button/v2/props'
+export type { CloseButtonProps } from '../CloseButton/v2/props'
+export type { CondensedButtonProps } from '../CondensedButton/v2/props'
+export type { IconButtonProps } from '../IconButton/v2/props'
+export type { ToggleButtonProps } from '../ToggleButton/v2/props'