@instructure/ui-pill 8.9.2-snapshot.1 → 8.9.2-snapshot.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-pill",
-  "version": "8.9.2-snapshot.1+11d97b23e",
+  "version": "8.9.2-snapshot.12+6231ada93",
   "description": "A UI component to communicate concise status.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,24 +25,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/emotion": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/shared-types": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/ui-react-utils": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/ui-testable": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/ui-tooltip": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/ui-truncate-text": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/ui-utils": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/ui-view": "8.9.2-snapshot.1+11d97b23e",
+    "@instructure/console": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/emotion": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/shared-types": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-react-utils": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-testable": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-tooltip": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-truncate-text": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-utils": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-view": "8.9.2-snapshot.12+6231ada93",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/ui-color-utils": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/ui-test-locator": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/ui-test-queries": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/ui-test-utils": "8.9.2-snapshot.1+11d97b23e",
-    "@instructure/ui-themes": "8.9.2-snapshot.1+11d97b23e"
+    "@instructure/ui-babel-preset": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-color-utils": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-test-locator": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-test-queries": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-test-utils": "8.9.2-snapshot.12+6231ada93",
+    "@instructure/ui-themes": "8.9.2-snapshot.12+6231ada93"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -51,5 +51,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "11d97b23ea6f8360db54acd61c9caf51d787354b"
+  "gitHead": "6231ada93bd4299d640b5d39d7e44b0f54852b2a"
 }

package/src/Pill/props.ts

@@ -26,8 +26,16 @@ import PropTypes from 'prop-types'
 
 import { ThemeablePropTypes } from '@instructure/emotion'
 
-import type { Spacing, WithStyleProps } from '@instructure/emotion'
-import type { PropValidators, AsElementType } from '@instructure/shared-types'
+import type {
+  Spacing,
+  WithStyleProps,
+  ComponentStyle
+} from '@instructure/emotion'
+import type {
+  PropValidators,
+  AsElementType,
+  PillTheme
+} from '@instructure/shared-types'
 
 type PillOwnProps = {
   as?: AsElementType
@@ -40,7 +48,9 @@ type PropKeys = keyof PillOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
-type PillProps = PillOwnProps & WithStyleProps
+type PillProps = PillOwnProps & WithStyleProps<PillTheme, PillStyle>
+
+type PillStyle = ComponentStyle<'pill' | 'text' | 'maxWidth'>
 
 const propTypes: PropValidators<PropKeys> = {
   as: PropTypes.elementType, // eslint-disable-line react/require-default-props
@@ -70,5 +80,5 @@ const allowedProps: AllowedPropKeys = [
   'margin'
 ]
 
-export type { PillProps }
+export type { PillProps, PillStyle }
 export { propTypes, allowedProps }

package/src/Pill/styles.ts

@@ -22,8 +22,8 @@
  * SOFTWARE.
  */
 
-import { PillTheme } from '@instructure/shared-types'
-import { PillProps } from './props'
+import type { PillTheme } from '@instructure/shared-types'
+import type { PillProps, PillStyle } from './props'
 
 /**
  * ---
@@ -35,7 +35,10 @@ import { PillProps } from './props'
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-const generateStyle = (componentTheme: PillTheme, props: PillProps) => {
+const generateStyle = (
+  componentTheme: PillTheme,
+  props: PillProps
+): PillStyle => {
   const { color } = props
 
   const pillColorVariants = {

package/types/Pill/props.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { Spacing, WithStyleProps } from '@instructure/emotion';
-import type { PropValidators, AsElementType } from '@instructure/shared-types';
+import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
+import type { PropValidators, AsElementType, PillTheme } from '@instructure/shared-types';
 declare type PillOwnProps = {
     as?: AsElementType;
     color?: 'primary' | 'success' | 'danger' | 'info' | 'warning' | 'alert';
@@ -10,9 +10,10 @@ declare type PillOwnProps = {
 };
 declare type PropKeys = keyof PillOwnProps;
 declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
-declare type PillProps = PillOwnProps & WithStyleProps;
+declare type PillProps = PillOwnProps & WithStyleProps<PillTheme, PillStyle>;
+declare type PillStyle = ComponentStyle<'pill' | 'text' | 'maxWidth'>;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { PillProps };
+export type { PillProps, PillStyle };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/Pill/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Pill/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAE9E,aAAK,YAAY,GAAG;IAClB,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;IACvE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AACD,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG,YAAY,GAAG,cAAc,CAAA;AAE9C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAkBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAMnB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Pill/props.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EACb,SAAS,EACV,MAAM,2BAA2B,CAAA;AAElC,aAAK,YAAY,GAAG;IAClB,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;IACvE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACpC,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AACD,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG,YAAY,GAAG,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAEpE,aAAK,SAAS,GAAG,cAAc,CAAC,MAAM,GAAG,MAAM,GAAG,UAAU,CAAC,CAAA;AAE7D,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAkBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAMnB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/Pill/styles.d.ts

@@ -1,5 +1,5 @@
-import { PillTheme } from '@instructure/shared-types';
-import { PillProps } from './props';
+import type { PillTheme } from '@instructure/shared-types';
+import type { PillProps, PillStyle } from './props';
 /**
  * ---
  * private: true
@@ -10,95 +10,6 @@ import { PillProps } from './props';
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-declare const generateStyle: (componentTheme: PillTheme, props: PillProps) => {
-    pill: {
-        color: string;
-        borderColor: string;
-        label: string;
-        display: string;
-        fontFamily: string;
-        boxSizing: string;
-        padding: string | 0;
-        background: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderRadius: string | 0;
-        lineHeight: string;
-    } | {
-        color: string;
-        borderColor: string;
-        label: string;
-        display: string;
-        fontFamily: string;
-        boxSizing: string;
-        padding: string | 0;
-        background: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderRadius: string | 0;
-        lineHeight: string;
-    } | {
-        color: string;
-        borderColor: string;
-        label: string;
-        display: string;
-        fontFamily: string;
-        boxSizing: string;
-        padding: string | 0;
-        background: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderRadius: string | 0;
-        lineHeight: string;
-    } | {
-        color: string;
-        borderColor: string;
-        label: string;
-        display: string;
-        fontFamily: string;
-        boxSizing: string;
-        padding: string | 0;
-        background: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderRadius: string | 0;
-        lineHeight: string;
-    } | {
-        color: string;
-        borderColor: string;
-        label: string;
-        display: string;
-        fontFamily: string;
-        boxSizing: string;
-        padding: string | 0;
-        background: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderRadius: string | 0;
-        lineHeight: string;
-    } | {
-        color: string;
-        borderColor: string;
-        label: string;
-        display: string;
-        fontFamily: string;
-        boxSizing: string;
-        padding: string | 0;
-        background: string;
-        borderWidth: string | 0;
-        borderStyle: string;
-        borderRadius: string | 0;
-        lineHeight: string;
-    };
-    text: {
-        label: string;
-        boxSizing: string;
-        textTransform: string;
-        fontSize: string | 0;
-        fontWeight: number;
-        letterSpacing: string;
-    };
-    maxWidth: string | 0;
-};
+declare const generateStyle: (componentTheme: PillTheme, props: PillProps) => PillStyle;
 export default generateStyle;
 //# sourceMappingURL=styles.d.ts.map

package/types/Pill/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Pill/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnC;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBAAoB,SAAS,SAAS,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDjE,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/Pill/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAEnD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,SAAS,SAClB,SAAS,KACf,SAuDF,CAAA;AAED,eAAe,aAAa,CAAA"}