Support for wildcard attributes, implement data-* attribute

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 0.21.1 - 2018-04-10
+## Added
+- `aria-*` and `data-*` attributes are now supported in all dash html components. (#40)
+- These new keywords can be added using a dictionary expansion, e.g. `html.Div(id="my-div", **{"data-toggle": "toggled", "aria-toggled": "true"})`
+
 ## 0.21.0 - 2018-02-21
 ## Added
 - #207 Dash now supports React components that use [Flow](https://flow.org/en/docs/react/).

dash/dash.py

@@ -408,7 +408,9 @@ def _validate_callback(self, output, inputs, state, events):
 
                     if (hasattr(arg, 'component_property') and
                             arg.component_property not in
-                            component.available_properties):
+                            component.available_properties and not
+                            any(arg.component_property.startswith(w) for w in
+                                component.available_wildcard_properties)):
                         raise exceptions.NonExistantPropException('''
                             Attempting to assign a callback with
                             the property "{}" but the component

dash/development/base_component.py

@@ -23,7 +23,11 @@ def __init__(self, **kwargs):
         # pylint: disable=super-init-not-called
         for k, v in list(kwargs.items()):
             # pylint: disable=no-member
-            if k not in self._prop_names:
+            k_in_propnames = k in self._prop_names
+            k_in_wildcards = any([k.startswith(w)
+                                  for w in
+                                  self._valid_wildcard_attributes])
+            if not k_in_propnames and not k_in_wildcards:
                 raise TypeError(
                     'Unexpected keyword argument `{}`'.format(k) +
                     '\nAllowed arguments: {}'.format(
@@ -34,10 +38,21 @@ def __init__(self, **kwargs):
             setattr(self, k, v)
 
     def to_plotly_json(self):
+        # Add normal properties
+        props = {
+            p: getattr(self, p)
+            for p in self._prop_names  # pylint: disable=no-member
+            if hasattr(self, p)
+        }
+        # Add the wildcard properties data-* and aria-*
+        props.update({
+            k: getattr(self, k)
+            for k in self.__dict__
+            if any(k.startswith(w) for w in
+                   self._valid_wildcard_attributes)  # pylint:disable=no-member
+        })
         as_json = {
-            'props': {p: getattr(self, p)
-                      for p in self._prop_names  # pylint: disable=no-member
-                      if hasattr(self, p)},
+            'props': props,
             'type': self._type,  # pylint: disable=no-member
             'namespace': self._namespace  # pylint: disable=no-member
         }
@@ -225,8 +240,12 @@ def __init__(self, {default_argtext}):
         self._prop_names = {list_of_valid_keys}
         self._type = '{typename}'
         self._namespace = '{namespace}'
+        self._valid_wildcard_attributes =\
+            {list_of_valid_wildcard_attr_prefixes}
         self.available_events = {events}
         self.available_properties = {list_of_valid_keys}
+        self.available_wildcard_properties =\
+            {list_of_valid_wildcard_attr_prefixes}
 
         for k in {required_args}:
             if k not in kwargs:
@@ -236,15 +255,23 @@ def __init__(self, {default_argtext}):
         super({typename}, self).__init__({argtext})
 
     def __repr__(self):
-        if(any(getattr(self, c, None) is not None for c in self._prop_names
-               if c is not self._prop_names[0])):
-
-            return (
-                '{typename}(' +
-                ', '.join([c+'='+repr(getattr(self, c, None))
-                           for c in self._prop_names
-                           if getattr(self, c, None) is not None])+')')
-
+        if(any(getattr(self, c, None) is not None
+               for c in self._prop_names
+               if c is not self._prop_names[0])
+           or any(getattr(self, c, None) is not None
+                  for c in self.__dict__.keys()
+                  if any(c.startswith(wc_attr)
+                  for wc_attr in self._valid_wildcard_attributes))):
+            props_string = ', '.join([c+'='+repr(getattr(self, c, None))
+                                      for c in self._prop_names
+                                      if getattr(self, c, None) is not None])
+            wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
+                                      for c in self.__dict__.keys()
+                                      if any([c.startswith(wc_attr)
+                                      for wc_attr in
+                                      self._valid_wildcard_attributes])])
+            return ('{typename}(' + props_string +
+                   (', ' + wilds_string if wilds_string != '' else '') + ')')
         else:
             return (
                 '{typename}(' +
@@ -253,6 +280,8 @@ def __repr__(self):
 
     filtered_props = reorder_props(filter_props(props))
     # pylint: disable=unused-variable
+    list_of_valid_wildcard_attr_prefixes = repr(parse_wildcards(props))
+    # pylint: disable=unused-variable
     list_of_valid_keys = repr(list(filtered_props.keys()))
     # pylint: disable=unused-variable
     docstring = create_docstring(
@@ -273,11 +302,9 @@ def __repr__(self):
 
     required_args = required_props(props)
 
-    d = c.format(**locals())
-
     scope = {'Component': Component}
     # pylint: disable=exec-used
-    exec(d, scope)
+    exec(c.format(**locals()), scope)
     result = scope[typename]
     return result
 
@@ -366,6 +393,27 @@ def parse_events(props):
     return events
 
 
+def parse_wildcards(props):
+    """
+    Pull out the wildcard attributes from the Component props
+
+    Parameters
+    ----------
+    props: dict
+        Dictionary with {propName: propMetadata} structure
+
+    Returns
+    -------
+    list
+        List of Dash valid wildcard prefixes
+    """
+    list_of_valid_wildcard_attr_prefixes = []
+    for wildcard_attr in ["data-*", "aria-*"]:
+        if wildcard_attr in props.keys():
+            list_of_valid_wildcard_attr_prefixes.append(wildcard_attr[:-1])
+    return list_of_valid_wildcard_attr_prefixes
+
+
 def reorder_props(props):
     """
     If "children" is in props, then move it to the

dash/version.py

@@ -1 +1 @@
-__version__ = '0.21.0'
+__version__ = '0.21.1'

dev-requirements.txt

@@ -1,5 +1,5 @@
 dash_core_components>=0.4.0
-dash_html_components>=0.5.0
+dash_html_components>=0.11.0rc1
 dash_flow_example==0.0.3
 dash_renderer
 percy

requirements.txt

@@ -2,7 +2,7 @@ appnope==0.1.0
 backports.shutil-get-terminal-size==1.0.0
 click==6.7
 dash-core-components==0.3.3
-dash-html-components==0.4.0
+dash-html-components==0.11.0rc1
 dash-renderer==0.2.9
 dash.ly==0.14.0
 decorator==4.0.11

tests/development/metadata_test.json

@@ -207,6 +207,20 @@
       "required": false,
       "description": ""
     },
+    "data-*": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-*": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
     "id": {
       "type": {
         "name": "string"

tests/development/test_base_component.py

@@ -17,6 +17,7 @@
 Component._prop_names = ('id', 'a', 'children', 'style', )
 Component._type = 'TestComponent'
 Component._namespace = 'test_namespace'
+Component._valid_wildcard_attributes = ['data-', 'aria-']
 
 
 def nested_tree():
@@ -411,6 +412,25 @@ def to_dict(id, children):
         )
         """
 
+    def test_to_plotly_json_with_wildcards(self):
+        c = Component(id='a', **{'aria-expanded': 'true',
+                                 'data-toggle': 'toggled',
+                                 'data-none': None})
+        c._prop_names = ('id',)
+        c._type = 'MyComponent'
+        c._namespace = 'basic'
+        self.assertEqual(
+            c.to_plotly_json(),
+            {'namespace': 'basic',
+             'props': {
+                'aria-expanded': 'true',
+                'data-toggle': 'toggled',
+                'data-none': None,
+                'id': 'a',
+              },
+             'type': 'MyComponent'}
+        )
+
     def test_len(self):
         self.assertEqual(len(Component()), 0)
         self.assertEqual(len(Component(children='Hello World')), 1)
@@ -580,6 +600,16 @@ def test_repr_nested_arguments(self):
             "Table(Table(children=Table(id='1'), id='2'))"
         )
 
+    def test_repr_with_wildcards(self):
+        c = self.ComponentClass(id='1', **{"data-one": "one",
+                                            "aria-two": "two"})
+        data_first = "Table(id='1', data-one='one', aria-two='two')"
+        aria_first = "Table(id='1', aria-two='two', data-one='one')"
+        repr_string = repr(c)
+        if not (repr_string == data_first or repr_string == aria_first):
+            raise Exception("%s\nDoes not equal\n%s\nor\n%s" %
+                            (repr_string, data_first, aria_first))
+
     def test_docstring(self):
         assert_docstring(self.assertEqual, self.ComponentClass.__doc__)
 
@@ -674,6 +704,10 @@ def setUp(self):
 
             ['customArrayProp', 'list'],
 
+            ['data-*', 'string'],
+
+            ['aria-*', 'string'],
+
             ['id', 'string'],
 
             ['dashEvents', "a value equal to: 'restyle', 'relayout', 'click'"]
@@ -749,6 +783,8 @@ def assert_docstring(assertEqual, docstring):
 
             "- customProp (optional)",
             "- customArrayProp (list; optional)",
+            '- data-* (string; optional)',
+            '- aria-* (string; optional)',
             '- id (string; optional)',
             '',
             "Available events: 'restyle', 'relayout', 'click'",

tests/development/test_component_loader.py

@@ -28,6 +28,20 @@
                 "description": "Children",
                 "required": false
             },
+            "data-*": {
+                "type": {
+                    "name": "string"
+                },
+                "description": "Wildcard data",
+                "required": false
+            },
+            "aria-*": {
+                "type": {
+                    "name": "string"
+                },
+                "description": "Wildcard aria",
+                "required": false
+            },
             "bar": {
                 "type": {
                     "name": "custom"
@@ -113,6 +127,9 @@ def test_loadcomponents(self):
             'foo': 'Hello World',
             'bar': 'Lah Lah',
             'baz': 'Lemons',
+            'data-foo': 'Blah',
+            'aria-bar': 'Seven',
+            'baz': 'Lemons',
             'children': 'Child'
         }
         AKwargs = {